In this tutorial, I will show you how you can customise your Facebook Fan page quickly and easily using the powerful Facebook Markup Language. If you haven't already got a Facebook Fan Page for your brand (be it website, blog or company), you might want to create one now. Check out our Webmaster Resources page on Facebook for an example.

1. Add a new custom tab

Most facebook fan pages have a custom tab and it is one of the most important assets that a facebook fan page should have. Follow the steps below to add a new tab to your Facebook Fan page:

1. Add Static FBML application to your fan page by clicking on Add to my Page link on the left.

2. Once you've added the Static FBML application, go to your Fan page and click on Edit Page on the left.

3. When you are on the Edit screen of your Fan page, click on Applications link on the left. You will see a list of applications that you've added/were added by default.

4. Look for FBML application from the list, and click on Go to application link.

5. You will be taken to Edit FBML page where you can change Box/Tab title and add content as you wish.

6. If you wish to add more than one tab on your Fan page, click on "Add another FBML box" link at the bottom of "Edit FBML" page and repeat step 2, 3, 4 and 5 to edit the newly created tab.

You can add HTML, plain text or FBML (Facebook Markup Language) in FBML box provided. You can also add the HTML code from readymade Facebook templates here.

2. Make your custom tab the default tab

To make your custom tab the default tab (ie: the tab to be displayed by default), go to your page and click on Wall tab, and click on "Settings" link under the status update area. You can then set Default Landing Page for everyone else by choosing your custom tab name from the drop down list. As the name suggests, the Default Landing Page is only for everyone else, and not for yourself, the admin of the page.

3. Display special content for people who've liked your page aka your fans

In order to do this, you will need to embed FBML (Facebook Markup Language) into your custom tab content. fb:visible-to-connection can be used to display exclusive content if the viewer is a friend of that user or is a fan of that Facebook Page.

<fb:visible-to-connection>
  
  <!-- For Fans and Friends -->
	<div id="promo">Hey there, fans! Please check back in a week to see if you have won our fabulous prize!</div>

  <fb:else>
    
	<!-- For Non-Fans and Non-Friends -->
	<div id="promo">Hey there!   Like us now for your chance to win!</div>
	
  </fb:else>
  
</fb:visible-to-connection>

4. Display content based on certain criteria

Sometimes, you may want to display restricted content, say, a location-specific content to those who are from certain countries. In that case, you can use fb:restricted-to tag. A list of ISO county codes can be found on iso.org website.

For example, if you wish to display special content to visitors from Australia, the code would be:

<fb:restricted-to location="au">
	Good day, mate!
</fb:restricted-to>

5. Add a google analytics to track your Facebook page

You can add google analytics with one line of code rather than having to copy and paste entire javascript snippet provided by google by using fb:google-analytics FBML tag.

<fb:google-analytics uacct="YOUR ID HERE" />

6. Add social apps such as Twitter, Linked In and Slideshare

There are quite a few social apps (or any other app for that matter) that you can add to your Facebook page. Just go to Apps Directory, view the app page and click on "Add to my Page" link on the left to add an app to your page. If you need to configure an app after adding it to your Facebook page, go to your Facebook page, click on Edit Page, click on Applications, and look for the app that you wish to configure from the list.

7. Embed a YouTube video

To embed a YouTube video into your custom tab, first, you need to get the ID of the YouTube video. In this case, it is dxzDU3tTzGA (because the url is http://www.youtube.com/watch?v=dxzDU3tTzGA) and add the following FBML code.

<fb:swf swfsrc="http://www.youtube.com/v/dxzDU3tTzGA" 
imgsrc="http://img.youtube.com/vi/dxzDU3tTzGA/default.jpg" 
width="520" height="415" />

* Remember to replace dxzDU3tTzGA with the ID of your YouTube video.

8. Display a random text

Sometimes, you might want to display a random text to keep things fresh. In that case, you can use fb:random tag. The optional "weight" attribute allows you to control the frequency of an option.

<fb:random>  
	<fb:random-option weight="2">A: This text appears twice as often as B.</fb:random-option>
	<fb:random-option weight="1">B: This text appears half as often as A.</fb:random-option>
</fb:random>

9. Display a random image

As with displaying a random text, displaying a random image is easily achieved by using fb:random tag.

<fb:random>
	<fb:random-option>
		<img src="http://www.facebook.com/hello.jpg" alt="Hello!" />
	</fb:random-option>
	<fb:random-option>
		<img src="http://www.facebook.com/aloha.jpg" alt="Aloha!"  />
	</fb:random-option>
	<fb:random-option>
		<img src="http://www.facebook.com/goodday.jpg" alt="G'day!"  />
	</fb:random-option>
</fb:random>

You can insert any piece of HTML code between <fb:random-option> tag so you can use it for so many other things - random links, videos, audios, and so on.

10. Bonus! Display different message for different browser

This FBML tag is probably rarely used but you can display different messsage or image depending on the browser that the user is using. The FBML in question is known as fb:user-agent.

For example, if you wish to display a special message for IE 6 users, you can do the following:

<fb:user-agent includes="ie 6">
	Hi!  It appears that you're currently using Internet Explorer 6.  Please upgrade your browser.  
</fb:user-agent>