Create custom tabs on your page on Facebook containing HTML, JavaScript, and your own styling
Facebook has recently rolled out a major overhaul of their Facebook Pages product, which, along with numerous other much-awaited features, includes the possibility to running iFrames as tabs. In fact, the old Static FBML way of building Facebook Pages tabs will be retired in March 2011. The only way of having custom tabs afterward will be to use the new option involving iFrames. Since the new way of building these tabs is not the most straightforward thing for all those page admins out there who are not web-development savvy, we thought of sharing with you an illustrated, step-by-step guide to make your own iFrame tabs for your Facebook page.
PREREQUISITES
1. Upgrade your page to the new format of Facebook Pages
Unless you have already done so, you will need to upgrade your page to the new format of pages launched yesterday. To upgrade, simply visit your page on Facebook (either type its URL, such as www.facebook.com/adops, or access your pages through the Ads and Pages link from the left sidebar on Facebook), look up the upgrade notification (see image below), click the “Upgrade This Page” button and follow the indications.
Take moment to familiarize yourself with your new page layout and options.
2. Ensure you can create a pages and directories / folders on your website’s hosting account
In order to use the new iFrame tabs for your Facebook page, you will need to create the content you wish to include within the iFrames. You can now display any regular HTML page as a Facebook page tab, however it will need to be created and styled first.
Facebook requires that iFrames for tabs are pulled from directories, therefore you will not be able to pull the content directly from a page such as www.yoursite.com/fbtab.html. Instead, you will need to make that page’s content available from www.yoursite.com/fbtab/ (note the trailing slash). There are many ways of achieving this, and we’ll show you a very straightforward one below.
In the meantime, make sure you have access to your website’s hosting account and that you can create directories and upload files.
BUILDING AN IFRAME TAB FOR A FACEBOOK PAGE
Now that you have upgraded your page on Facebook and have a website where you can create directories and upload files into, you can start creating the iFrame tab.
1. Create a Facebook app for your iframe tab
iFrame tabs for Facebook Pages must be created as standalone Facebook apps, which you will then add to your page.
To create a Facebook application, go to http://www.facebook.com/developers/apps.php. You will be taken to the “My Apps” section – click the “Set Up New App” button found on top of the page.
In the example below, we will create a custom tab for our page on Facebook, that will display the Advertising Events Calendar we maintain at http://www.adoperationsonline.com/events/. For this, we will need to create the associated Facebook app, name it, and accept the Facebook T&Cs:
Once you click the “Create App” button and pass the captcha verification that follows, your app will be available for further edits via the “My Apps” section from your Facebook account, at http://www.facebook.com/developers/apps.php.
Feel free to fill in the basic information for your new app: description, contact and support email, upload a logo and an icon if you have them handy (you can also come back later for the finishing touches). Click “Save Changes” and do not edit anything else for the time being.
2. Create the page that will be displayed in your iFrame tab
As previously mentioned, you will need to prepare in advance the content you wish to display in the iFrame tab of your Facebook page – you will not be able to pull it from a regular web page URL and will need to have it available via a directory instead. While you can achieve this through mod_rewrite, we found that most non-technical Facebook page admins would be uncomfortable using it. Instead, you can do the following:
a. Create a directory on your website and give it a relevant name
For our Advertising Events Calendar, we created the directory www.adoperationsonline.com/fbcalendar/.
b. Create an index file for your directory
The HTML content you want to display within the iFrame tab of your Facebook page will need to sit in the index file of the directory created at step 2.a. above. This content can be any standard HTML, JavaScript, another iframe etc.
Open a notepad file, save it as index.php, and fill it with a simple structure such as:
<head>
<style type=”text/css”>
body
{
font-family:sans-serif;
font-size:11px;
}
</style>
</head>
<body>
</body>
Drop your page’s content between <body> and </body>: it can be anything from a widget code, script, or simple plain HTML, whatever it is that you wish to be then displayed on your Facebook page. Since the calendar that we wanted to display was a Google Calendar widget, our content was actually the widget code supplied by Google. We added a bit of extra text, which was very basically styled as shown in the <style></style> section above, to avoid have it displayed in large Times New Roman. You can define your own style, of course, or a fully developed css.
Save your file and upload it in the directory you previously created. Check that when you type the directory URL in a browser (in our example, http://www.adoperationsonline.com/fbcalendar/) it correctly displays the content you wanted. Style the content ahead as needed, add further code, until you get exactly what you want to display in your Facebook page’s new iFrame tab. Don’t forget to save and re-upload the file to the directory.
3. Assign the web content to the Facebook app
You will now need to instruct the Facebook app you have already created to pull this web content. To do so, go back into your Facebook account, access the “My Apps” section, and select the app you created. Click “Edit Settings”, then click “Facebook Integration” from the left sidebar.
In the Canvas area, define a canvas page name and enter the canvas URL, as in the example below:
For canvas page, define anything that helps you remember what the app is for and what is going to be displayed. For canvas URL, enter the URL of the directory you have created. Make sure canvas type is set to iFrame.
In the Page Tabs section, create a tab as you want it displayed on your Facebook page.
In our case, we have named the tab “Ad Events” (you are limited to 16 characters). Make sure the Page Tab Type is set as iFrame. For tab URL, specify index.php, as shown above. This is an URL relative to the canvas URL you have entered already. The Edit URL can be left empty. Save changes – this is your new app!
4. Add the iFrame tab to your Facebook page
All that is left to do now is tie your app to your Facebook page. To do so, go to your app’s profile page (go to “My Apps”, then select the app you have just created). Look up the links below and click “Application Profile Page”.
Once on the app’s profile page, click the “Add to my page” link from the left sidebar menu, then, in the window that opens, click the “Add to page” button corresponding to the Facebook page where you want to display the tab.
Your new tab will be available in the left sidebar of your upgraded Facebook page and should be displaying the content you have created in the index file of the directory URL you associated with the app.
See more examples of iFrame tabs for Facebook Pages at www.facebook.com/adops, where we have created a tab for job openings and one displaying our media kit, using the method described above.
