FBML Tab

The Facebook Markup Language is a powerful set of tags that abstracts some rather complex code. Although Facebook will remove JavaScript you put into your code, it does allow you, through FBML markup, to use certain types of JavaScript code. There are two ways to do this. You can use the MockAjax framework, which you’ll find does much of the JavaScripting you need to do, or you can use Facebook JavaScript (FBJS) to let you do more advanced scripting.

In 2005, a “clever” MySpace user figured out how to force people to become his friend by exploiting a hole in their code. Leveraging this vulnerability, the user launched a cross-site scripting (XSS) attack where he was able to add more than 1 million people as friends in the course of a 24-hour period. Because of this type of attack, Facebook restricts the JavaScript available to application developers.

FBML is a superset of HTML, utilizing many of the HTML tags but also adding its own special sauce to allow you to do some rather fun things. To test some of the features you might be considering before you deploy, it’s a good idea to see how your code renders when pushed through the Facebook platform.

Again, you can access this tool at http://developer.facebook.com/tools.php and click FBML Test Console. Once there, you’ll notice a slightly busier interface than the API Test Console as shown in the figure.

The large panel on the left is where you can type (or paste) your HTML and FBML code and look at the differences in the output (displayed on the right side) for the different positions that you can place your display (narrow, wide, canvas, e-mail, notification, feed title, and feed body). Let’s take a look at a couple of simple examples.

First, making the dashboard navigation bar for the top of your application with a set of buttons is a simple task in FBML, as shown by this example from Facebook:

<fb:dashboard>

<fb:action href="http://apps.facebook.com/<your_facebook_app>/id=1234567"> My Book Reviews

</fb:action>

<fb:action href="http://apps.facebook.com/<your_facebook_app>/new.php"> Write a New Review

</fb:action>

<fb:help href="http://apps.facebook.com/<your_facebook_app>/help.php"

title="Need help">

Help

</fb:help>

<fb:create-button href="http://apps.facebook.com/<your_facebook_app>/new.php">

Write a New Review

</fb:create-button>

</fb:dashboard>

With these few lines of code, you get the output as shown in the figure

The <fb:dashboard> tag tells the Facebook platform to consider this a dashboard for the wide panel since this is the default for testing. The <fb:action> tags create the two pipe-delimited anchors for “My Book Reviews” and “Write a New Review.” The <fb:help> tag creates the reference to the help documentation, and the <fb:create-button> tag creates the Write a New Review button. You will notice there’s some more text here (“Facebook FBML Test Console Sample App”), which Facebook places to help you see what else would be in the “real” application.

You’ll also notice that there is some verbose output in the HTML output box. This box illustrates what Facebook translates your FBML input to be for browsers:

<div class="dashboard_header">

<div class="dh_links clearfix">

<div class="dh_actions">

<a href="http://apps.facebook.com/<your_facebook_app>/?id=1234567">

My Book Reviews

</a>

<span class="pipe"></span>

<a href="http://apps.facebook.com/<your_facebook_app>/?new.php">

Write a New Review

</a>

</div>

<div class="dh_help">

<a href=" http://apps.facebook.com/<your_facebook_app>/?help.php">

Help

</a>

</div>

</div>

<div class="dh_titlebar clearfix">

<h2 style="background-image: url('http://static.ak.facebook.com/images/icons/hidden.gif?12:27651')">

Facebook FBML Test Console Sample App

</h2>

<div class="dh_new_media_shell">

<a href=" http://apps.facebook.com/<your_facebook_app>/?new.php" class="dh_new_media">

<div class="tr">

<div class="bl">

<div class="br">

<span>Write a New Review</span>

</div>

</div>

</div>

</a>

</div>

</div>

</div>

Facebook does a lot behind the scenes to process your application, and it’s a good idea to get acquainted with these tools to see what will work (and what won’t) before you deploy your application.