Last year, Facebook announced its plan to deprecate FBML as a Facebook page administration platform over time. This March, it followed up this statement with the announcement of a full transition to iFrames, phasing out FBML. Since March, page admins have not been able to create any new FBML apps, but apps which were already in existence remained functional until the deprecation was scheduled to begin. Facebook announced at f8 the official deprecation date of all FBML endpoints: June 1, 2012. This is the date when any remaining FBML modules inside of Facebook will cease to function. As the time has come to fully transition to iFrames and depart from the FBML standard completely, this tutorial will explain how to transition your Facebook pages to iFrames from FBML.
Background: How FBML and iFrame Apps Work
FBML
FBML is Facebook's legacy framework for serving custom content on canvas pages as well as tab pages. This content is effectively proxied by Facebook, which is to say that the user's browser never hits the app developer's server directly. Instead, Facebook requests the content from the app developer's server, parses and filters it, and returns it to the browser.
As part of this filter process, Facebook evaluates FBML tags that are used to personalize the content. The functionality of FBML tags ranges from simple tasks like displaying the user's name (fb:name) to rendering feeds or comment boxes, customizing content based on the user's age or country, whether they've liked the page, etc.
Static FBML App
The Static FBML app was an application provided by Facebook that enabled the easy creation of FBML based Facebook page tabs. To use the application, page admins simply added the app to their page, and then customize the content. Along with FBML, the Static FBML app will be deprecated on June 1, 2012.
iFrame Apps
iFrame Apps are Facebook’s accepted framework for serving content on canvas pages as well as tabs. Content is served directly by the application developer’s server, rather than being proxied by Facebook’s servers. Because the page is hosted externally of Facebook, it can render HTML, CSS and even Javascript just like any external web page does, which was not the same with FBML. This is a big improvement as developers now have more possibilities for building customized apps in a way which is more familiar than learning new systems (a prior necessity with FBML and FBJS.) iFrames are often used in conjunction with the Facebook Javascript SDK (http://developers.facebook.com/docs/reference/javascript/).
Wildfire iFrame App for Facebook Pages
Wildfire’s iFrames App for Pages is an app that allows Facebook brand page admins to easily create iFrame based Facebook page tabs. Content can be customized to display differently for fans and non-fans of the page. As a disclaimer, while there are similar third party apps in existence by other developers, the Wildfire iFrames App for Pages is among most popular free landing page tools, with over 7.6 million monthly active users.
Making the Transition
To understand how to transition existing FBML applications into iFrame apps, we need to look at ways page administrators have been using FBML to date, and suggest options for an easy transition:
Example scenarios of existing FBML use:
SCENARIO #1 - Static FBML app with static HTML content:
- To transition to iFrames, either build your own iFrame app, or use one of several third party apps that can be used to host your static content, such as Wildfire’s iFrames App for Pages.
SCENARIO #2 - Static FBML app with minimal FBML use for personalization purposes (Examples include using the fb:name tag to render the name of the user.):
- In extremely simple cases like this, you may be able to get away with using the Facebook Javascript SDK to retrieve the necessary data using the Graph API and write it to the DOM. See http://developers.facebook.com/docs/guides/web/ (“Personalization” section). Note that this will require authenticating the user first and prompting for basic permissions (http://developers.facebook.com/docs/authentication/), most simply using the FB JS SDK.
SCENARIO #3 - Static FBML app with conditional rendering based on the user’s demographics (age / country) or whether they “Like” the page:
- This could be transitioned using a similar client side JS SDK approach, but the downside is that both content variations would have to be included in the HTML source, so savvy users would be able to see the restricted content by viewing the source.
- A better approach is to handle this server side. The signed_request parameter includes demographic information as well as a flag that indicates whether the user “Likes” the current page, which can be used to select the appropriate content. More information about these parameters can be found within Facebook documentation here.
SCENARIO #4 - Static FBML app with complex FBML content:
- A transition will likely require implementing a custom iFrame app, or using one of the sophisticated third party page management applications, such as Wildfire’s Page Manager.
SCENARIO #5 - Custom FBML app:
- Implement a custom iFrame app.
Special note: Some FBML tags can be replaced with Facebook Social Plugins (http://developers.facebook.com/docs/plugins/), such as the Comments box.
Next Steps and Important Tips for your Custom iFrames App
Choosing to use a page management product like Wildfire’s Page Manager means you can skip all of the technically detailed setup process outlined throughout this post.
To deploy an iFrame app of your own, you will need to set up your own server. Developers can pick any web development stack they’re comfortable with (such as PHP, Ruby on Rails, Django, J2EE, or others), and are responsible for picking a hosting environment. Heroku provides a great solution for Facebook apps.
When writing your HTML, remember that the main character <div> is 520 pixels wide for optimal Facebook viewing on Facebook page tabs and full width for Facebook canvas.
To launch an iFrames app, you must first create the Facebook page as an app within Facebook. The setup of this app involves tying it to the external web address of the pages you're iFraming. This app will be run in both secure and non-secure browsing environments, and you will be able to set it up for equal accessibility within these developer settings as well.
After registering as a developer at http://developers.facebook.com, click to “Create new app.” When adjusting “Settings; Basic,” you will need to provide both Regular and Secure URLs. Note that starting October 1, 2011 all Facebook apps will need to support https, so you will need to obtain an SSL certificate and configure your server and application appropriately. With this setup, you’ll quickly be ready to add your newly created app to a fan page!
Now is the Time
Remember, now is the time to carefully comb the applications you’ve installed to your Facebook brand page over time to make sure none of them were built incorporating FBML modules or endpoints. On June 1, 2012 Facebook will flip the switch on FBML, and any applications or pages still employing the page management framework will go dark. The good news is, iFrames is an excellent alternative framework, allowing for greater developer flexibility and more creative programming options! For those that would prefer ready-made, easy to use, and FREE tools that require no technical skill to install, Wildfire’s got you covered.
