4 FBML Code Examples for a Kick-Ass Fan Page


FBML stands for Facebook Markup Language. It is a programming language, similar to HTML, that Facebook introduced to let developers worldwide freely develop applications, games, extensions and tabs within the Facebook environment. Now, when it comes to adding all kinds of cool features to your Fan Page, we all know there are a lot of applications out that are already programmed that you can just install and bingo. However, these apps tend to lack flexibility and add their own advertising/branding to your page. They sometimes allow you to remove their mentions for a monthly fee. Well, did you know that using basic FBML code, you can set up all kinds of features on your Fan Page, without the need to install or buy any external application? Here are 4 of the most popular FBML code examples you can use to design a great-looking, dynamic and professional Fan Page:

1) Code to Add a “Suggest to Friends” Tab

This one is really cool. Everyone has noticed that Facebook removed the “Suggest to Friends” link below the profile’s photo, but most people don’t know that there is still a way to use FBML to create your own “Suggest to friends” box! Copy paste the code below in your custom FBML tab and you’re good to go! To make it even better, you could add a strong incentive for people to invite their friends and they will!

IMPORTANT: First, you will need to create a tinyurl for your fan page. The reason for that, as weird as it sounds, is that Facebook won’t accept your real Facebook URL in the “action” method. If you don’t do this step, people won’t be redirected back to your fanpage after they have sent their invitation.

[code]


[/code]

2) Code to Make Fans and Non-Fans see different content

This is our favorite. If you want to build an incentivized landing page, this is a must! Using this code, you can choose to display different content to Non-Fans and Fans. This way, you can have an incentive appear for first visitors (example: Hit the Like Button to reveal a secret Discount Code). The moment a visitor becomes a Fan, your page reloads and displays the Fan-Only Content to them. This has been used by major brands such as GAP, Starbucks, 1800Flowers and more…

IMPORTANT: due to a CSS problem that might create a wide empty space are at the top of your page, we will need to do some CSS tweaking before getting to the fanpage itself.

First step: you will need to create a new css file (name it fanstyle.css for instance) and add the following code in it.

[code]
#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}
[/code]

Second Step: save and upload this file somewhere on your website. (should be something like http://www.yourdomain.com/fanstyle.css)

Last step: add the following code to your FBML page (replace yourdomain.com by the exact URL where the fanstyle.css has been uploaded in the previous step):

[code]


Fans will see this content

Non-Fans will see this content


[/code]

3) Code to Embed YouTube Videos

Most people think they need to install an app on their Fan Page to be able to display videos. Wrong. It’s really a piece of cake to do it yourself with FBML. Simply use the code below and replace “xxxxxxxxx” with the YouTube video ID, which is the string of characters after the “v=” in the URL in your browser’s address bar (up to the “&” or anything following it, if you see that after the string of letters and numbers).
[code]

Passionate about the world wide web since 1995, Amine has been working as a Web Developer, SEO & Social Media Marketing Specialist for several Organizations in the United States, Canada and China.

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Do You Like Our Blog?

Subscribe to our Web Marketing Newsletter and Receive Exclusive Tips from our CEO. Sign up now.






More from our Blog

See all posts
18 Comments
    • guest
    • September 29, 2011

    As of Oct 1st FB is requiring  “oauth 2.0  with https” do your examples above require this?

  1. plzzzzz help im just a kid here! i needahav some help with the youtube code. i started to dont understandthe part after the sentence: after “v=”………| i dont know it can someone plz explain it more clearly thanksssss

    • Yiannis Kerassovitis
    • June 10, 2011

    I have used this code for “Suggest to Friends” 

    <fb:request-form
    method="post"
    action="http://on.fb.me/cqBDxN&quot;
    type="Randstad"
    invite="true"
    content="Συνδεθείτε με την Randstad για να ενημερώνεστε για νέες θέσεις εργασίας και συμβουλές για την αναζήτηση εργασίας.
    “>

    but I receive this message: Sorry, you have run out of requests to send with this application. Please try again tomorrow.

    Do I do something wrong?

  2. Last step: add the following code to your FBML page (replace yourdomain.com by the exact URL where the fanstyle.css has been uploaded in the previous step):

    due to that sorry but what do u mean “has been uploaded”do the CSS Code need to hosting first ( k nnew this question look stupid but series i dont understand ehehehhehe )

    second what this code mean ?

    i had try the other method before that created white space before n i REALLY want to know and use this code

    suggestion mail me at tuah_moden89@yahoo.com

    • Hello Alan,

      yes that css code need to be hosted on a server (any server). Facebook doesn’t allow inline CSS hardcoded in FBML pages which is why the only way to use CSS is to create an external file, host it somewhere and then reference it within the fan page. Hope this helps.

      J.

  3. Thank you for this, really great piece of information. I have having a problem with #2. When I use the code, the first image is at the bottom of the page and after I “like” the page, my next image is where it should be on top. I want the first image to be on the top of the page. Any help would be greatly appreciated. free free to email me at beallja@vcu.edu

    • Hi Beallja, thanks for noticing that! We have updated the code for this part. That’s a CSS problem that needs to be corrected by creating a new CSS file and referencing it from the fanpage. Please follow the new instructions we just posted above.

      • Hi John,
        Thanks for getting back to me so quickly. Everything seems to working wonderful except for one thing, which is very weird. My bottom image (I chopped 4 images from photoshop) on my first page before it gets “liked” only shows half the image. If you right click it and open it in a new tab, the full image shows up. It might be on my part but I can’t figure it out. Besides that the page is looking really sharp! Thanks for the updated code!

          • Complus1
          • March 18, 2011

          Was there a resolution to this? Because my ‘non-fan’ is only showing about half the screen, the rest is chopped off.

  4. Euhhhh… the thing is it looks good but when I send an invit it sends an invitation to like the app “FBML 3” and not my page…. : S Can somebody please help me, here is my code

    <fb:request-form method=”POST” type=”Soutien au Grand Stade OL” invite=”true” action=”http://www.facebook.com/multi_friend_selector.php” content=”Faites vivre le Soutien au Stade des Lumières!

    • i had the same problem too.not just me but manyyyyyyy others.do u have found the solution if yes pleaseee let me know i really needed it thanks

    • Hi Romain, thanks for pointing that out. We have just updated the code for the “Suggest to Friends” box. Please use the new code above. It will let you enter your Fan Page title and allow people to enter a custom message with each invitation.

    • Iamqueensblvd
    • January 28, 2011

    Terrific Post! I am really into social media right now (like everyone else out there!), especially Facebook Marketing and FBML. It can be hard to keep up to date with such a fast changing innovative topic but I manage to do it through the fan page factory (http://facebook.com/thefanpagefactory ?) and blog posts exactly like yours. Tips and tricks rock. I am trying to learn as much as possible to put myself ahead of the curve. So thank you again!

    Enjoy!

    Ross

  5. Is there FBML or iframes code to make one picture disappear and another reappear in the same tab when you are doing the coding for fans and non page page. Please see my FREE gift tab on FB FP site http://fb/me/motivatewithin

    I want my incentive image to disappear but it does not Thanks

      • Anonymous
      • January 27, 2011

      I’m not sure I understand exactly what you mean, but yes all you have to do is put the part you want only non-fans to see in between the “fb:else” part. As shown above…

  6. Great to hear that you liked it, and yes, the toughest part is getting people to use it 🙂

  7. Thank you for the examples. I used the “suggest to friends” FBML code and it worked like a charm. Now if I could just get someone to use it…lol

      • Linda
      • January 27, 2011

      Hi, Where do I put the code??

  8. Pingback: Tweets that mention 4 FBML Code Examples for a Kick-Ass Fan Page | IronMonk - Web 2.0 Solutions -- Topsy.com

Comments are closed.