Posted: October 16, 2012
Creating a Custom Tab for your business is fairly easy, the difficult part is setting it up in Facebook, getting through their documentation and screen settings, and ensuring you have the minimum requirements. The Custom Tab appears on the Facebook page as a small thumbnail graphic and can be used for a variety of things like display custom content, scripts that import RSS feeds, Forms, or just about anything.
I created an Enewsletter Signup Form as a Tab on this Facebook Page.
The confusing part is the Tab is a type of App and often these two terms are interchanged with each other. Now that we’ve got that out of the way, let’s get started.
Check through the following requirements before you get started:
The idea behind creating a Facebook App is the code sits on your web server and Facebook accesses that code through an iFrame, displaying it within the Facebook Template. You code regular HTML and Server-side Scripts (ie. PHP, .NET, etc.) and provide Facebook with 2 URLs to access the code, one SSL and one non-SSL.
Page Tab Widths can either be set to 510px (Narrow) or 810px (Wide) and this has to be done in the settings below. For this example, we’ll use the Narrow width.
Start by creating a new directory on your web server called “facebook-apps” and create 2 files, one index.html and styles.css.
Add the following to index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Facebook App</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>
<p>Hello World!</p>
</body>
</html>
Add the following to styles.css:
p {
font-family: arial, sans-serif;
font-size: 20px;
}
You can create whatever files you need or organize them into further sub directories to keep things organized.
Note: It is assumed that your “facebook-apps” directory can be accessed with both https and http URL requests.
We’ve created our the code for our Facebook Tab, now comes the hard part of setting up Facebook so it grabs our code and displays it within the Facebook Page. Here are the steps:
Click Save Changes at the bottom and move onto the next step of Installing Your Facebook Tab.
The Administrator for the Facebook Page will need to install the App / Tab. To do so, they have to:
Edit a Facebook Tab by putting your mouse over the image and clicking on the pencil.
To reorganize where the Tab appears or to Delete a tab, simply put your mouse over the Tab’s Image and a Pencil will appear in the top right corner. Click on this pencil and you will see a number of options appear. The Edit Settings option in the dropdown, you can change the Tab Name and the Image without having to go back into the Developers section of Facebook. Finally, if you want to Share A Link so users can go directly to your Facebook Tab, you can click the Link To This Tab option to get the URL.
If you don’t want to specify a size in your code, change the following in index.html
FB.Canvas.setSize({ width: 520, height: 1000 });
to this:
FB.Canvas.setAutoGrow(true);
This covers the basics of setting up a Facebook Tab and there are endless possibilities on how to use them within your marketing strategies. One word of caution is to keep in mind that things like this connected to Facebook change and expect that one day, your Tab’s code may need to be modified to work with a future version of Facebook.
Leave a Reply