What this post covers

• FBML – The Basics
• Adding Applications (For first time admins)
• Static FBML Widget
• Adding Your FBML Box or Tab to Your Page
• FBML Examples
• FBML Test Console
• Creating Custom Tabs
• Removing Tabs
• Facebook Page Examples

FBML – The Basics
A bit of history -  First came FQL (Facebook Query Language) which evolved into the Facebook API. Then in 2007  Facebook launched their Platform in order to complement their API, which uses FBML(Facebook Markup Language), similar to HTML, it allows you to write browser interrupted code to render elements on a Facebook page or application. For example, we can embed FLV’s or SWF’s, insert images, retrieve or send data, etc., essentially creating widgets.

The only downside is that these widgets can only be used on Facebook!

Before we get into some basic code snippets, I should mention Jesse Farmer’s post An Introduction to FBML, he does a really good job of breaking down the theory, plus he has included some really good code examples to help you get started. You should also check out the Facebook Developers Wiki.

Top

Adding Applications
The following is mostly for new admins. If you know this stuff you can skip to the juicy content below.

By default when you create a Facebook page there is a set of standard applications that come with it; Discussion Boards, Events, Links, Notes, Photos, and Video. However, we can add to this set by browsing some of the other applications that exist. These applications are similarity, but not exactly the same as the ones you would add on your personal profile. Typically we are looking at business applications like RSS Grafitti, Slideshare, flickr, YouTube Box, FlashEmbed, and most importantly Static FBML.

To add an application to your page click on “edit page” (link is under your profile pic when logged in) and at the very bottom there is a “More Applications” option. Click on the pencil icon and choose “Browse More”. This will take you the central Facebook apps page.

I recommend using the search, for example enter “Static FBML” (no quotes). Once you have found an application you want/need got to the application page and click on “add application to my page” and follow the on screen steps. Go back to you Facebook page and under “edit page” you will find your new application ready to go.

Top

Static FBML Box (Basically a widget)
For starters you will need to install the Static FBML application mentioned above. The nice thing about this widget is you can write HTML in it. So, for example if you want to load some graphics like banners, logos, etc., you can use <img src”">. You can also link these images with <a href=”"> and so on. You cannot run JavaScript ONLY basic CSS/HTML!

Top

Adding Your FBML Box or Tab to Your Page

• In “edit page” find the “Static FBML” link, click on the pencil icon and select “edit”
• Enter the name you want to appear in the box heading in the “Box Title” field
• Enter the HTML content in the “FBML” field
• When you’ve added in your HTML — click “Save Changes” and view your page to see the results.

Unfortunately there is no preview option.

*A few tips on dimensions – If you want your FBML box to appear in the left column of your Wall, set the width to 180px and/or if you want it to appear in the tabs in the main Wall column, set the width to 600px  width or less.

Top

FBML Examples
Here is an example of a page I am working on (not published yet).This FBML box is on the left column. All I have done is called an image and linked it to a Twitter profile using standard HTML.

Let’s take a look at some FBML. Here is some simple code to embed a swf in the Static FBML box (this is if you wanted to do something like the Apple Students page “On Campus” tab). To do this I used the fb:swf tag which allows me to render a SWF object. Notice I also load an image file, this is because an image will appear first, when the user clicks on the image, it turns into the SWF object. We can do the same thing with an FLV.

<fb:swf
swfbgcolor="ffffff"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.yourdomain.com/mymovie.swf'
imgsrc='http://www.yourdomain.com/myimage.jpg'
width=600' height='450' />

and to load an flv…

<fb:flv
src='http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv'
width='400' height='300' title='my movie' color='#FFBB00' salign='r'
img='http://www.example.com/test.jpg' scale='showall'/>

and just for fun, here is how you load an mp3

<fb:mp3 src="http://host.com/file.mp3" title="Song Name" artist="Song Artist" album="Album Name"/>

Top

The FBML Test Console
Now that we have covered some of the basics let’s take a look at the  Facebook Developer Tools. You may not be aware that Facebook offers a bunch of free online developer tools to help you learn, test, and eventually deploy your apps. For this example I will go through some basic FBML embedded in HTML.

Using the  FBML Test Console we can input our code and get a Facebook Box preview. The FBML Test Console will also output the HTML source if you need to embed it elsewhere.

How it all works

• Log into to Facebook
• Got to Facebook Developer Tools
• Click on the FBML Test Console Tab
• You will notice that the tool will automatically retrieve your user ID and API Key
• Input code in the left box
• Click on “Preview”

*Notice the Position dropdown menu, here you can choose from standard Facebook layouts like feed body, request form, etc.

In this example I am using some test code I found online(can’t remember where), to retrieve user profile pic and name. I create a basic HTML table and embed the fb:profile-pic and fb:name tag in adjacent cells. For the fb:name tag I use 3 attributes, useyou=false, uid=(whatever user ID you want to retrieve), and firstnameonly=true(in the last cell I change it to false). For the fb:profile-pic I use 1 attribute uid=(whatever user ID you want to retrieve).

Here is the code I inputted (remember to change the uid=xxxxxx to an actual user Id)

<table cellpadding=0 cellspacing=0><tr><td>
<table cellpadding=0 cellspacing=0>
<tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td><td>
<table cellpadding=0 cellspacing=0><tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td><td>
<table cellpadding=0 cellspacing=0><tr><td>
<fb:profile-pic uid=xxxxxx></fb:profile-pic> </td></tr>
<tr><td>
<fb:name useyou=false uid=xxxxxx firstnameonly=true></fb:name>
</td></tr></table>
</td></tr></table>

This is what it outputs

Once you have a basic understanding of FBML you will find this tool very useful for testing code and playing around. You may also want to check out this great post at devtacular on How to Style an Application Like Facebook this post includes a complete Facebook Component Stylesheet!

Top

Creating Custom Tabs
It is important to create custom tabs that represent your page/brand beyond the basic Wall, Info, Photos, Events, etc.  Most successful pages use custom tabs to sell their products or services, watch demos and presentations, enter contests and so on. A good example is the Apple Students Page, they have a tab called On Campus which launches a really slick Flash app with videos, a google map mashup, and some ads.

The other bonus of custom tabs is the ability to set it as the default landing page. In your page settings you can choose which tab is set as the default, most people just use the Wall. A good example is the Nokia Page, which defaults to Nokia Twist-USA.

How do I create a custom tab? Easy! First you need to make sure you have added the FBML Application to your page. Without it you can’t create any custom widgets to display as tabs(you can also use these steps to add any of the default applications as a tab).

Click on “edit page” (link is under your profile pic when logged in) and under Applications click on the pencil icon on the top right corner of the application you want to add as a tab.

Click on “Applications Settings”.

You will be giving 2 options, add/remove from Boxes and add/remove from Tab. Click “add”. Now go back to your page and refresh and you new tab should be there.

Top

Removing Tabs
Removing tabs take only a few seconds.

Click on any of your tabs. When that page loads you will notice the tab is white and a pencil icon appears next to the tab name. Click on the pencil icon.

Click on “Delete Tab”. Told you it was easy!

The only tabs you cannot delete are Wall and Info.

*A quick tip about the Boxes tab – You can remove the boxes but not in the same way as others. To remove the boxes tab first you need to click on Boxes. When the page loads remove each box that is under this tab (the same steps as above). Once there are no boxes left under the Boxes tab go back to your wall. The Boxes tab should be gone, if not refresh a few times. Essentially this tab only exists if there is something in it!

Top

Here’s a list of some really nice examples
http://www.facebook.com/officelive
http://www.facebook.com/applestudents
http://www.facebook.com/livescribe
http://www.facebook.com/nokia
http://www.facebook.com/Starbucks
http://www.facebook.com/adidasoriginals
http://www.facebook.com/Paramount