Introduction - What is XFBML?

In the first 2 series of the tutorials for using the Old PHP client library and the PHP SDK, we have been using FBML (Facebook Markup Language) for generating most of the UI element. Notice that in order to use FBML, the app has to be a canvas app with "FBML" set as the render method in the application settings.

While FBML requires server-side processing performed by the Facebook servers (which basically is to transform the FBML tag into corresponding HTML elements with pre-defined styles), it is not application for app developed on top of the JavaScript SDK (which run at the client end).

Hopefully, Facebook has brought to us the XFBML (extended FBML??). XFBML is a way for us to incorporate FBML into an HTML page on a Facebook Connect site or an iframe application. Well, strictly speaking, I would say an iframe app is an app that is hosted at our web server and users are accessing it via URL pointing to Facebook (i.e. http://apps.facebook.com/ourappname/) and our app pages with be embedded inside standard Facebook pages. What we are doing (i.e. allow users running Our 1st FB App (JS SDK) by accessing our server directly) is somehow closer to building a Facebook Connect site (Note: it seems to me that Facebook is fading out this term.)

 

Documentation on XFBML

There are always noises from the developers about Facebook's documentation and I think the documentation on XFBML is really badly written. While Facebook is deprecating the Developer Wiki and is moving all necessary content to http://developers.facebook.com/docs, I cannot find any references / documents there. The only documentation on XFBML I found is still in the Developer Wiki.
(Update note on 26Nov10: The XFBML doc is earlier located at http://wiki.developers.facebook.com/index.php/XFBML. However Facebook wiki is closed by. Let me know if you know where can we find the complete list of XFBML tags.)

While you read the document in the Developer Wiki, please note the followings:

So, never blindly trust the XFBML documentation!

 

Before Using XFBML

If you use XFBML in an HTML page, make sure you have include the xml namespace for "fb" in the HTML start tag as shown below:

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:fb="http://www.facebook.com/2008/fbml">

 

XFBML Used in Our 1st Facebook App (JS SDK)

Although we haven't really started migrating web app to use the JS SDK, we have already use XFBML tag already. The XFBML tag that we have used is the <fb:login-button> tag which create the "Facebook Login/Logout" button under our pager heading.

<h1>Learning FaceBook App Dev - Demo App (JS SDK)</h1>
<fb:login-button autologoutlink="true"></fb:login-button>

 

Migrating the FBML Tags for Displaying the "Friend List"

While the usage of XFBML tags are very similar to FBML tags, we should be able to apply our FBML knowledge in writing code using XFBML tags.

As example, we will migrate the FBML tags used to display the friend list to corresponding XFBML tag.

 

In the next tutorial, we will migrate the "My Friends" page of Our 1st FB App. We will probably come across other XFBML tags later.