« PREV: Ch2 Band...
Green State TV... :NEXT »

How to Create a Custom Facebook IFrame Tab

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.

Posted In

Tutorials

21 Comments

  1. Andrei July 8, 2011

    Hi, Daddy. Why did you miss
    padding:0
    in CSS?

    Reply
  2. Neel July 9, 2011

    Excellent tutorial thanks for sharing.

    Reply
  3. Mike July 29, 2011

    …forgot…I was trying a static FBML app before I tried yours and the FBML tab is showing. The FBML is also showing in my list of apps in admin, but not the one I created for iframe. Also, the template I am using (I know without seeing the code it’s hard to comment) is cut off on the right by about 200 pixels ??? helpusadoptsamara DOT com/facebook/

    Thanks,

    Confused and frustrated at 3:30 am :)

    Reply
    • daddydesign July 29, 2011

      Your app is getting cut off because you have it too wide. FB iframe tabs can only be 520 pixels wide.

      Reply
  4. Mike July 29, 2011

    Thanks Mr. D. …wonder why someone would offer one at 760 px ???

    Any clue on why my iframe tab is not showing up?

    Reply
  5. Crystal August 4, 2011

    I am unable to get my new tab to appear in the left column. I’ve gone through all the steps twice. Any advice?

    Reply
  6. Crystal August 4, 2011

    Never mind. I figured it out. I didn’t add the app to my page yet!

    Click on Application Profile Page and then look for a link down the left side called ADD TO MY PAGE you will get a popup which has all the pages you are an admin of, click the add to page button and your done. Make sure you add it to your Facebook Page and not the App page you just created!

    Reply
    • daddydesign August 4, 2011

      Thank you for pointing this out this step. We will include this into both of our tutorials.

      Reply
  7. Sean August 8, 2011

    Thanks for this great tut…
    I have a problem though. My index.php file is exactly like yours, and it displays within Facebook. Where you have “Start Coding here”, I have a link stating “Login” ( code Login ). When the user clicks on it, it runs through a authentication process (login.php -> confirm_login.php -> memberhome.php). memberhome.php is the landing page for my app, but it does not display within an iframe in facebook. It displays, but ‘on its own’.

    Any ideas?

    Reply
  8. vega September 14, 2011

    Thanks for your tutorial.
    I have a problem. I did follow your steps and when I click the app tab on my fan page then It shows a “facebook picture” and a “Go to Facebook.com” link below without the contents of my app on fan page. What should I do to solve it?

    Reply
  9. pixelhalunke September 20, 2011

    i did everything again and again. but it is still showing me the same message:

    FBML Error (line 18): illegal tag “base” under “fb:tab-position”
    FBML Error (line 21): illegal tag “body” under “fb:tab-position”

    could it be that Facebook changed something in the process?

    Reply
  10. Rick September 29, 2011

    Do you know of any way to keep the Tab title from showing in the FB header when the tab is opened. Often the tab title is redundant. For example,

    FB Page name: Bob’s Burgers
    Tab name: Welcome to Bob’s Burgers

    FB tab title: Bob’s Burgers – Welcome to Bob’s Burgers

    I want the second part “Welcome to Bob’s Burgers” not to show.

    I know you can manipulate the names, but I’ve seen tab pages where the tab title does not show, so there must be a way.

    Reply
  11. Pingback: How to use a Fan Gate on your Iframe Tab to Hide Content until Someone ‘Likes’ Your Facebook Fan Page | Daddy Design

  12. mike February 6, 2012

    Hi, it works except that my css file (style.css ) seems not to load and just have a plain html content.
    When i test my files on my local wamp server everything work and display fine with styling.
    Any clue to help me ?

    Reply
  13. vivek March 2, 2012

    I have read so many tutorials on the same topic but i found it more explanatory and superb

    Reply
  14. CP June 14, 2012

    I have tried and re-tried and cannot get this to work. Tab opened fine when I had a basic html page as the URL — but want to upgrade to .php so I can fan-gate. Copied your code exactly, subbed out ID, etc. PHP file opens fine directly from server. But if I try to go through the facebook app I get a “404 — Not Found” error. Any ideas?

    Reply
  15. CronGM June 19, 2012

    Thanks. Even tho’ I had created apps once or twice already, this serves as a great reminder and explains a couple of things that can be confusing.

    Reply
  16. Steven Novinger August 10, 2012

    When is facebook supposed to make the timeline mandatory?

    Reply
  17. andrea November 26, 2012

    thanks for this useful tut.

    Reply
  18. khushal December 15, 2012

    Greate job..!!!

    Daddy always daddy

    Reply

Leave a Reply

Your email is never published nor shared.
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>

Notify me of followup comments via e-mail. Or subscribe without commenting.