Web Development Blog

Facebook iframe tabs on Pages - No more FBML!

02.14.2011 10:43PM by Evan Johnson

The long awaited transition from FBML tabs to iframe tabs has finally happened. As of this writing on Feb 14th 2011 (Valentines Day!) you can choose the "iframe" option for Facebook application tabs. The official word from the Facebook developer roadmap is that as of March 11th developers will no longer be able to create FBML tabs (although existing FBML apps will be supported indefinitely – or at least until the end of 2011 I heard in the comments).

The Good

The great thing about iframe tabs is that you are working with a real webpage now. No more fighting with FBJS and finicky FBML tags!

  1. External JS like JQuery and TinyMCE – You can finally do all of the things that Canvas iframe apps have been able to do for a while, like include handy JavaScript libraries!
  2. onLoad JS events – One of the frustrating things with FBML apps was always that you couldn’t start JS on the page load, so things like automatic slideshows were impossible. You should be able to have content auto-play now!
  3. Facebook JS SDK for XFBML Social Plugins – You can import the JavaScript SDK and still have Request popups, Like buttons, make Open Graph API requests… the whole 9 yards.

The Bad

One of the interesting things is that the ubiquitous Static FBML app is going away too, apparently. This application has a been a great shortcut for many developers and page owners, allowing them to just install the app and paste in HTML and FBML code without creating a special custom application. (Hopefully more people will use the custom facebook tab creation service I built, SplashLab Social ;)

This will be a pain for many users. It’s a big leap to have to create a custom application and host the code on your own server! I will be curious to see if Facebook creates a new app that does some of the same things?

The Ugly

Naturally, like any new (and many old) Facebook features iframe tabs have bugs still. My preliminary tests turned up the following problems:

  1. Tabs not visible to logged-out users – If a user is not logged in to Facebook they cannot see your tab. Official bug is here: "http://bugs.developers.facebook.net/show_bug.cgi?id=15166":http://bugs.developers.facebook.net/show_bug.cgi?id=15166
    This has been fixed now!
  2. SSL/https problems – My iframe tabs do not load properly when using Facebook over https. Here is the bug on Facebook if you want to track progress: "http://bugs.developers.facebook.net/show_bug.cgi?id=15200":http://bugs.developers.facebook.net/show_bug.cgi?id=15200
    This has been fixed now
  3. Renaming tab titles not working – Changing the "Tab name" does not appear to working at this time. The official bug is here: http://bugs.developers.facebook.net/show_bug.cgi?id=15155 UPDATE: Apparently this is a feature, not a bug! Users can now set custom Tab Titles for each tab!
  4. Max height scrollbar issues (my mistake) – The iframe tabs appear to have a maximum height of 800px, which gives a scrollbar for taller content. The problem with this is that when the scroll bar appears the tab is width is now smaller than 520px, essentially. This means if you have images which are 520px wide, you get a horizontal scroll bar at the bottom. It’s kind of ugly right now, hopefully Facebook will enable and auto-resize like regular Canvas apps have.

Iframe tab height: This is not a bug, but I DO think it’s a little weird and not very obvious. You can fix this with the FB.Canvas.setAutoResize() method, as detailed in the bug I filed.

Beyond Static FBML

In summary, the new iframe tabs are more powerful and flexible than the FBML ones, and open up a lot of great new possibilities. There are a LOT of FBML apps out there, however, so it will be interesting to watch the transition.

Please, post any comments or corrections you have below! Are there any other new features of iframe tabs you are excited for? Anything you will miss from FBML?

Update: SplashLab Social has been released! If you are looking for an easier way to set up iframe tabs, look no further! My new service makes it easy – check it out!

Categories:

Share:

Comment

Gravatar Image
On Feb 15, 01:34 PM, (Link)
Deidre Christiansen said:

Thank you for posting this – otherwise I would have continued to stab blindly at the old FBML.

Gravatar Image
On Feb 20, 12:41 PM, (Link)
SKunder said:

The linked fix for the iFrame height does not work…Unless the Facebook developer failed to fully disclose the proper instructions. I myself have tried dozens of different fixes for the issue and nothing works for FireFox (Safari is fine).

Gravatar Image
On Mar 1, 02:02 PM, (Link)
Igor said:

Unfortunately, the resizing function does not work.
Tried the same code that works perfectly on Canvas IFrame. Checked in FF and Chrome. If somebody knows a solution, please post here.

Gravatar Image
On Mar 16, 04:19 AM, (Link)
goldfidget said:

This is a very welcome move. FBML on page tabs was always wildly tricky to use and full of arbitrary, poorly documented limitations. The inability to place a like button in an FBML tab was always a particular issue for me. I understand the reasons, but I think the same effect could have been achieved by enforcing sensible terms and conditions.

The graph API on the other hand is pretty much a joy to use. I assume there will still be some restrictions on what you can put in the iframe though. Last time I looked, the iframe was generated programatically in javascript so presumably some filtering will go on.

Gravatar Image
On Jun 21, 07:39 PM, (Link)
LENOVO FRU 92P1186 Battery said:

Unfortunately, the resizing function does not work.
Tried the same code that works perfectly on Canvas IFrame. Checked in FF and Chrome. If somebody knows a solution, please post here.

Gravatar Image
On Sep 6, 08:09 AM, (Link)
Mini me doll said:

It seems FBML no long accepts fb:iframe tag. :(

  Subscribe to article comments