4 FBML Code Examples for a Kick-Ass Fan Page

• Posted by IronMonk Bloggers
• 23 January 2011
• Social Media Optimization

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.

<fb:request-form
method="post"
action="http://on.fb.me/something (the tinyurl you got from bit.ly)"
type="Your Fan Page Name"
invite="true"
content="The message you want to include with the invitation.
<fb:req-choice url='real URL to your fan page (not the shorturl)' label='Invitation' /> ">
<fb:multi-friend-selector actiontext="Short phrase that will appear at the top of the invitation box"
rows="3" cols="3" showborder="true" />
</fb:request-form>

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 {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
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):

<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/fanstyle.css">

<div id="wrapper">
<fb:visible-to-connection>
        Fans will see this content
<fb:else>
<div id="non-fans">
        Non-Fans will see this content
</div>
</fb:else>
</fb:visible-to-connection>
</div>

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

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='<a rel="nofollow" target="_blank" rel="nofollow" href="http://www.youtube.com/v/xxxxxxxxx" target="_blank">http://www.youtube.com/v/xxxxxxxxx</a>'
imgsrc='<a rel="nofollow" target="_blank" rel="nofollow" href="http://img.youtube.com/vi/xxxxxxxxx/2.jpg" target="_blank">http://img.youtube.com/vi/xxxxxxxxx/2.jpg</a>' width='340' height='270' />

4) Code to Randomize your Messages

This one is fun because it makes your page look more dynamic and interactive. You can easily add random messages to your Facebook page. You can, for instance, want to experiment different incentives or calls to action. The Facebook Random tag, as used in the code below, lets you achieve that in the simplest way...

1. <fb:random>
2. <fb:random-option weight=”2″>A: This will be shown 2 times as often as B.</fb:random-option>
3. <fb:random-option weight=”1″>B: This will be show half as often as A</fb:random-option>
4. </fb:random>

Tags: FBML code examples, FBML code samples, FBML code snippets

Related Posts:

• » Buying Fans & Followers, is it worth it?
• » Top Status Updates Ideas for your Fan Page: Keeping your Fans Engaged!
• » Top 5 Tips to Attract Targeted Twitter Followers (Legally!)
• » 4 Great App Developers for your Business Fan Page
• » Kick-Ass FREE Alternative to FBML