How to create a Facebook Tab Page with Fan-Gating

Red Bull Facebook Page

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.

Step 1:

Download the Facebook php sdk from
http://github.com/facebook/php-sdk/tarball/master
If you have troubles, visit https://github.com/facebook/php-sdk and try downloading from there. Once downloaded, decompress the zipped folder.

Step 2:

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:

Sample File Structure

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

Sample Facebook Code

Step 3

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.

  1. App Name: Give your app a descriptive name and agree to the Facebook terms.
  2. Under Basic info:
    1. 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.
    2. Back at the App page, choose a Category and enter your email address under Contact email and Support email.
    3. Save.
  3. Under “On Facebook – Canvas Settings
    1. Canvas Name: You can name this anything you want but it must be unique and at least 7 characters. Example: gloriasample
    2. Canvas URL: This is the directory on your server where the files are stored. Example: http://gloriaw.com/facebook/
    3. Click “Auto Resize” so you won’t get scrollbars
    4. Tab Name: Again, this can be anything you want. This name will show on your Facebook fan page on the sidebar menu. Example: Sample
    5. Tab URL: This is the exact address of the web page you want to display.  Example: http://gloriaw.com/facebook/index.php
    6. Save
  4. On the left sidebar, click on “View App Profile Page
  5. On the left sidebar, click on “Add to My Page” and select your fan page. Close.

Step 4

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.

Step 5

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.

You’re done

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.

Gloria Wadzinski

About Gloria Wadzinski

Gloria Wadzinski is a multimedia designer specializing in graphic design, website design and video production. She currently lives in Boulder, Colorado. View Gloria's contact information and portfolio at http://gloriaw.net.
Web Development, , , Permalink

9 Responses to How to create a Facebook Tab Page with Fan-Gating

  1. ron says:

    Just what I need! But I am getting a blank page on my app page. Any thoughts? I have tried going over my steps a few times.

  2. Sometimes it’s the simplest thing that goes wrong. Did you upload your web page to the server? (Sorry, I originally forgot this step under 2a of the instructions) Did you upload all your images? Did you copy the App ID and the Secret correctly and leave the single quote marks in the code? Also, Facebook has been having some problems lately and you will get an “Unable to load page” error. If you try a couple of hours later, it might work.

    If my suggestions aren’t working, you might find help at https://developers.facebook.com/ .

  3. Joeri says:

    Hello! Working aswell, but one problem!
    When I ‘like’ the landing (no fan) tab, its redirecting to my wall and not to the default landing tab.

    Do you have a solution?

    ps: this one working aswell (but same redirect problem)

    FB_APP_ID,
    ‘secret’ => FB_SECRET_KEY
    ));

    // Get Signed Request
    $data = $facebook->getSignedRequest();
    $page_liked = $data['page']['liked'];

    ?>

  4. Sony says:

    i always get

    “content to display if the person does not like the page”

    I am using, IIS + PHP

    below is my code

    ’230602107012623′,
    ‘secret’ => ’9d8d492867b3d2bcaf87d946dec1afb2′
    ));

    $data = $facebook->getSignedRequest();
    ?>

    KieschDoes.tv on Facebook

    content to display if the person has already liked the page

    content to display if the person does not like the page

  5. Hello Joeri, Not sure why you are getting the immediate redirect. On subsequent visits, after someone likes your page, they will automatically see your wall when they visit your page. No way around that for now. One solution is to make a tall profile photo on the page. I’ve seen them as tall as 600 pixels. At the bottom of the profile photo you could have an arrow pointing down with instructions to click on the menu for that Tab Page.

  6. Hi Sony, For some reason, it is not getting access to information about the person visiting the page so it defaults to the “not liked” view. Have you tried the help pages at developers.facebook.com?

  7. David Mon says:

    I tried this and just get a blank space for both. Because It is blank I do not know what the issue is.

  8. Hi David, You do need some technical knowledge to troubleshoot problems when doing the manual method. Facebook has recently added more changes including requiring a secure server certificate for these Fan Gate pages. Facebook members that have selected certain security options will not be able to see your page if it is not available through https. Perhaps you should try one of the resources I mentioned earlier in the article.

    Since your business is social media, I have to question whether you commented on my blog just to get a link back. And I am curious as to why someone in social media (based on the sharing of ideas) would make a home page video private?

  9. Mohit says:

    nice post ..really help fulll

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>