I promised to write up my experiences developing Virtual Microbes, a Facebook application. Its a lot to get through so I've decided to split it up in to installments. This installment is a lightning tour of the components in a Facebook application.

Facebook applications are basically content served up by any http server and seamlessly presented to users within Facebook pages. There are two ways this is done; either with an iframe tag or with Facebook Markup Language (FBML), which is basically HTML with additional tags to access Facebook features. Using an iframe may be the simplest option because you can just serve pages in the way you would with any web application, but FBML offers some additional capabilities that you wouldn't otherwise be able to take advantage of.

FBML

When the user requests a page within your application, the Facebook server maps the url on to a corresponding url on your server, retrieves the FBML, converts it to HTML, then inserts the content in to the Facebook page. Of course, its all transparent to the end user, who doesn't know and probably doesn't care where the content is coming from. FBML supports a large subset of HTML tags, and also CSS, so you can format and style pages as normal. The additional tags are used to insert content, such as user details / photos and various widgets within your content. For instance the <fb:name uid="12345"/> tag would insert the name of the Facebook user with the user id 12345.

FBJS

FBML supports FBJS, which is basically a slightly crippled form of Javascript which is re-written by the Facebook server to create a sandbox that prevents conflicts with Facebook's own JS code, HTML and CSS. It also cripples some Javascript features so that your code can only run in response to active events initiated by the user, such as clicks -- but not to events that the user hasn't directly caused. I guess Facebook do this to avoid annoying the user with impolite Javascript code, but it does mean you will probably have to modify your coding style to compensate. Simple code should work as you would expect it to, but you will probably find that your code breaks if you refer directly to nodes in the DOM, which contains IDs that are different from the originals in your FBML. For instance if you use getElementById to get an explicit element, it is unlikely to work.

Facebook API

In addition to FBML, Facebook also offers a web service that you can use to retrieve information regarding users and access various site features. For example, you can ask Facebook for a list of a users friends, send out notifications and emails, set FBML to be displayed in a users profile page and do various other site related tasks. You send the details of the API method you want to call and the server returns a response in XML or JSON.

FBQL

You can retrieve a lot of information with the Facebook API, but occasionally you may need to make more complex queries on the various pieces of information stored regarding users. Naturally Facebook doesn't want to give application developers the ability to drop or modify tables, so Facebook offers a cut down version of SQL that you can access via an API call. You can only SELECT with FBQL and there are restrictions regarding the columns you can use in the WHERE clause. For instance to query the user table, you must know either the users id or their name. I guess this is to prevent people from sucking down their entire database. But it does appear that if you know a users name you can retrieve a lot of information about them, that you wouldn't be able to access through the site itself. And you don't need to be an application developer either, you can user the test console to enter a query and retrieve the results. This feels like a privacy concern, but I guess applications couldn't add much value without this kind of information.

That covers the basics components involved in writing a Facebook application, in the next exciting installment of this post series, I'll cover how to write a Facebook application with a Python web framework.