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!
- 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!
- 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!
- 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:
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
This has been fixed now!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
This has been fixed nowRenaming 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!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!