[Tutorial] How to create Facebook iFrame Tabs for Timeline Width (810px) with Fangate and Share Button in 2012

by Daniel Setzermann
Facebook iFrame Tab Tutorial How-To

Update: I wrote a post on how to build a tab in 2013 that also supports the mobile view in the article: How to create a mobile (and desktop) facebook page tab (2013)

If you have a Fan-Page for your Company, Blog or any other Product that has Customers or Fans, you’ve probably also wanted to give them some special content through your Fan-Page. In this Tutorial/How-To I’m going to show you how to create Facebook iFrame Tabs with Fangate for free (because you’re doing it yourself).

You’re lazy and just want to download the whole example with a pdf-tutorial? I prepared a downloadable .zip file, to get it you’ll need to spread the word by tweeting about it!


1. Step: Prepare your webserver for the app.

Disclamer before we start: So you need some webspace to display that content of the tab. After all it’s only an iframe, so Facebook won’t take care of hosting your information.

You need a webspace that is able to serve the content with a secure HTTPS-Connection.

After October 2011, Facebook requires you to serve your content through a secure connection. If you can’t deliver that, fear not, you have other options: Use one of the many Apps out there to help you out. The disadvantage? The are always branded by another company and will therefore not look as professional. Also complex php-mysql-magic like submitting a form to your database won’t be part of the deal.

Your server is ready for HTTPS? Let’s go then: First you create a folder on your Webspace (probably via ftp) like so: http://www.yourdomain.com/facebook/fb-app/

This folder will need some content, namely the Facebook-PHP-SDK which you can download here: facebook/facebook-php-sdk · GitHub by clicking that button:

Unzip the file and throw the contents of the zip-file in the folder for your app that you created on your webspace. So if you head to /facebook/fb-app/ on your webserver the folder should now incorporate these files:

Next up: We prepare a simple page that will already correctly load the Facebook-PHP-SDK and display an alltime classic: „Hello World“.

In the folder for your app next to the other files you just threw in there create a new one: index.php This will be the file that displays your content, so this is what we’re working on in the following steps.

Copy the following code into your new index.php


2. Step: Create an App in the Developer-Area of Facebook

Head over to https://www.facebook.com/developer. After re-entering your password (if you’ve never been in the developer-area) install the official Developer-App by clicking „Go to App“. You are now ready to create your first App on Facebook, so hit the button:

Create New App

You’ll be greeted with the following screen and asked to enter an App Name and App Namespace. This App Name and App Namespace won’t be visible to your users, if you use this app only for the purpose of displaying content in an iFrame Tab. So use something that describes your content but don’t struggle too long with it. It’s mostly only for your eyes.

Edit App Name and URL

After you hit „Continue“ you’ll see an overview of the app that you just created.

App Settings Overview

Find the two long numbers at the top of the page, namely „App ID“ and „App Secret“. If you check the content of the index.php that you just created, you’ll notice that there are two placeholders for those two numbers marked by APPID and APPSECRET. You guess it, you have to copy those numbers of your app on facebook into your code. After the copy-and-paste work you should end up with something like:

These numbers are obviously fake and only for demonstration purposes. You have to take the numbers of your own app


3. Step: Configuration of your app to show the content of your index.php on your webspace.

You should still have the overview of your app on facebook in your browser. If not, head there now: Facebook Developer Center. Click on the topmost App and click „Edit Settings“.

First of all we need to update the basic settings:

Basic Settings Facebook App

The only thing that you need to add, is the App Domain. It’s important that you type it like the screenshot shows (without http://www. and without trailing slash)

Next part is „Website with Facebook Login“:

Website Settings Facebook

This time you need to type your URL with http://www. and also add a trailing slash to the end of the URL (Really, this is mandatory)

The next part is already the last part (at least concerning the settings), go to „Page Tab“:

Page Tab Settings Facebook

Again, put in your information as the screenshot suggests. Always keep in mind that you can and should of course take completely different file-path names and Tab-Names. These are just for demonstration purposes.

As you can see on the screenshot, you can now also define an image for the tab. The size is 111x74px, but you can also do that later by going back to the developer-center and relocating those settings.


4. Step: Adding the Tab to your page.

Now that everything is in place, we want to add that Tab to our page. Facebook still has not managed to give us a button for that action, but we can achieve it with the following URL:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Again YOUR_APP_ID and YOUR_URL need to be replaced with the corresponding information. Be sure to add your URL like so: http://www.yourdomain.com

Copy the URL into your browser, change the two parts to your information and hit enter. You’ll get the following dropdown:

Page Select Dropdown Facebook

Select the page, you want the Tab to be added to and click „Add Page Tab“. You’ll be redirected to your website but that’s ok. Everything should have worked just fine. I suggest that you create some kind of developer page for yourself. The Tab will only display „Hello World“ after all.

Thats it (almost)

You should now be able to go to your page and click on the Tab and it should also display a nice big „Hello World“

Hello World Tab


What about that „Fangate“ you promised in the title, you ask?

Sometimes you don’t want to have your content blocked by a fangate, that’s why the tutorial was done without a fangate. These are the edits that you’ll have to do, to add a fangate to the tab.

The index.php needs to be changed to the following code. Don’t forget to change the APPID and APPSECRET accordingly


Removing the scrollbars of the iFrame

Soon enough you will find out that Facebook will display really ugly scrollbars when your content is either higher or wider than the standard values (810x800px) We want to remove those scrollbars and also want the height of the iframe to automatically grow as high as the content.

First we need to style the body-tag accordingly. Add this somewhere between opening and closing the head-tag:

Next, we need a little bit of javascript-magic to do the rest, add the following code shortly before you close the body-tag. Don’t forget to replace YOUR_APP_ID with the app id of your application again.

Done! No more scrollbars, yeah!


Extra Goodie: Add a Share-Button with your desired content to your app, that displays a nice facebook-styled popup and shares right to the wall of the user:

Page Tab Sharing PopUp

This one is a little bit tricky. This is the code that were going to work with as a template:

Let’s go through this one:

  • Replace every YOUR_APP_ID in the code with the app id of your new application.
  • YOUR_PAGE_USERNAME needs to be replaced twice by the username (the name in the url) of the page, where the tab is located. If you have not claimed a username for your page (Here) yet, the link-parameter looks a little different, more like: link=http://www.facebook.com/pages/YOUR_PAGE-NAME/121231231321312?sk=app_YOUR_APP_ID (The number of course is random here and is different for your Page)
  • YOUR_IMAGE_URL is a URL to a picture on your webserver that you want to use as a thumbnail. The size is supposed to be 85x100px and can be .gif, .png or .jpg.
  • name, caption and description can be filled with the messages that you want to display, but they need to be url encoded. Luckily there is a nice tool to do just that here. Just be sure to always have the & letter at the end, eg. name=YOUR_URL_ENCODED_MESSAGE&

Download the whole thing

I prepared a downloadable .zip file that contains two examples (one with fangate, the other without) each with the Share-Button. The PHP SDK is already in it, so you really only need to create an App and fill in the information in the index.php.

You can download it by „paying with a tweet“. The .zip file also contains this Blog-Post as a PDF-File.

  • Pingback: allfacebook.de | Tutorial: Erstellen eines iFrame Tabs für die Facebook Timeline inklusive Fan-Gate und Share Button

  • Hanna

    Hi, thanks for this tutorial.
    you helped me a lot for removing teh scroll bar.

  • http://www.basisreclame.nl Mark Botter

    Hey man,

    Thanx for the great tut!
    One more thing that I just cant seem to fix: Do you know how to add the facebook ‘like this page button to the uppersection of the page-tab canvas? Its normaly on the leftside next to the name of the page and the app/tab.

    It really bothers me because wahts the use if no one can like my app/tab :-S

    Thanx man so far, be great if you can help me with the last bit!

    Cheers

    Mark

    • Daniel

      Hey Mark, what are you trying to achieve. A “like-button” for this specific tab/app? Unfortunately thats not possible. The URL of your Tab/App will always result to your Facebook-Page. The only thing that you can include, is a share-button. There’s a pretty good tutorial here. Cheers!

  • http://www.basisreclame.nl Mark Botter

    Hey Daniel,
    No I ment the like this page button. But apparently it doesn’t show immediately, because it’s there! So Thx!

  • http://www.basisreclame.nl Mark Botter

    Aaaand its gone…..
    Where IS that ‘Like this page’ button..?
    Here’s my link: http://www.facebook.com/StartMetGemak/app_544792872209217
    The button where the arrow point to. Can you help put it there?

    Thx man.

    Mark

  • Chrishu

    Great tut, thx for sharing !

  • http://www.w3nord.de Joachim

    Hat prima funktioniert. Vielen Dank!
    ;)

  • Pingback: How to create Facebook iFrame Tabs for Timeline Width (810px) |