« Replacing Fear with Passion in 2011 | Main | Why You Need to Take Action on DKIM »

February 18, 2011

Facebook's Switch from FBML to iFrames

Last week, Facebook announced that as of March 11, 2011, you will no longer be able to build new applications using static FBML. The "deprecation" of FBML (as Facebook calls it) is something that’s been planned for a long time.  And they’re not really getting rid of it, as much as they are repurposing it.

 

Originally the only way to build a Facebook page was to use the FBML language.  From a developer standpoint, this was a pain since it made it virtually impossible to easily modify an existing application which relied on HTML as the front end without a ton of effort, and creating in some cases two separate apps.  FBML is still around, for use in apps inside Facebook as well as on sites using the Facebook Connect library, but as a smaller subset of helper tags. 

 

These tags break down into some conditional tags (used for displaying content based on rules tested against the viewing user) and widgets. One example of this in action is this "suggest to friends" example of an FBML widget tag.  Instead of coding all that, the developer can just throw the tag for a suggest to friends widget, which Facebook will render when viewed by the user.

 

FBML-widgit

Even though apps are now being created as iFrames, this still comes with a handful of considerations and caveats.  The first is that it is not a true iFrame.  An iFrame really acts as a window to another site or app.  Facebook still needs to “pull in” the app to render specifically to fit Facebook's needs.  What this means is that certain HTML tags if used in the app will break the app in Facebook (I’m looking at you <body>). 

 

Additional rules to keep in mind are:

 

Images need to have CSS style display:block set so there is no padding around them in FireFox

 

CSS needs to be in a referenced file in order for the CSS to properly render in IE

 

JavaScript can’t be in a referenced file

 

JavaScript must be Facebook's flavor of JavaScript (FBJS)

 

Forms don’t get submitted into the iFrame so AJAX (FBJS style) must be employed

 

I hope this bit of insight into what these changes mean from a developer’s point of view has been useful. I'd love to hear your feedback or your experiences designing for Facebook. Leave a note in the comments!

 

Adam Keller, project engineer, e-Dialog

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a01156fd1e72e970b014e8623fcfe970d

Listed below are links to weblogs that reference Facebook's Switch from FBML to iFrames:


Comments

The comments to this entry are closed.


RSS
Twitter
Facebook
Popular Topics