Understanding the architecture of applications built on the Facebook and Flash Platforms

iFrame Facebook application

When a user requests an application on Facebook (for example, http://apps.facebook.com/someapp), how the Facebook server deals with the request depends upon whether it is an iFrame or FBML appliction. If it is an iFrame application, the Facebook server returns a Facebook web page with the Facebook chrome that contains an iFrame into which your application will be loaded (see Figure 1).

Figure 1. Architecture of an iFrame application

1. The user requests your application while on the Facebook website; the browser makes an HTTP request to the Facebook server.
2. The Facebook server returns an HTML/JavaScript (JS) page containing the Facebook website chrome and an iFrame HTML tag.
3. The user's browser makes a request to your server for the page to display inside the iFrame. This is usually an application server page (for example, PHP, ColdFusion, or JSP). Session info is sent with the request as GET URL variables so your application server page knows that the request is coming from Facebook and what user is making the request.
4. The application server page is executed, making any calls to databases or other servers as needed, including calls to the Facebook server using its REST API. API calls must include authentication info, which includes the application API key that was assigned when you registered the application on Facebook, and a signature for the call, which is created from the arguments you want to send to the Facebook method and an MD5 hash of the session key (assigned when the user requests your application), the application secret key, and various other information. Typically, server-side pages use a library of code for making calls to Facebook and this signature is created in your server-side script. Although Facebook only officially supports one server-side client library (for PHP 5), other application server libraries have been developed by the community. (Facebook also officially supports two client-side libraries: for JavaScript and now ActionScript 3.0.)
5. The Facebook server returns requested data to your server as XML- or JSON-formatted data.
6. Your server returns an HTML/JS page to the user's browser that is displayed in the iFrame.

As the user interacts with your application, several things may occur:

• If your application contains links to new server-side pages, steps 3–6 are repeated.
• Alternatively, your application may contain asynchronous JavaScript calls to your server. In this case, steps 7–10 are executed with the only difference being that XML or JSON is typically returned to the user's browser to be processed by the page's JavaScript.
• Another option is for the JavaScript code in your page to directly make calls to the Facebook server instead of having to go through your application server (steps 11–12). Facebook also has an officially supported JavaScript library for making calls to the API. You can queue up a sequence of individual API calls, grouping them into a single HTTP request to the Facebook server. This technique has benefits and drawbacks; it reduces the overall number of separate HTTP requests being made, but requires combining more of the application's view and login in the client-side code resulting in larger and more complicated web pages.

Note: You can also use XFBML which lets you place simple FBML tags (discussed in the next section) in your application; to use these tags, you must add some JavaScript to scan the DOM for the tags and then batch the API requests into a call to the Facebook server.

Page 2 of 7

Previous Page

Next Page