As mentioned before, FBML stands for "Facebook Markup Language". You can simply treat FBML as something similar to HTML, in which tags are used to describe what and how the text / information is be displayed in the browser.

Although it is mentioned in Facebook.com that they don't recommend FBML for new developers and suggest using the JavaScript SDK and social plugins, I think it still worth to learn it. It is probably the fastest way to have Facebook standard UI elements displayed in your application pages. Besides, JavaScript SDK is using XFBML to incorporate FBML in an iFrame app. So, knowledge of FBML is still required (unless you plan to your own codes to render Facebook-like UI elements).

Learning FBML

In the "Learning FBML" series, I am going to share with you my experience in using FBML. I am not going to write a full course on FBML, explaining every feature of it. Instead, I hope with information provided in these articles, you can grasp the basic concept of FBML and will be capable of exploring FBML on your own.

The official FBML documentation is here. In my own opinion, it is not that well-written as it lacks sample codes and pictures. Well, this is probably because I am not that familiar with Facebook's features and haven't got used to Facebook's style of documenting the developers' references.

 

FBML Used in Our 1st Facebook App

In our 1st Facebook App, we have already used FBML.

<fb:name uid=\"$user_id\" useyou=\"false\" />


In the above <fb:name> tag, by specifying $user_id (which represents the current user) as the parameter uid. When Facebook server processes the FBML canvas, this FBML tag will be rendered (by using HTML code) as the name of the current Facebook user. That's save us the effort to get the user name from Facebook. For details usage of the <fb:name> tag, you can refer to the official documentation here.

Notice that all FBML tags start with the prefix "fb:", so it is easy to identify.

 

Displaying Standard Facebook Dashboard Header - fb:dashboard

A standard Facebook dashboard header is shown below:

Facebook dashboard header

As according to the fb:dashboard tag documentation (which is also shown above), a dashboard can contain the following elements:

While it is common that the same dashboard will be used in all the application pages, it would be a good idea to externalise the code for generating the dashboard. This is done by creating a file called dashboard.php with the following code:

<?php

$theDashboard = <<<dash
<fb:dashboard>
<fb:action href="action1.php">Action 1</fb:action>
<fb:action href="action2.php">Action 2</fb:action>
<fb:help href="help.php">Help</fb:help>
<fb:create-button href="action3.php">Create Button</fb:create-button>
</fb:dashboard>
dash;

echo $theDashboard;

?>

To include the dashboard in your app, simply include dashboard.php before the code for displaying your application content. For example, the revised code for our 1st Facebook App will be:

include 'dashboard.php';

// Greet the currently logged-in user!
echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" />!</p>";

 

Displaying Standard Facebook Navigation Tabs - fb:tabs and fb:tab-item

For multiple pages application, you may want to add navigation tabs as shown below:

Facebook dashboard header

To display a navigation tabs, the <fb:tags> and <fb:tab-item> are used.

As for the dashboard, this is done by creating a file called tabs.php with the following code:

<?php

$theTabs = <<<tabs
<fb:tabs>
<fb:tab-item href="index.php" title='Welcome'/>
<fb:tab-item href="page1.php" title='Tab One'/>
<fb:tab-item href="page2.php" title='Tab Two'/>
<fb:tab-item href="about.php" title='About' align="right"/>
</fb:tabs>
tabs;

echo $theTabs;

?>

The revised code for our 1st Facebook App (as for displaying the above application page) is:

include 'dashboard.php';
include 'tabs.php';

// Greet the currently logged-in user!
echo "<p>Hello, <fb:name uid=\"$user_id\" useyou=\"false\" />!</p>";

 

We will talk about more FBML features later.