Facebook ActionScript API - Overall Architecture

The last few posts talked about setting up your Facebook app and Flex e nvironment, now let's look at how all the pieces fit together. There are several ways to call the Facebook API via Flex, but we're going to focus on creating an IFrame application. There are other ways to interact with Facebook, like as an FBML application, or even as a desktop AIR application Documentation of each type of interaction is available here. Here is the official diagram from Adobe on the architecture of a Flex IFrame app




I personally didn't Grok how it all fit together when I saw this diagram, so after I finished my first app, I whiteboarded this diagram.




1 - Your app. The url is http://apps.facebook.com/[your application name] . When this page appears in a web browser, the page contains an IFrame that references a URL on your web server.
2 - Your Facebook application settings point to your website. Facebook posts all required variables over the querystring into your containing HTML page, as well as reposting any other querystring vars, including any variable you may want to pass in.
3 - The index.htm file supplied from Adobe creates an array of all querystring variables passed into the page, and using the standard swfobject.js file, injects all variables into your .swf. I have usually had to tweak the code of this page to include/refine my personal application variables.
4 - Now your .swf is displayed within the IFrame on your Facebook application page, having evaluated all Facebook variables, as well as your own custom application variables.

Next post, we'll talk about some even easier ways to integrate a Flex/Flash app with Facebook, and talk about some best practices.