In testing our "1st Facebook Application", error message are displayed initially and we have to change the "Render Method" from IFrame to FBML. So, it may be a good start to first discuss about the rendering method used in Facebook applications.

Why our apps can be seen as part of a standard Facebook page

First of all, let's take a look at the "Getting Started" section on official "Apps on Facebook.com" documentation to know more about how our apps can be displayed within a standard Facebook page.

With the information in the "Getting Started" section, you may get the impression that Facebook will first "obtain" the application page from the web server that hosts our app and send back to us. Well, this is not always the case.

Render Method - FBML vs IFrame

In simple terms, if we specify "IFrame" as the render method, Facebook will just send information back to our browser, saying that our app is within an IFrame and it should be loaded from the "Canvas Callback URL". It is our browser that make request to our web server (instead of Facebook's server) to load the application page.

The above approach and concept is simple. However, it becomes complicated when we want to obtain or display Facebook user related data in our app. Example includes the Facebook user's name (i.e. the name of the user running our application) and the list of the user's friends.

To streamline this, Facebook has developed the Facebook Markup Language (FBML). FBML can be treated as a set of tags (just like HTML tags) that helps us to display Facebook specific data and features. If we take a look at the index.php of our 1st Facebook app, there is a line :

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

This is a FMBL tag can be used to display the name of the Facebook user with uid equals to the login user (i.e. the user running our app).

To use FBML, we have to specify our app to use "FBML" render method. In "FBML" render method, when a user access our appl, our application page will be returned to Facebook server. Facebook server will then "interpret" the response (which contains FBML tags) and send the final HTML response back to our browser.

I hope with the above explanation (which has been in fact greatly simplified), you can get the basic concept of the difference between IFrame and FMBL render method (or it is usually referred by terms like IFrame Canvas Page and FBML canvas page).

To know more about IFrame and FBML canvas page, please read the official article "Choosing between an FBML or IFrame Application".
(Update on 26Nov10: this article is original located at http://wiki.developers.facebook.com/index.php/Choosing_between_an_FBML_or_IFrame_Application. However, facebook wiki is closed now. Also, there will be no more choice in the near future as Facebook will not support us to create new FBML app sometime in 4Q2010.)

 

However, please note the following extract from official documentation in Facebook:

"We don't recommend FBML for new developers. If you aren't already using FBML, you should instead implement your application within an iframe, using the JavaScript SDK and social plugins for client-side integration with Facebook services. The one exception: if you absolutely must create an application that runs as a tab in a user's Facebook profile, you will need to use FBML; tabs do not support iframes."

Having said that, I think it still worth to learn FBML (at least to get a basic understanding and know how to use it). It's easy to use and can greatly reduce our efforts in developing pages that displays Facebook specific features, such as display a user's profile picture, showing a multi-friend selectors and emulating the look of a wall environment etc.

We will talk about FBML later.