header('Cache-Control: max-age=86400');

4 FBML Code Examples for a Kick-Ass Fan Page

Home » Blog » 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.



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.

#wrapper {
margin:0 auto; border:0; padding:0;
#non-fans {
position:absolute; top:0; left:0;

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):


Fans will see this content

Non-Fans will see this content


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).


18 responses to “4 FBML Code Examples for a Kick-Ass Fan Page”

  1. Chris Avatar

    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

    1. Linda Avatar

      Hi, Where do I put the code??

  2. John Karr Avatar

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

  3. Motivate Within Avatar

    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

    1.  Avatar

      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…

  4. Iamqueensblvd Avatar

    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!



  5. Romain Minutte Avatar

    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!

    1. John Karr Avatar

      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.

    2. Alan Azs Avatar

      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

  6. Beallja Avatar

    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

    1. John Karr Avatar

      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.

      1. Beallja Avatar

        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!

        1. Complus1 Avatar

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

  7. Alan Azs Avatar

    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

    1. John Karr Avatar

      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.


  8. Yiannis Kerassovitis Avatar
    Yiannis Kerassovitis

    I have used this code for “Suggest to Friends” 

    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?

  9. Karen Sharken Blau Avatar

    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

  10. guest Avatar

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

Leave a Reply

Your email address will not be published. Required fields are marked *