Blog

How to Create a Custom Facebook IFrame Tab

Now that no new FBML Facebook tabs are able to be created, Facebook users must now use the IFrame method in order to add custom tabs to their Facebook Fan Page. IFrame tabs are definitely a bit more complicated to create compared to FBML tabs, mainly due to the fact that you must set up a Facebook Application (CLICK HERE to see our tutorial on how to set up a Facebook Application for your Custom IFrame Tab). Even though they may be more difficult to create, there are numerous advantages to using IFrame tabs over FBML tabs; code resides on your own server, flash does not require click to activate, limitless Javascript opportunities, and more. In our previous tutorial we taught you how to set up your Facebook Application, now we are going to teach you how to create the actual Custom Facebook IFrame tab and how to properly sync it with your application.

*PLEASE NOTE: In order to complete this tutorial, you should have a basic knowledge of XHTML and CSS. This tutorial will only teach you how to set up all files necessary to properly create a Facebook IFrame tab, all other design and coding is up to you. If you feel that you cannot complete this tutorial, contact us in order to find out about our Custom Facebook IFrame Tab design rates.

Step 1: Create the Basic Facebook Application

In order to create a Custom Facebook IFrame Tab you will first need to set up a Facebook Application. If you have not already created your application, do so now. If you do not know how to set up a Facebook Application for your Custom IFrame tab, please first read and complete our tutorial ‘How to Set Up a Facebook Application for your Custom IFrame Tab’.

Step 2: Setting Up the Basic PHP File

You should now have your Facebook Application up and running and ready to start creating your actual IFrame Tab. Assuming you have read and completed our tutorial, on how to set up your Facebook Application, you should now have a blank ‘index.php’ file ready to edit. The first thing we will do is add the normal necessary HTML code to get our PHP file working. Open your PHP file and add the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<base target='_blank' />
</head>

<body>

<div id="container">
   
  START YOUR CODING HERE

</div>

</body>
</html>

You should now have a basic functioning ‘index.php’ file. This is all very basic HTML and anybody who knows anything about HTML should have no problems understanding what we’ve done here.

Don’t forget to fill in your page title, even though it’s not necessary for your IFrame tab it’s always good practice to fill this in rather than leave it blank.

Inside of the ‘head’ tag you will notice that we have linked to an external stylesheet named ‘style.css’, this will be referenced later in Step5. One item located inside of the ‘head’ tag which you may not be familiar with is the usage of ‘base target’. Since we are creating an IFrame, all links will be targeted inside of the IFrame, by using ‘base target’ and setting it to ‘_blank’ we have now told all links inside of our IFrame to link externally to new pages. There may however come a time when you need to actually have a link target inside of your IFrame but still want all other links to link externally. You can achieve this by using an individual ‘base target’ on the link you want to link inside your IFrame and setting it to ‘_self’ (**see example below).

Finally, once you have completed all steps of this tutorial you will actually start creating your Custom IFrame code inside of the container div where it says ‘START YOUR CODING HERE’.

*PLEASE NOTE: Make sure you use PHP files when creating your IFrame Tabs, even though we are not actually using any PHP in this tutorial, Facebook plays much nicer with PHP files. Also if you want to do something like FAN/NONFAN content you will need to use specific Facebook PHP code to achieve this (look for our tutorial ‘coming soon’ on how to create FAN/NONFAN content for IFrame tabs).

**EXAMPLE:

<a href=”YOUR LINK HERE” target=”_self”>TEXT OR IMAGE</a>

Step 3: Adding the Facebook Javascript

Now that we have a working ‘index.php’ file, we can add the Facebook Javascript that is needed to help power our Custom IFrame Tab. This bit of Javascript is what will actually make our ‘index.php’ file communicate with our Facebook Application. Add the following script just before the body close tag inside of your ‘index.php’ file:

<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>

Make sure you change where it says ‘INSERT YOUR APP ID HERE’ to your actual unique App ID. Your App ID can be found inside of your actual Facebook Application by logging into your Facebook account, visiting https://www.facebook.com/developers/, and then selecting your application from the ‘My Apps’ list on the right. Failure to do so will result in your IFrame tab not showing up on your Facebook Fan Page.

Step 4: Eliminate Unwanted Scrollbars Using Javascript

This script will help resize the IFrame canvas to eliminate the unwanted scrollbars that typically result from using an IFrame. It will dynamically adjust your IFrame’s size so that you do not need to actually set a default height. This is definitely an added bonus for users whose tab will feature updatable content that does not always conform to a certain size. Place the following code inside of the ‘head’ tag inside of your ‘index.php’ file:

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

No changes are required after inserting this code, just drop it in and you’re good to go.

Step 5: Required CSS

Create the ‘style.css’ file that we referenced in Step2 and put it alongside your ‘index.php’ file. Add the following CSS to your file:

body{ 
margin: 0; 
overflow: auto;
}
#container{ 
width: 520px; 
margin: 0 auto; 
overflow: hidden; 
position: relative;
}

The CSS added to the ‘body’ is the most important; this will help ensure that we properly eliminate the unwanted scrollbars from our tab. Since our actual IFrame tab area is only 520px, you should set the ‘margin’ to 0 which will help eliminate any unwanted extra margins from being added to our IFrame. Failure to remove any default margins from your file may result in shifted or missing content when your IFrame is viewed on your Facebook Fan Page. By adding the ‘overflow’ attribute to our ‘body’ and setting it to ‘auto’ we are ensuring that our IFrame tab will properly resize, failure to add this will result in a very unstable IFrame tab. You may notice that if you are only testing your IFrame tab on a remote server and not on Facebook, when your content is long enough you are not able to scroll. By temporarily removing the ‘overflow’ attribute, while testing, this issue will be fixed. Just make sure that you remember to add the ‘overflow’ attribute back when you’re finished testing.

The styles we added for the container div are only a suggestion; you may alter this in any way you see fit. It is definitely good practice to make sure that the width of your container div is set to 520px, this will help ensure that all of your content will fit within the area allowed by Facebook.

Step 6: Upload, Test, and Start Your Coding

Now that you have a basic functioning ‘index.php’ file and stylesheet, upload them to the location on your server that you specified in your Facebook Application for the ‘Canvas’ and ‘Tab’ URLs. Failure to upload these files in the correct place will result in a broken IFrame tab. After uploading the files, go to your Facebook Fan Page, find your tab in the menu on the left side and if all steps were completed properly you should see ‘START YOUR CODING HERE’. Now that your IFrame tab is fully functioning, you can begin your actual custom coding.

Complete Code for your ‘index.php’ File:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YOUR PAGE TITLE HERE</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

<base target='_blank' />
</head>

<body>

<div id="container">
   
  START YOUR CODING HERE

</div>


<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'INSERT YOUR APP ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});

window.fbAsyncInit = function() {
FB.Canvas.setAutoResize();
}
</script>


</body>
</html>

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible. Please do not email us with problems regarding this tutorial, only comments will be responded to.