This year Facebook scrapped their markup language FBML and introduced iframe Tabs for pages. Although there has been a lot of grumbling from the Facebook community, this is good news for web developers, as it allows them to work outside of Facebook in any framework once they’ve done a little bit of setup.
Finding straightforward explanation of how to immediately dive in proved to be a bit painful – most of the tutorials I found seemed to be aimed towards clients or casual Facebook users rather than developers. I thought I would compile the information I found useful in quickly making custom tabs for Facebook pages.
First of all, even though they still use the term tab, what we are talking about are the links in the left column that fall under Wall. A standard first custom tab to add is a Welcome tab.
I originally tried using an existing app (Static HTML frame tabs) which worked fine, but had two major disadvantages. One was that you could not assign a custom icon, and the second that it could only be used to create one link. This could be handy for a quick and easy custom welcome page, but most likely a client is going to want more than one custom tab.
I won’t cover signing up as a developer, but basically it involves creating a Facebook account and being assigned as an admin to an existing business page, or creating your own. You will also need to be confirmed via a text to your mobile phone or by entering a credit card.
After you’ve done this, you can head on over to http://developers.facebook.com, and hit the Apps link, and then the + Create New App button:
Create a name for the app:
This will create an app with an app ID (which you will need later).
For now, you can just upload a 16×16 icon that you would like to appear to the left of the link on your page.
Now, click the On Facebook link in the left column.
Enter the Tab Name (This is the name of the link as it will appear on your page) and the Tab Url.
The Tab Url is a link to a file hosted somewhere else that will be placed in the iframe (more on constructing this later)
After saving, click View App Profile Page in the left column
Now you can click Add to My Page , and then select the page (for which you are already an admin) that you wish to add it to.
Now, if you navigate to the page you’ve added it to, you will see it as a tab in the left column:
Hit the Edit button below the tabs to rearrange the tabs, but note that Wall and Info will always come first.
To make this new tab the default landing page of your site, click Edit Info at the top of your page.
Now click Manage Permissions and then choose the Default Landing Tab from the dropdown. Note that fans and admins of the page will always be directed to the wall – this default landing page only applies to anonymous users or non-fans.
Finally, a note on creating your content for the iframe. I initially ran into some problems with scrollbars appearing both vertically and horizontally in the frame – the solution was to include two Facebook scripts and apply a little bit of css, all of which you can see in the basic template below. You’ll need to modify the height, add your content, and also include your app id in the bottom script.
<!DOCTYPE html><html>
<head>
<title></title>
<script type=”text/javascript”>window.fbAsyncInit = function() {FB.Canvas.setSize();}function sizeChangeCallback() {FB.Canvas.setSize();}</script>
</head>
<body style=”width:520px;overflow:hidden;”>
<!– Modify height if necessary –>
<div style=”width:520px;height:1000px;overflow:hidden;”>
<!–Your Content Here –>
</div>
<div id=”fb-root”></div>
<script src=”http://connect.facebook.net/en_US/all.js”></script>
<script>
FB.init({
// CHANGE THIS TO YOUR APP ID
appId : ’123456789′,
status : true,
cookie : true,
xfbml : true
});
</script>
</body>
</html>
That’s all you need to do.
