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.

Here’s the PHP:

Exception Thrown: FacebookRestClientException

Code: 100, Message: Invalid parameter

You can also try FQL in this box. This is a nice place to start inserting different FQL queries to see what is getting returned in different formats.

Here is a quick sample of FQL that queries Facebook for a link to my profile picture:

SELECT pic

FROM user

WHERE uid = 7608123

You’ll notice the response format returns a single field in the <fql_query_response> element:

<?xml version="1.0" encoding="UTF-8"?>

<fql_query_response xmlns=http://api.facebook.com/1.0/

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" list="true">

<user>

<pic>http://profile.ak.facebook.com/profile5/1622/61/s7608007_3215.jpg</pic>

</user>

</fql_query_response>

Or, if you prefer to get your responses in JSON, here’s the code:

[{"pic":"http:\/\/profile.ak.facebook.com\/profile5\/1622\/61\/s7608007_3215.jpg"}]

For PHP, here’s the code:

Array

(

[0] => Array

(

[pic] =>

http://profile.ak.facebook.com/profile5/1622/61/s7608007_3215.jpg

)

)
These are all the responses from the same query, just in different response formats. What you’ll notice is that each of the formats returns the information in slightly different ways. The XML format is by far the most verbose and, depending on your environment, is something you might want to take into consideration as your calls to the Facebook platform become more complex. Let’s look at another FQL query:

SELECT first_name, last_name, hometown_location.state, status

FROM user

WHERE uid = 7608007

This query will return to you my first and last name, my hometown state, and the status message I set on my home page. This is a basic query that returns a rather straightforward structure.

JSON uses a slightly different syntax to express the same information:

{"error_code":100,

"error_msg":"Invalid parameter",

"request_args":[

{"key":"uids","value":""},

{"key":"fields","value":""},

{"key":"callback","value":""},

{"key":"app_id","value":"2227470867"},

{"key":"session_key","value":"c50b22639edc8d2d0dd29357 7608007"},

{"key":"v","value":"1.0"},

{"key":"format","value":"json"},

{"key":"method","value":"facebook.users.getInfo"},

{"key":"api_key","value":"0289b21f46b2ee642d5c42145df5489f"},

{"key":"call_id","value":"1186452905.8595"},

{"key":"sig","value":"b7e26b1f71aeffb448d26cdf89f32f6e"}

]

}

Here’s what the XML result looks like:
<?xml version="1.0" encoding="UTF-8"?>
<error_response xmlns="http://api.facebook.com/1.0/"    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd">
<error_code>100</error_code>
<error_msg>Invalid parameter</error_msg>
<request_args list="true">
<arg>
<key>uids</key>
<value/>
</arg>
<arg>
<key>fields
<value/>
</arg>
<arg>
<key>callback</key>
<value/>
</arg>
<arg>
<key>app_id</key>
<value>2227470867</value>
</arg>
<arg>
<key>session_key</key>
<value>c50b22639edc8d2d0dd29357-7608007</value>
</arg>
<arg>
<key>v</key>
<value>1.0</value>
</arg>
<arg>
<key>method</key>
<value>facebook.users.getInfo</value>
</arg>
<arg>
<key>api_key</key>
<value>0289b21f46b2ee642d5c42145df5489f</value>
</arg>
<arg>
<key>call_id</key> <value>1186452883.4263</value> </arg> <arg> <key>sig</key>
<value>28186e1be6ee4015119a992b638b694a</value>
</arg>
</request_args>
</error_response>

When you first arrive at the Tools page, you are presented with two tabs. The API tab has many of the API calls available to you so you can see what kind of data is being returned. I find it useful in my day-to-day programming to be able to see the data I expect to have returned in order to speed development.

let’s take a look at a simple call to return a list of your friends. Simply select the friends.get option for the Method field. This will return an XML structure with a root element of <friends_get_response>. You’ll also notice a couple of XML namespaces and a location for the schema. If you run into issues with the responses, remember how you’re getting them. If it’s XML, you might need to deal with the root XML attributes.

The Facebook API Test Console as shown in the figure is a great place to click around and see what different calls will return. Not only can you switch between the different API calls, but you can also change response formats to see what you will get when you change the Response Format field. As you experiment with the different calls, you’ll notice that some requests require additional fields. And, if you don’t fill out the required fields, Facebook will return error codes in the different response formats.

Facebook provides three important tools for learning and debugging Facebook applications in the Tools section of its Developers web site (http://developer.facebook.com/tools.php): the API Test Console, the FBML Test Console, and the Feed Preview Console. Because it’s good to have immediate feedback with your code and because it’s sometimes difficult to debug coding issues and determine whether the problem exists on your end.

In the Facebook Developer application (http://www.facebook.com/developers), click the Set Up New Application button, as shown in Figure.

The only required fields are the application name and the one confirming you have read the terms of service. However, to really do anything with an application, you will need to fill out the optional fields. It’s important to remember that you can’t use the word “face” anywhere in your application name. Because of this prohibition, you are precluded from using words such as surface and faceted as part of your application name.
In the optional fields, you can fill out more information about how your application works as shown in the figure. Perhaps the most perplexing field here is the Callback URL field. This is the field that handles your actual application and lives in the server environment you’ve set up. For example, if you have a web site for your application at http://dummy.domain.com/facebookApp, this would be your callback URL.

The following are the optional fields:

• Support E-mail: This is the e-mail contact for support questions for your application.
• Callback URL: This is the URL of your actual application on your server. If you’ve set up an application on your server at http://dummy.domain.com/facebookApp, that is your callback URL (you’ll sometimes see this referred to as the callback metaphor).
• Canvas Page URL: This is the Facebook URL to your application.
• Application Type: Most likely this will be Website, but if you’re developing an application in Java (using the official client library) or one of the unofficial libraries that won’t be accessed primarily on the Web, select Desktop.
• IP Addresses of Servers Making Requests: This is a comma-separated list of servers able to make requests. If you need to lock down your application to a list of servers, this is where you add that information. Requests from other servers are then rejected. If you use this with an online application, the users will be presented with a fatal error in the response stating that an “Unauthorized source IP address” was used to access the application.
• Can your application be added on Facebook?: An answer of Yes to this question will allow people to add the application to their account. If you select No, users will be able to use the application but won’t be able to add it to their accounts.
• TOS URL: This is the URL to the terms of service for your application. If you use this, users must accept the terms of service before they can use your application.
• Developers: Your name should appear in this field by default. If you’re working with others to develop your application, put their names too.

Because you host your own application, it’s a good idea to go over how Facebook applications actually work. Essentially, Facebook provides your application to users when it is requested through Facebook.
As you can see in the Figure, each time a Facebook user interacts with your application, you set off a series of server interactions with the Facebook server farm and your server. Each time a user requests something from your application through Facebook, that request is passed to your server to create the initial REST call to the Facebook API. Once your server has received the response (in the format you have requested), you server then passes the response to construct a display call (in FBML) and passes that back to the Facebook server. Facebook processes this information and creates an HTML response to the user. Because of the constant passing of information between servers, there is an additional level of complexity that can complicate tracking down bugs. You also need to consider this constant interaction when developing your application because you don’t want to make unnecessary API calls that will slow down your application.

Below figure shows the Basic Facebook architecture:

Once you have an account and have set up a server environment, the next step is to add Facebook’s Developer application. Go to http://www.facebook.com/developers, and install the application.

Figure shows the screen that users are presented with when installing a new application. The check boxes allow certain functionality to be performed by the application, and they give users the ability to turn certain aspects of the application on and off. Once you have read the platform application’s terms of use, just click the Add Developer button to install the Developer application.
Once you’ve installed Developer, you are directed to a Facebook application that helps you manage the applications you are developing, including the most recent entries on the discussion board, news about the Facebook platform, links to your application management interface, and information on the status of the platform.

It’s important to keep up-to-date with the platform status because Facebook is adding information about new tags, changes to the terms of service (typically clarifying hazy areas), systemwide outages, and, perhaps most important, platform changes that have the potential to break your application. Like with most things in Facebook, you can subscribe to an RSS feed to help you keep up-to-date with these changes (http://www.facebook.com/feeds/api_messages.php).

Since you host your own Facebook application, there is some setup you need to do on your web space. If you don’t have a web site (or access to one) that runs PHP, Java, or one of the unsupported languages with a client library, you can use one of the free web hosts available. You will need a middleware application server to handle the business logic for your application because Facebook provides methods only for retrieving data and displaying certain information. I’ll be using PHP for the examples, but they should be relatively straightforward to translate into other languages.
You can download the client libraries for all languages from http://developer.facebook.com/resources.php. If you’re using a *nix system (including OS X), you can simply do the following:

wget http://developers.facebook.com/clientlibs/facebook-platform.tar.gz

tar zxvf facebook-platform.tar.gz

mv facebook-platform <path_to_web_location>

The previous code moves both the PHP 4 and PHP 5 libraries (along with the Footprints sample application). The PHP 4 library is in the folder php4client, and the PHP 5 library is in the client folder. Most likely you will be working with one library or the other, so you really need to move only one of the folders to your server to work on your application.

If you’re new to Facebook (or even if you’ve been using it for a while), it’s useful to understand how Facebook names the elements in its layout. Facebook utilizes both two and three column layouts for different parts of its site with a header and footer containing global links. Except for the header and footer, users can edit their content layout. This is an important design consideration, because depending on where your content is loaded on a user’s page; you need to take into account different widths.

On the far left of all pages, users have access to the different applications they have installed in the navigation bar. By default, there are only four applications as shown in the figure, so, depending on how many applications your user has, your application might not appear in their navigation bar. Obviously, if you’re designing an application, you want the Facebook user to not only add the application and use it but to also have it in a convenient location on their Facebook pages.

Setting up a Facebook account is a simple process. If you don’t already have one, don’t worry; it’s free, and anyone can sign up to use Facebook. Just point your browser to http://www.facebook.com/ and fill the fourm with your name, email ID, password and birthday then click the Sign Up button as shown in the below figure.

The form asks a few simple questions about you and will send you a confirmation e-mail to verify your e-mail address. After you confirm your account, you have the opportunity to join a network. These networks are grouped by academic institutions, locations, and businesses and are at the core of Facebook’s social structure’s organization. Once you join a network, you are able to access information about the people in that network.

The Facebook platform provides many tools to access information, but you are responsible for providing your own business logic through some other language. Facebook facilitates this through “official” client libraries for both PHP and Java that provide convenient methods to access the Facebook application. To help the rest of the programmers who want to develop their own Facebook application, client libraries are available for the following languages.

1. ActionScript
2. ASP.NET
3. ASP (VBScript)
4. ColdFusion
5. C++
6. C#
7. D
8. Emacs Lisp
9. Lisp
10. Perl
11. PHP (4 and 5)
12. Python
13. Ruby
14. VB .NET
15. Windows Mobile

This complement of languages should take care of just about most developers today. And although these client libraries are not “officially” supported by Facebook (meaning they won’t answer your questions about using them), they are posted by the company with at least some tacit approval of being the “officially unofficial” client libraries.

To distinguish between HTML and Facebook commands, we prefix the tags with fb: By using the FBML tag set, Facebook abstracts a lot of complex code and makes many of the routine procedures almost effortless. For example, to add a link to your applications help pages on your dashboard (the navigational tabs that go across the top), you simply need to add the following lines:

<fb:dashboard>

  <fb:help href="help.php">Application Help</fb:help>

</fb:dashboard>

The Facebook platform consists of five components: a markup language derived from HTML (Facebook Markup Language), a REST API for handling communication between Facebook and your application, a SQL-style language for interacting with Facebook data (Facebook Query Language), a scripting language (Facebook JavaScript), and a set of client libraries for different programming languages.

In 2003, eUniverse launched a new social portal called MySpace. This web site became wildly popular very quickly, reaching the 20-million-user mark within a year. Just a year earlier, a bright young programmer named Mark Zuckerberg matriculated at Harvard University. The year in which MySpace launched, Zuckerberg and his friend Adam D’Angelo launched a new media player, called Synapse, that featured the Brain feature. Synapse’s Brain technology created playlists from your library by picking music that you like more than music than you don’t. Although this type of smart playlist generation is common in today’s media players, at its launch, it was an innovation. Synapse’s launch was met with positive reviews, and several companies showed interest in purchasing the software; however, ultimately no deals were made, and the media player never took off. Unfortunately (or fortunately, depending on your perspective), one of Zuckerman’s next projects created quite a bit more controversy. He created Facemash.com, a variant of the HOTorNOT.com web site for Harvard students. To acquire images for the web site, Zuckerberg harvested images of students from the many residence hall web sites at Harvard. Because Zuckerberg was running a for-profit web site and had not obtained students’ permission to use their images, Zuckerberg was brought before the university’s administrative board on charges of breaching computer security and violating Internet privacy and intellectual property policies. Zuckerberg took a leave of absence from Harvard after the controversy and then relaunched his site as a social application for Harvard students in 2004. The viral nature of the web site allowed it to grow quickly, and a year later Zuckerberg officially withdrew from Harvard to concentrate his efforts on developing what was first known as thefacebook.com.

Relaunched as Facebook in 2005, the social network quickly expanded to the rest of the Ivy League. Soon after, Facebook expanded dramatically across university and college campuses across the nation. Facebook’s focus on the college and university demographic helped catapult it into what any marketing manager will tell you is the most difficult demographic to crack, the 18–24 young adult market.

To keep its growing momentum, Facebook opened its doors to nonacademic users for the first time in 2007. Since this time, Facebook has grown to be the second largest social network with more than 30 million users. And with any growth comes opportunities both for the company and for its users.

Facebook (http://www.facebook.com/) has grown drastically over the past several years, it is the second largest social web site on the Internet. The creators of Facebook have done an impressive job focusing on the social network. Facebook recently extended its network by developing a platform for developers to create new applications for Facebook, users can now interact in new and exciting ways with the face book.
About Facebook?
In 2007, Facebook launched its own platform for application development. The platform consists of an HTML-based markup language called Facebook Markup Language (FBML), an application programming interface (API) for making representational state transfer (REST) calls to Facebook, a SQL-styled query language for interacting with Facebook called Facebook Query Language (FQL), a scripting language called Facebook JavaScript for enriching the user experience, and a set of client programming libraries. Generically, the tools that make up the Facebook platform are loosely called the Facebook API.
By releasing this platform, Facebook built a platform that allows developers to create external applications to empower Facebook users to interact with one another in new and exciting ways that we, as a developer, get to invent and discover new applications. Not only we can develop web applications, but Facebook has also opened up its platform to Internet-connected desktop applications with its Java client library. By opening this platform up to both web-based and desktop applications and offering to general users the same technology that Facebook developers use to build applications, Facebook is positioning itself to be a major player in the future of socio-technical development wizard.