Recently I have played a little bit with the Facebook platform and Facebook application development. My aim was not to become Facebook expert, I just wanted to see what they have to offer and how quickly I can assemble a simple Facebook application.

Facebook platform contains several key components:

Interface (API) is the set of methods which you can use to access user data, friends lists, groups, photos etc. There are also data methods in beta which allows you to use Facebook as storage for your applications. Basically, you access API through REST interface, but you should download and use existing Facebook client libraries. Client libraries exists for all popular web programming languages. So instead of building REST request, sending it to the Facebook server and receiving and parsing the results, you will just call the predefined method from the Facebook library (php example: $facebook->api_client->friends_list) and you will get the results in array or some other data type, depending of method you have just called.

FBML is the Facebook extension of the XHTML which allows you to put standard Facebook components on your application canvas.

FBJS is the Facebook Javascript. Although regular Javascript will usually work, Facebook developed some extended Javascript objects and methods which help your application to be executed in its own name space among other Facebook apps.

FQL is Facebook query language. As far as I have seen, you can obtain similar data with FQL like you can with the API, but in this case you use SQL syntax to retrieve friends list and other stuff.

Getting started

After you check the anatomy of Facebook applications it is the best practice to start your own hello world application by following the step by step guide. Very soon you will have your own Hello World application and after you have learned basic stuff it is up to you to upgrade your application and build anything you want on top of it.

In brief, your application is hosted on your web site and hosting. You put your application in, for example http://yourdomain.com/myfacebookapp/ and that will be your „callback URL“. Any access to the http://apps.facebook.com/yourappname/somepage.php will cause Facebook to fetch the page from http://yourdomain.com/myfacebookapp/somepage.php and display the script’s output inside your application canvas. Of course, Facebook will not just display the output as-is. It will first transform your FMBL in regular XHTML by replacing FMBL tags with HTML elements with appropriate css class names. Application will be put in its own name space, for example your <div id=’header’> will become <div id=’app688273534_header’>. Similar thing will happen with Javascript (FBJS) and styles that reference that element using it’s id. For example #header {color: #c0c0c0;} will become #app688273534_header {color: #c0c0c0;} Oh, and by the way, you can’t link your external css files, you have to embed styles with <style> tag inside your FMBL page.

First impressions

Building Facebook apps is not a rocket science. Basically you just build web pages as usual but you use some additional FMBL elements. At least that was the idea. Unfortunately, you will not find FMBL elements for some common Facebook components that you can see in Facebook apps, so you will be forced to create your own divs and spans and assign Facebook css classes or even create your own css classes in Facebook style to get Facebook look and feel. On the other hand, some existing FMBL elements are not customizable enough, and again, you will have to create your own HTML to imitate look & feel of Facebook apps.

For example, this code will produce the common header menu for your application.

<fb:dashboard>
<fb:action href="new.php">Create a new photo album</fb:action>
<fb:action href="you.php">Photos of You</fb:action>
</fb:dashboard>

As you can see, it will also include your application name. Lets say that you don’t want your application name to be displayed here, you want to put your content just below the menu or you want to put your logo instead of name, you can’t do that because <fb:dashboard> will by default print your application name and you only have the property to turn application icon on or off on the left side of your application name. Anyway, you will have to make your own header menu without using <fb:dashboard> to avoid application name appearance.

I hope that Facebook will make lots of this fb elements more customizable and that they will offer even more elements, some of them are already in betas. Since I’m not the only one that thinks that the list of fb elements should be expanded, there is a place where you can suggest and request new fbml elements.