Designing an iframe tab for your Facebook page

In its umpteenth change in the way pages are organised, Facebook has just announced that tabs will no longer be available on pages after March 11, and that FBML, Facebook's variant-evolved subset of HTML with some elements removed, which allows Facebook Application developers to customise the "look and feel" of their applications, to a limited extent, is being deprecated: you will no longer be allowed to submit new applications after the change goes through on March 11, and at some point in the future Facebook will discontinue it altogether. Static FBML used to allow users them to just install the app and paste in HTML and FBML code without creating a special custom application. Once the transition is complete, they'll have to create a custom app and host any files outside of Facebook.

This switch was to be expected, since it brings pages in line with the new, tab-free personal profiles that were launched at the end of 2010. Some will be understandably annoyed at Facebook for its constant changes in strategy, meaning pages that have been painstakingly designed using FBML, not all that long ago, will at some point in the not-too-distant-future have to be binned. Some developers may be even more annoyed, since all the Facebook apps, such as Static FBML, that provided a piggy-bacck way of bringing personalised content to pages will no longer be able to be used for new content and will eventually disappear.

One negative consequence of the switch is that, as with personal profiles, Facebook is moving back to a more standard vanilla format for pages, with optional content confined to a tiny area in the menu on the top left of the page: they've obviously done this deliberately, as part of their strategy to discourage users from displaying too much customised content—and keeping visitors on content that Facebook can monetize more effectively.

But one positive silver lining to the cloud is that Facebook are also, effective immediately, now supporting iframes in pages, meaning that the previous restrictions of FBML, which didn't allow calls to external scripts—or iframes, for that matter—will no longer apply. If only for this reason, it's worth making the switch to iframes: because pages couldn't call on external stylesheet, for instance, I had to use inline styles for my previous FBML page, which was obviously suboptimal.

Switching to an iframe Facebook page [i] is actually quite straightforward: you'll need to (1) design and host the iframe, (2) create an app for the purpose of loading your content into Facebook, (3) connect the iframe to our page, via the app.

This is what I've just done for this website's official Facebook page, the landing tab for which now looks as follows:

This website's Facebook page
This website's Facebook page using the new iframe tabs. The iframe will appear in the left-hand menu, together with the icon you have set for it. Facebook have improved their pages considerably in recent months and you now have a wide range of options to choose from when categorising your page. You can choose which third-party pages to feature on your own page, among those you have 'liked'. And you can now browse other pages and profiles in Facebook 'as your page'.

Designing the iframe

You can basically put any content on the iframe, and it will display in any standards-compliant browser [ii]. Given Facebook's massive base of users and the heavy focus the company is currently putting on pages, as page administrators start switching to the new standard, increasingly inventive iframes can be expected to appear, although loading speeds and caching will probably be issues initially.

I chose to design my page as follows:

  • in line with the previous tab-enabled pages, the new Facebook pages will have a 520 pixel central column, meaning you should make your content fit within that width; in practice, I've found it's best to keep images no larger than 512px;
  • you'll probably need to write up some basic CSS and plan some images, especially since image maps are a good way of designing an eye-striking page that engages visitors' attention when they first visit your landing page;
  • you can host the corresponding files on any third-party server of your choice; I initially planned to do this on Amazon Cloudfront, as I do for the rest of my content, but at the time of writing this there seems to be an issue with this, so I'm currently hosting the content on my Media Temple (dv) server [iii];
  • once you've tested the iframe in a couple of browsers, you'll be ready to set up the page;
  • remember to keep search-engines from crawling the page by inserting a <meta name="robots" content="none" /> tag in the <head> section of your page;
  • to avoid a horizontal scrollbar appearing in your page, you can disable scrollbars by hiding overflow in the page html tag's properties [iv]:
<html style="overflow: hidden;">
    <head>
    </head>
    <body>stuff</body>
</html>

Creating and setting up the Facebook app

This is done by accessing the Developer application, a link to which will be in the top left-hand menu in your Facebook home page, if you've installed it, and then clicking "Set up a new app" in the top right corner of the screen. You'll be prompted to enter a captcha to prove you're human. A screen then appears where you can give your application a name. The only other parameter it's important to fill on this screen is the application icon, which is a 16x16px image that will appear on the left of your iframe menu in the Facebook page menu.

Creating the iframe app
In order to display an iframe on a page, you need to create a dedicated Facebook app that will serve only for that purpose. Because its purpose will be limited to that simple task, the settings don't all need to be filled. You'll have to give your app a name and set an icon that will then be displayed in your page's menu.

You then need to go to the "Facebook integration" menu, where you can make the settings actually connecting your app to the content hosted on your third-party server: in typical Facebook fashion, these settings aren't actually crystal-clear, but I eventually managed to work out what they correspond to.

Let's assume you've created an html file called iframe.html, which contains the code for your iframe, and you've saved it, together with a stylesheet called iframe-style.css and an image called iframe-image.jpg, in a directory on your server whose URL is http://mysite.com/facebook/. You'll need to provide the following information to Facebook:

  1. a Canvas Page, defined as the 'base URL of your app in Facebook'; this can be any name you choose and will be included in the app's URL;
  2. a Canvas URL, which is the URL for the directory in which the file for your iframe page is hosted on the third-party server; so in the case of the above example, you'll enter http://mysite.com/facebook/ (with the trailing slash);
  3. a Tab Name, which is name for the tab (confusingly, Facebook call it a tab, whereas in fact it's a menu item), which will be what your iframe will appear as in your Facebook page's left-hand menu, together with the icon; you can change this setting subsequently, but it's worth giving it a bit of thought to choose a name that will incite people to click on it;
  4. a Tab URL, which, particularly confusingly, is the name of the file hosted on your third party server (in our case, iframe.html), which Facebook will pull from the Canvas URL location you set above and display in the URL it sets for your application; in our case, this URL will be http://apps.facebook.com/test-app/iframe.html.
Settings for integrating your iframe app into Facebook
The settings for integrating your iframe app into Facebook need to be read carefully. You will have to (1) choose a name for your app; (2) set the location where your iframe files are hosted on a third-party server, and (3) specify the name of your iframe file on that server.

You then need to set the page type to iframe (it's bizarrely set to FBML by default) and save your settings. Once you've done this, although you can fill the other settings if desired, your app will be properly connected to both your server and your page and therefore good to go for the purpose of loading your iframe in your page.

Adding the iframe to your page

All that is needed now is to add the app to your page (for the sole purpose, in this case, of adding the iframe). If you open the app's settings page (the illustrations below are no longer theoretical like the earlier ones, but taken from my actual iframe app), you then need to click on the 'Application Profile Page' setting and then on 'Add to my page', which will open up a drop-down menu including all the pages you administer.

Adding the app to your page
Adding the iframe to your page's menu is a two-step process: you first click on your app's 'Settings' menu; you'll then be prompted to chosse which page you want it to be added to from a dropdown list.

Now open your page's Settings menu, and you'll see your iframe app listed. Click on the page's settings, and you'll be able to add it to your menu:

Adding the app to your page (continued)
To complete adding the iframe to your page's menu, once you have added the app itself to your page, you can add the actual iframe page in the app's 'Settings' menu that now appears in your page's installed apps. The name will be the same one you set earlier in the app settings.

You may also remove any applications you don't intend to use with your page from your left-hand menu, so that it only displays links to tabs on which you'll be offering content: I removed Photos since all my photos are on Flickr, Links, Notes and Discussion Boards, while adding Networked Blogs, Twitter and Flickr Tabs in addition to my iframe app, but what you do is up to you really; the only items you can't remove from your menu are Info and the Wall.

Optionally, if you want to set your iframe as the landing page for new users (i.e., those who haven't 'liked' the page yet), you can do this in the 'Manage Permissions' menu (bizarrely, this setting will only currently work for users who are logged into Facebook: those who aren't will see the page, but not the iframe [v] ):

Setting the iframe as your page's landing page
Setting the iframe as your page's 'landing' page, if desired, completes the process. This is done in your page's 'Manage Permissions' menu.

That's all there is to it, really. Before you permanently switch your page to the new layout (you have until March 11 to do this, but there's no going back once you've done it, so only do it once you've tested your iframe and are happy with it), you might want to add photographs to your page's photo album, since the five most recent shots will now be displayed at the top of your wall, in keeping with the previously-launched personal profiles.

_______________
  1. Until March 11, you can preview the new layout for any page for which you have administration rights. You have the option of switching to the new layout at any time until March 11. After that date, you won't be allowed to add any new FBML apps to your pages, and they will eventually be deprecated. []
  2. First introduced by Microsoft Internet Explorer in 1997, standardised in HTML 4.0 Transitional, allowed in HTML 5. []
  3. UPDATE April 3, 2011: The reason it's impossible to host the content for a Facebook iframe on Cloudfront is that Facebook requests the iframe using an HTTP POST request, which S3 only supports for upload, whereas Cloudfront is a read-only destination. One fairly easy alternative Amazon S3 solution would be to create an Amazon EC2 instance running a simple static content web server such as nginx on an EC2 micro instance. []
  4. Update February 21, 2011: The scrollbar can also appear, according to some commenters, if your content is taller than 800px; while this may or may not be intended by Facebook, a possible alternative workaround for this specific issue (which could cause vertical and horizontal scrollbars to appear) can be found here. Alternatively, you can use Mika Tuupola's workaround, pointed out in the comments section, which allows iframes of any height without scrollbars. []
  5. Update February 14, 2011: Facebook has acknowledged the bug, which seems also to be affecting users logged in using https only. []