Facebook Markup Language - FBML

FBML, as mentioned previously, is the Facebook Markup Language. If you've used HTML in web pages, then you'll have no problem with FBML. Even if you've not used HTML ever, you'll still have no problems with FBML. It can be used to format your information just like HTML, but it also does a lot more than just formatting as we'll soon see, by looking at the FBML Test Console.

The FBML Test Console

We've already seen that we can learn how to use the Facebook API methods in the API Test Console, and we can do the same with FBML in the FBML Test Console. Just go to the Tools page as you did for the API Test Console, but this time click on the FBML Test Console tab:

In this console, we're mainly interested in two areas:

• The code entry box—this is the large box on the left-hand-side of the console
• The preview area on the top-right of the console

Next, we need some code to test:

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

You'll notice from the code that we can mix HTML (we've used <table> </table>, <tr> </tr> and <td> </td> to tabulate the information) with FBML (<fb:name> </fb:name> and <fb:profile-pic> </fb:profile-pic> to extract and display the Facebook data). If you put this into the code entry box and click Preview, then you'll see how your application would look:

Having seen how we can achieve an output using a mixture of HTML and FBML, it would be interesting to see how you can get much the same results even more easily, by using only FBML:

<fb:user-tab le cols="3">
<fb:user-item uid="614902533"/>
<fb:user-item uid="286603790"/>
<fb:user-item uid="505543152"/>
<fb:user-item uid="515482742"/>
<fb:user-item uid="517311956"/>
<fb:user-item uid="521240370"/>
</fb:user-table>

You can see from the code that we're able to use the FBML <fb:user-table> tag to create a table, and we've used the <fb:user-item> tag to obtain the information that we want from Facebook. The resulting application would look like this:

We've looked at the Facebook API and FBML, and learned how useful they can be. Now, we'll move on to the potentially most powerful element of the Facebook platform—FQL.