How To Create iFrame Tabs For Facebook Fan Pages

Here it is – one of the first tutorials on the web that gives you a step by step on creating a custom tab on your Facebook Fan Page using the new iFrames for Tabs feature.

Facebook announced the new iFrames for Tabs feature late last week, along with the announcement that current FBML apps for Facebook Pages will be deprecated by March 11th, 2010.  This means, after March 11th, FBML apps for Facebook Pages will no longer be accepted.

This also means that if you want to have a custom tab on your Facebook page, you’ll need to build it using the new iFrames for Tabs platform.

I’ve said before that I think this is a great new update because with iFrames for Tabs you can now fully integrate HTML, javascript, and iFrames into custom tabs.  With FBML apps, you were limited to only the set of acceptable tags for FBML.

How to build a custom Facebook Fan Page using iFrame for Tabs:

1)  You must be a verified Facebook apps developer

This isn’t as scary as it might sound, you just need to verify your profile in the developer’s community.

Click here to see how to become a verified Facebook apps developer – once you have completed these steps, come back here to continue on to #2.

2)  Go to Facebook.com/Developers

Now that you are a verified Facebook apps developer, it’s time to dive into creating your first iFrame of Tabs Facebook apps.

After you click the Facebook developer’s link above, you’ll need to click the “Set Up New App” button:

3)  Give your iFrame for Tabs app a name

The next screen you see is the first step in developing your app, and you simply need to give it a name > click “I Agree” (agreeing to Facebook’s terms of service) > and then click “Create App”

4)  Security check

After you hit “Create App” you will see the security box – type in the word verification to proceed:

5)  The “About” Tab

The first screen you come to after entering passing your security check is the “About” tab.

This is general information about iFrame for Tabs app like the “Name” of the app and “Description” of the app.

You can see I’ve named my app “Cornerstone Live” and gave it a description.

This is also where you can give your app a large and a small image:

Small image: the small image is what will appear in the navigation of your Facebook Fan Page – it’s good to add the small image because it will help make your Facebook Fan Page look a lot better.

The small image must be at least (16×16) pixels in size.

Large image: the large image is what is used when / if you ever submit your app to the Facebook app directory.  I won’t get into that in this post.

Don’t put anything for “Privacy Policy URL” or “Terms of Service URL” – and I’m using my email address as the “Contact email”

6)  Click “Facebook Integration”

After you’ve filled out the “Application Name”, “Description”, added images (optional), and added your “Contact Email” – now click on the “Facebook Integration” tab on the left.

So don’t click “Save Changes” – just click the “Facebook Integration” tab next.

If you do click “Save Changes”, you’ll be taken back to the app dashboard > just click “Edit Settings” (top right) to get back.

Again, you now need to click “Facebook Integration”

Step by Step in the “Facebook Integration” section:

A)  Core Settings

Your core settings will be filled out automatically for you – nothing to do here

B)  Canvas Page


The “Canvas Page” name is what is used for the base URL of your app on Facebook.

In my app, you can see I’ve used “ccoglive” as the Canvas Page – this means, if you visit “http://apps.facebook.com/ccoglive/” you will visit the Canvas Page of my app.

The name you put in that box will be what the app URL ends in.

Don’t get wrapped up in what you see when you visit the URL above… it’s not particularly relevant when you are building an app to add an iFrame tab to your Facebook Page.

which leads us to the next section, the “Canvas URL”.

When you visit the link above, the “Canvas URL” will load.

Again, for the purposes of generating an iFrames for Tabs for your Facebook Fan Page, what you see at the Canvas Page / Canvas URL is not relevant – at least in my example.

I’ve used “cornerstoneathens.cc” as the Canvas URL because it is the base URL of my actual URL that my iFrames for Tab app resides.

“Canvas Type”make sure you click “iFrame”

“iFrame Size”make sure you click Auto-resize

C)  Page Tabs

Tab Name: The name you put here will be the name that shows as the link in your Facebook Fan Page.

You can see I’ve named my tab “Live” – and here’s what it looks like on my Facebook Fan Page:

Page Tab Type: you need to click “iFrame”

Tab URL: to create my iFrame tab, I simply used Notebook (text editor) to build the HTML code for my page (see the code for my page below).

After I finished with the coding of my page, I named my page “ccoglive.htm”

And then via FTP I uploaded that page to the base URL (which is also the “Canvas URL”).

Now hit “Save Changes”

Adding app to your Facebook Page:

Now you’ve built your app and you’ve saved it, we need to get it added to your Facebook Fan Page.

From the dashboard page of your new app (which you should see after you hit “Save Changes) > click on the link that says “Application Profile Page”.

After you click that link, you’ll be taken to a page that looks a lot like a Facebook Fan Page – except it’s your iFrame tabs app page.

Find the link on the left that says “Add to my page” and click that:

Once you click “Add to My Page” a new window will pop up that shows a list of all of your Facebook Fan Pages that you “admin”.

Find the page you want to add your app to as a custom tab, and then click “Add to Page”.

Now visit your Facebook Fan Page and you should see your new iFrames for Tabs custom tab!

Final Result:

Click here to see my iFrame tab page live

****  Below is the code I used in the page I built using “Notepad”:

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”>
<head>
<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<div> <!– float container –>
<div style=”float: left; padding:0px 0px 8px 0px;”>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”http://www.facebook.com/CornerstoneAthens” show_faces=”true” width=”450″></fb:like>
</div>
<div style=”clear:both;”></div>
</div>
<div style=”float: left;”>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ height=”243″ width=”343″ id=”sn_player” align=”middle”>
<param name=”allowFullScreen” value=”true” />
<param name=”allowScriptAccess” value=”always” />
<param name=”wmode” value=”transparent” />
<param name=”allownetworking” value=”all” />
<param name=”bgcolor” value=”#000000″ />
<param name=”movie” value=”http://sermonplayer.com/swf/player45.swf”>
<PARAM name=”flashvars” value=”file=http://sermonplayer.com/build_xml_wzd_sn.php?player=7301_playlist-live-.xml&skin=http://sermonplayer.com/swf/modieus_arial_live.swf&backcolor=#000000&=Save&player_name=name (no punctuation)&controlbar=bottom&autostart=false&displayclick=play&icons=true&mute=false&repeat=none&shuffle=false&stretching=uniform&plugins=,yourlytics-1,update_playlist&viral.onpause=false&yourlytics.callback=http://www.sermonplayer.com/jw_callback.php” />
<embed src=”http://sermonplayer.com/swf/player45.swf” quality=”high” height=”243″ width=”343″ id=”sn_player” align=”middle” allowScriptAccess=”always” allowfullscreen=”true” bgcolor=”#000000″ wmode=”opaque” type=”application/x-shockwave-flash” flashvars=”file=http://sermonplayer.com/build_xml_wzd_sn.php?player=7301_playlist-live-.xml&skin=http://sermonplayer.com/swf/modieus_arial_live.swf&backcolor=#000000&=Save&player_name=name (no punctuation)&controlbar=bottom&autostart=false&displayclick=play&icons=true&mute=false&repeat=none&shuffle=false&stretching=uniform&plugins=,yourlytics-1,update_playlist&viral.onpause=false&yourlytics.callback=http://www.sermonplayer.com/jw_callback.php” pluginspage=”http://www.macromedia.com/go/getflashplayer”>
</embed></object><a href=”http://www.sermonplayer.com” border=”01″>  <img src=”http://www.sermonplayer.com/images/poweredby.gif” border=”0″ height=”1px” width=”1px”></a>
</div>
<div style=”float: right; align: left; padding: 30px 0px 20px 0px;”><span
style=”font-family:verdana;font-size:10.5px;”><b><u>Broadcast Times:</u></b><br>Sunday: 9am & 11am EST</span>
</div>
<div style=”float: left; padding:15px 0px 0px 8px;”>
<a href=”https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5137185″ target=”_blank”><img src=”http://cornerstoneathens.cc/wp-content/uploads/2011/02/paypal-donate-button.jpg”></a>
</div>
<div style=”clear:both;”></div>
<div style=”float: left; padding:30px 0px 0px 0px;”>
<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=185574388149574&amp;xfbml=1″></script><fb:comments numposts=”10″ width=”425″ publish_feed=”true”></fb:comments>
</div>
</body>
</html>

Preventing scroll bars in Facebook Apps / iFrame for Tabs:

When I first uploaded the app, there was an annoying scroll bar on my custom tab’s page.

The you need to use to remove all scroll bars and allow the page to adjust to the height of the page automatically is as follows:

<script type=”text/javascript”>
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
You can see it in the <head> of my code above.
Contact me:
With questions, email me at “admin@socialmediaseo.net”.
Or put questions in the comments below.