Informative articles for your enjoyment!

How To Create Iframe Reveal / Fan-Gate Tab on Facebook Fan Pages

We’ve all seen them. You go to Facebook, and you hit a page of your favourite band, t-shirt company or whatever it may be and you see a big graphic telling you to click the ‘like’ button before you can view their fan page, or a special offer of some sort.

This is actually a bit of a falsity, as you can clearly click the ‘wall’ on the left and still see the wall of the fan page. However, you cannot post to it, or comment on it, unless you ‘like’ the page. At least from what I have found in my research there is no way to completely hide everything until like is pressed.

That’s okay though, because we can just incentivise the initial graphic the users see, telling them that they’ll receive some sort of coupon or deal or something equally special if they click like. That’s the important part to get fans for our page.

Below we’re going to outline the steps, as with recent changes Facebook have enabled it can get quite confusing finding the right information without digging through multiple documents on the Facebook developer website.

For this tutorial we’re going to assume that you already have a fan page created for your business, band or whatever on Facebook. If you haven’t yet done this, you can go here to find out how to do that.

Here’s what you do to create the reveal tab on your fan page.

This process will probably take you 15-20 minutes – not including graphic design time (thumbnails, two like page graphics, etc).

1 First we’re going to create a couple files or use ours from step 2. These are what you’re going to use on your page new reveal tab. Note for the images max width of your FB Page is 520 Pixels, but we used 500 Pixels wide for our images to account for navbars if ever visible etc.

index.php
facebook.php from The Facebook PHP SDK
base_facebook.php from The Facebook PHP SDK
HasLikedGraphic.gif
NoLikeGraphic.gif

You can also download our package of files from here with default settings, you will want to pay attention to the APPID and APP KEY later on so you can modify this file with your values. Obviously you will eventually want to change the graphics as well.

Put the files in a directory name of your choice and upload to your server. For example if you use http://yourdomain.com as your main website, you would want to put the files in http://yourdomain.com/fblike/ or similar. This will also let you configure separate statistics on the facebook users if you have local statistics on your server and know how.

Test to make sure that they load, for example http://yourdomain.com/fblike/index.php . You should see the Not Liked image when you test it. Centered on your screen.

Now, Login to facebook under the account that owns the fan page.

Now, visit the Facebook Developers center (http://developers.facebook.com/). If you haven’t already registered for this, you will have to do so now. Don’t worry it’s easy!

Once you’re in the Facebook Developers interface, then you will want to click the ‘Apps’ item on the top of your screen.

Now you can create an application. Do so by clicking ‘Create New App’

A popup window will appear. Enter the application name you wish to use. For our purposes we used ‘Like Flewid Inc’. Accept the terms, and then click continue. Enter the captcha code and click submit.

Next you’ll be presented with your app page. This is where you do most of the editing.

First we should note down the ‘app key’ and ‘app secret’ for our application. Remember our files from step 1 and 2 – you’re going to want to open up the index.php now, and find the two lines for the APP ID and APP SECRET and change them to the one for your application. Save the changes to the server so the file is live.

Second we set both large and small icons to something more appropriate. The large icon is 75×75 and the small icon is 16x16px.

Now you’re going to want to setup the basic settings like the namespace and display name. They are all explained in the interface if you want more detail but it’s fairly straight forward.

Here’s what ours looks like after configuration.

Next we’re going to click the checkmark next to Page Tab below the basic information section.

This is where we’ll setup the information about our new Iframe page. It is important to note that the URL used here is important. If your site defaults to http://www.domainname.com your application must use the www., however if your site defaults to http://domainname.com your application must not use the www.

Also note, the secure page tab URL isnt’ required until October 1st, 2011. After that date it will be required for your app to function properly.

Advanced users might have an Edit url for the page, but we don’t need one for our purposes.

This is what ours looks like after configuration

Next click on Save Changes.

After saving your changes go to the left hand menu to the Advanced section.

Ensure your settings are like ours – entering your own url for the like page, and the contact information. The important part is the rest of the default settings. If you have an older fan page, some of your settings may be set differently than the new way of doing things.

Click Save Changes. Your application is now setup.

Now if you look over in the left hand menu of this screen you will see the Related links section, and in there is the ‘View App Profile Page‘. Yup, your application gets a page just like anyone else on Facebook. Go Click this link.

Now you’ll see the Application profile page. It will probably look similar to this. You are free to customize this or brand it appropriately. We won’t cover this now as it probably won’t be visited.

On this page, you’re going to want to scroll down in the sidebar and find the ‘Add to my Page’ link. Click on this link.

In the popup window that appears. Find the page you created for your business and select it.

It will ask you for a tab name. Enter it and click submit. Now you will have added the application to your fan page.

Visit your fan page, by logging in to Facebook as the account holder of the Fan Page and looking at the left hand side of the screen for the Fan Page listing, then click it.

Click on ‘Edit Page’ in the top right hand corner of the screen.

Here you will have to Customize a couple things. Go to the Apps item in the left hand menu.

Your app should be listed under Added Apps, or under ‘Apps you may like’ – if the latter, then click ‘Add App’ now and give it a Tab Name. We simply chose ‘Like Flewid’. Click Save Changes if required.

Now go to ‘Manage permissions’ on the left hand menu.

Make sure that the default landing tab is set to the new app you installed on your page. In our case, this is ‘Like Flewid‘. This makes sure that when people hit your fan page they will automatically see that tab instead of the wall.

Click Save Changes on this page.

Now your page, and your files should be setup, so it’s time for testing.

First “Unlike” your page, and then hit the refresh button just to be sure that you don’t like it anymore. If you’re not already on your new application tab/menu item, then click over to it now and make sure the image for people who haven’t liked your page is visible. Ours looks like this;

Now click like. And you should automatically see the ‘user has liked page’ image instead.;

You can also test by logging out of facebook completely and viewing your page as a complete visitor. Or, you can ask friends to visit your page with the added side benefit of them remaining fans of your page :)

We hope you enjoyed this little tutorial. We’re going to have some exciting new ones coming up too with information on how to extend your fan pages, and use the analytics that Facebook provides. Please leave us feedback below or let us know any questions you may have on this tutorial.

Comments

  1. Sugel says:

    With the new changes you do not need to use the session key and sig parameters anymore and instead should use the access token parameter which takes the access token obtained when the user logs into Facebook with the xmpp login extended permission. .We launched 960px photo uploads to our users recently meaning that if a user uploads a photo on http://www.facebook.com itll be stored on our servers at 960px resolution and when someone views that photo on http://www.facebook.com itll be shown in that same resolution.

  2. jason says:

    Thanks for the great help. Question, how do you make it so
    - The default “unliked” is the App (probably permissions)
    - But if the person already “liked” the page, they bypass the app and goto the wall

    Any help is appreciated
    thanks
    jason

    1. Flewid Inc. says:

      Hi Jason,

      The howto should have it automatically defaulting to the graphic page if you followed all the steps.

      If they’ve already liked the page, it should be also going directly to the wall, are you not seeing that?

      Thanks,
      Matt

  3. kelly says:

    How would I do html instead of just an image? I have css styling etc I need to use. Thanks!!!

    1. Kenton says:

      I would like to know how to do html instead of just an image as well.