What’s a Facebook Tab Page?
If you have a Facebook Fan page for your company or organization, Facebook gives you a way to create additional pages within the Fan page. These pages are called tab pages because you used to access them by clicking on a tab. Now you access them through a sidebar menu. You can also designate a tab page to be your Fan Page’s home page.
Here’s some examples. (Note: tab pages may be temporary for promotions)
For more inspiration http://www.ignitesocialmedia.com/facebook-marketing/top-50-branded-facebook-pages/ lists the top 50 branded Facebook pages.
Facebook changed the way you create tab pages in early 2011
Before 2011, you created tab pages with FBML (Facebook markup language), but now you create them with iframes which gives you much more creative control. An iframe is like a window. You look through the window to view a web page that lives somewhere else – not on Facebook.
What’s a Fan-gate?
Using tab pages, you can also create a Fan-gate, also known as a Reveal Page, or Fan-Only Page. An application code provided by Facebook checks to see if a visitor has “liked” your page. If not, then non-fan content is displayed. If yes, then fan content is displayed. This is quite handy to give your actual fans benefits or special offers.
You can DIY or use an App to Create a Tab Page with Fan-Gate
If you feel comfortable creating websites with html and have ftp access to a web server, you can follow the tutorial below. Some php knowledge would be handy, but I’ll give you the code to copy and paste to make it easy.
If “web code geek” doesn’t describe you, don’t despair. There’s a fabulous post about the top 10 Facebook tab page apps at http://www.socialmediaexaminer.com/top-10-facebook-apps-for-building-custom-pages-tabs/ for people with little or no html coding experience.
Note: You must use your personal Facebook profile account, and have admin rights for the Business Fan page, in order to install a Tab Page.
Still here? Good. Here we go. Let’s create a Facebook Tab Page with Fan-gating.
Download the Facebook php sdk from
If you have troubles, visit https://github.com/facebook/php-sdk and try downloading from there. Once downloaded, decompress the zipped folder.
Create the file structure which you will upload to your server. For this example I will make a folder called “facebook”. In this folder I will create a file called index.php and place a folder called “src” copied from the Facebook php sdk kit you downloaded earlier.
Your file structure should look like this:
Below is an image of sample code. Download the code here and paste it into your index.php file. Note the areas for appId, secret, fan content, and non-fan content. You will put personalized code in these areas later. (Acknowledgements to http://www.pastie.org/2173305 for providing the code which I ever so slightly altered.)
Log into your personal Facebook account and then go to https://developers.facebook.com/apps. If this is the first time you’ve visited the Facebook developers site, you will need to grant permission to your personal Facebook information.
Click the “+ Create New App” button.
- App Name: Give your app a descriptive name and agree to the Facebook terms.
- Under Basic info:
- Copy the App ID and the App Secret and paste these into your index.php file in the appropriate place between the single quotes. Then upload your files to your server.
- Back at the App page, choose a Category and enter your email address under Contact email and Support email.
- Under “On Facebook – Canvas Settings“
- Canvas Name: You can name this anything you want but it must be unique and at least 7 characters. Example: gloriasample
- Canvas URL: This is the directory on your server where the files are stored. Example: http://gloriaw.com/facebook/
- Click “Auto Resize” so you won’t get scrollbars
- Tab Name: Again, this can be anything you want. This name will show on your Facebook fan page on the sidebar menu. Example: Sample
- Tab URL: This is the exact address of the web page you want to display. Example: http://gloriaw.com/facebook/index.php
- On the left sidebar, click on “View App Profile Page“
- On the left sidebar, click on “Add to My Page” and select your fan page. Close.
Maneuver to your Fan page. You should now see the tab name in the left sidebar. Click on it. Does it show the correct message for your “like” status? “Like” and “Unlike” the page. Does the message change accordingly. If all is well, proceed to the next step.
Now all there is left to do is the design of your page.
On your index.php file, create two div’s to replace the paragraph placeholders for fans and non-fans.
- These div’s should be styled with a width of 520 pixels – the width of the Facebook iframe.
- Add content, images, etc. inside the div’s. It’s very much the same as designing regular webpages.
- For the best results with a large image, make the image no larger than 520 pixels wide x 800 pixels tall
- Don’t forget to upload your files to the server after you’re done designing the pages.
If you want the tab page to become the first page visitors see, designate this tab as the default landing tab in your Facebook Fan Page settings – manage permissions.
Now, whenever you want to change this tab page, you just edit the web page hosted on your server.
Update December 2011
Facebook has changed many aspects of creating a Tab Page. See https://developers.facebook.com/docs/appsonfacebook/pagetabs/ and pay special attention to the section on how to add an App to a Page.