Facebook Marketing Primer – Custom Facebook Tabs
This is the first in a series of articles focused on marketing on Facebook. As a programmer, this will give you the basic knowledge to program a custom Facebook tab on a page for yourself or a client.
So you’ve been hired by a client to create a Facebook page for their business. You have the page all set up on Facebook. You have all the information about their company filled out and you’ve even uploaded a nice profile photo of the company logo. Now what? The client is all ready to start posting articles and comments to their Wall, but what they would really like is to feature some of their products on the page. You’ve seen other Facebook pages from companies with tabs that display their product lines, advertise promotions or embed content from their website. So how do you create custom tab for your page? Here’s how:
Step 1 – Create the content page
Content that is displayed in a custom tab on Facebook has to be hosted somewhere else. There are Facebook applications that offer the ability to embed HTML or text, but to have full control over the page you want to create your own and host it. If you already have a website for the business then you can host the page on the same server.
Create your page with all of the content you would like to show on your tab and upload it to your server. Facebook tabs are limited to a width of 520 pixels, so make sure any content you include falls within that width. You can include anything on that page and it can be written in any language.
Step 2 – Add the Facebook code to the page
In order for Facebook to load your page inside a tab there is a bit of code that you need to include in the page. The first thing you’ll want to do is edit your <HTML> tag and add the Facebook namespace attribute. The line should look something like this:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
In the head of your HTML you will also need to include the Facebook Connect URL:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
Inside the <body> tag add:
style="overflow:hidden;"
Wrap all of your content inside a div with an id of fb-root.
<div id="fb-root">
ALL OF YOUR CONTENT GOES HERE
</div>
Add the following javascript to the page:
<script>
window.fbAsyncInit = function() { FB.Canvas.setAutoResize(); };
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}()
);
</script>
The javascript uses the Facebook setAutoResize function to resize the Canvas page in the tab. This forces it to auto-detect the length of the page and resize it so you don’t end up with a second scroll bar inside the tab.
With that complete, upload the page to your server.
Step 3 – The Facebook Application
All tabs on Facebook uses applications to load their content. As mentioned earlier, you’ll need to be a registered Facebook Developer or be working with someone who is. Registering is easy and the approval process is fairly straightforward.
Once you’re registered as a Developer, go to http://developers.facebook.com/ to begin putting together the app for your tab. Click on My Apps in the top menu and then click on the Set Up New App button in the top-right.
Enter a name for your app. I’ve called mine “My Custom Tab” but the name only acts as a label so you can find your application later. You’ll also need to agree to Facebook’s terms before you continue. On the next screen you’ll be prompted with the usual captcha form to ensure this isn’t some spambot auto-creating an application.
Once your app is named you’ll be directed to a page with a number of tabs and settings. It can be somewhat overwhelming at first but for the purpose of creating a custom tab we’re only going to use a few options.
On the first screen you can give your application a description if you wish (but not required) as well as a custom icon. The icon image will be used in the tab. The user support address field can be an email address or a website url. This is entirely up to you. You will also need to enter a contact address. Usually this information is already filled in for you. I recommend linking to a privacy policy and terms pages as well if you’re going to be collecting user information.
With that information filled in, click the Facebook Integration tab on the left. Set Canvas URL to the base URL where your file is being pulled from. As an example, if you you uploaded the file to http://mysite.com/facebook/index.html then your Canvas URL will be http://mysite.com/facebook/. This acts as the base path to your application. Set the Tab URL to the URL of the page you uploaded to your server, for example: index.html. When the Facebook tab calls the URL up it will use the base path set in the Canvas URL and append the Tab URL to the end of it. Set Tab Name to the name you want the tab called on your Facebook page. Set iFrame Size to Auto-resize. We added the Canvas.autoResize javascript to the page so this will tell the application to resize itself based on the length of the page.
Once you have that information entered, click the Save Changes button at the bottom.
Step 4 – Add the application to you Facebook page
Once you save your application settings, you’ll be directed to the application overview screen. On this page you can view basic stats about visitors to your application. To add the application as a tab on your Facebook page, click the Application Profile Page link on the right. This will direct you to the application’s main page. It looks similar to a user profile page. On the left is a link to Add to My Page. Selecting that will open a small window that displays any of the Facebook pages you are an admin on. Select the page you want to add the tab to by clicking the Add to Page button to the right of it.
All Done!
Now, check out your new custom tab. Go to your Facebook page and you’ll see the new tab on the left. If you uploaded an icon it will show up to the left of the tab name.
Congratulations! You now have your own custom tab. You can edit the page on your server as much as you want and any new information you add will show up in the tab on Facebook.
Brandon Houston
