Choosing Between an FBML or IFrame

One of the strategic decisions that you need to make when you create your Facebook application is deciding whether to use FBML or an IFrame for your canvas page. The issue is more than just an implementation detail. In fact, it gets to the heart of the goals for your application.

FBML embraces the Facebook Platform and enables your application to become part of Facebook itself. IFrames, on the other hand, enable your Web application to function inside Facebook without coding an interface that works only inside a single context (Facebook).

The reasons for using FBML include the following:

  1. Has a consistent look and feel. When you use FBML, your application styles and controls automatically take on a Facebook look and feel, making it look identical to other Facebook apps. This consistency reduces the learning curve for your users and gives them instant familiarity and comfort with their surroundings.

  2. Uses FBML elements. FBML is filled with several tags, controls, and “widgets” that enable you to develop a rich app interface in minimal time.

    Want to add a dashboard navigation menu? With FBML, you simply need to add an fb:dashboard tag. With IFrames, you need to code and style it all yourself.

  3. May offer improved performance. Facebook claims that performance is improved when you use FBML. However, that claim probably depends on the specifics of an application and is not necessarily a blanket statement.

On the other hand, reasons you should consider using an IFrame approach include the following:

  1. Enables existing apps to get up and running quicker. If you have an existing Web app, you usually need to do very little to integrate into Facebook using an IFrame approach. Your application can perform, more or less, as is within the confines of the IFrame. If you port to FBML, you are going to have to rework a lot of the presentation code.

  2. Makes it easier to maintain a common code base. When you use FBML, you will probably need to branch your code base so that you can maintain a Facebook version, a stand-alone version, and perhaps a version that fits into another network, such as Bebo or OpenSocial. However, if you use an IFrame approach, you will not need to replace more generic HTML with Facebook-specific FBML.

    Having said that, if you are going to integrate into various social networking environments, you need to be realistic. Some platform-specific presentation code must be performed, regardless of whether you use FBML. Therefore, the IFrame approach is not necessarily a cure-all for portability.

  3. Avoids JavaScript limitations. The Facebook Platform does provide scripting support, but it is more restrictive than a native HTML environment. As a result, with IFrames, you are not bound to the same restrictions for using JavaScript as you would be using FBML.

The decision you make will depend on your circumstances. If you can write suggest or advice, go ahead.

There have been 2 comments | Subscribe to Comments | Jump to Form »

Emigdio Gutierrez

Great article as it puts the topic out succinctly. So, I now know the iFrame route is for me. Though, I have yet to come across a solid working example of how to piece an iFrame approach together. Specifically, is the iframe defined in a FBML tab or is the external canvas url to serve as the iframe (index.php for example) call to a home.php…?



I found a solution to create an iframe application without being a facebook developer . It’s very powerful:


Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.