Creating a Facebook Page Tab

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.

Minimum Requirements

Check through the following requirements before you get started:

  • A webhosting account with SSL. Since the Fall of 2011, Facebook has been requiring links to an SSL and non-SSL script for users using their Facebook accounts securely.
  • Administrator Access to a Facebook Page. If you don’t have Administrator Access to the Facebook Page you are developing for, you can get the Administrator to install the App.
  • A Facebook Developer’s Account. More information can be found here. https://developers.facebook.com/

The Concept

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.

Create the Code

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.

Create New App in Facebook

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:

  1. First, you need to make sure your Facebook Account is a Developer’s account by going to https://developers.facebook.com/
  2. Once your account is a Developer’s account, go to https://developers.facebook.com/apps/ and click on the button in the top right titled “Create New App”. Give your App a Name and click Continue.
  3. The following settings have worked best for me:
    • Give it a Display Name that people will notice and want to click on. (I used Enewsletter in the screenshot above)
    • For the App Domain, type in www.yourdomain.com (your website URL)
    • Choose a Category for your App / Tab
    • While you’re developing and testing your Facebook Tab, put it in Sandbox Mode so that only you, as an Administrator of the page you add the tab to, can see it. When you’re ready to go live, Disable Sandbox Mode.
    • Under Website with Facebook Login -> Site URL, put in the http://www.yourdomain.com/ (with the http:// this time)
    • Under the Page Tab section:
      • Give the Page Tab a Name
      • Specify the Page Tab URL (non-SSL)
      • Specify the Secure Page Tab URL (SSL)
      • Give it a Page Tab Image to look nice
      • Specify the Page Tab Width you are using (520px for our example code above)

      Click Save Changes at the bottom and move onto the next step of Installing Your Facebook Tab.

Install the Tab on your Facebook Page

The Administrator for the Facebook Page will need to install the App / Tab. To do so, they have to:

  1. Log into Facebook
  2. Load a URL similar to this, changing the YOUR_APP_ID and YOUR_URL to the information in the Developer’s area: http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
  3. A page will be displayed with a Dropdown menu of Pages you are the Administrator for. Choose the one you want to add the App to.
  4. The App should now appear in the Tabs area of your Facebook Page.

Editing / Reorganizing / Ordering / Deleting a Tab

Edit Facebook Tab

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.

Size Issue

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);

Conclusion

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

Your email address will not be published. Required fields are marked *