Simplifying iFrame Tabs for Facebook Fan Page with Code

Over the past week or so, it’s been exciting to help so many people with their iFrame for Tabs Facebook Fan Page issues.

After dozens of direct and indirect support projects with others, and working on my own iFrame tab projects, I’m seeing a pattern of code start to emerge.

A more adept programmer would have known this from day one, guess it just takes me a little bit longer to figure out since I’m not “quote – unquote” a programmer.

But now, I can literally build a new iFrame tab for a Facebook Fan Page in just a matter or minutes. Primarily because there are certain sections of the code, at least the code I use, that is always the same.

For example, the “header” and “footer” on each new app that I build using Notebook is exactly the same with the one exception of the height attribute.

And now I’d like to share with you the code that I’ve been using consistently for all of my apps – and like I said, the header and footer are the same throughout:

The header code for iFrame tab apps:

<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({ width: 520, height: 1500 }); // Live in the past
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1500 }); // Live in the past
}
</script>
</head>

I’ve highlighted in red the only part of the header code you should have to change for your own iFrame tab app.

You can simply copy and paste the code above into Notepad to start your own app. Just make sure, if you’re getting a scroll bar, you increase the “height” attribute.

The Content of the iFrame Tab app

The next section is the code that I’m using for the content section of this particular iFrame tab.

You’ll have to figure out the code for your own iFrame app – or you can email me your project concept at admin@socialmediaseo.net.

Here’s the code that makes up the content of the app:

<div> <!– float container –>

<div style=”clear:both;”></div>

</div>

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”http://www.facebook.com/CornerstoneAthens” show_faces=”false” width=”500″ action=”recommend”></fb:like>

<br/><br/>

<b>Previously recorded services at Cornerstone Church of God</b>

<div style=”float: left; padding:5px 0px 0px 0px;”>

<embed src=”http://blip.tv/play/g_c0ApmgOQ%2Em4v” type=”application/x-shockwave-flash” width=”350″ height=”350″ allowscriptaccess=”always” allowfullscreen=”true”></embed>

<div style=”clear:both;”></div>

<div style=”float: left; padding:20px 0px 0px 0px;”>

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=191773364177093&amp;xfbml=1″></script><fb:comments numposts=”10″ width=”520″ publish_feed=”true”></fb:comments>

</div>

Again, you can copy and paste the code above into your Notepad in order to have somewhat of a template to follow.

Just make sure you change out the specific code for the elements I’m using, otherwise you’ll my content on your Facebook page.

The footer code to close it out:

Definitely copy and paste this code to use at the very bottom of your page:

</body>

</html>

And that’s it… if you need help building your iFrame app from the ground up, check out some other iFrame tab for Facebook Fan Page articles I’ve written.

Here’s the whole thing together now – in case you need to see the complete picture:

<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({ width: 520, height: 1500 }); // Live in the past

}

// Do things that will sometimes call sizeChangeCallback()

function sizeChangeCallback() {

FB.Canvas.setSize({ width: 520, height: 1500 }); // Live in the past

}

</script>

</head>

<div> <!– float container –>

<div style=”clear:both;”></div>

</div>

<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”http://www.facebook.com/CornerstoneAthens” show_faces=”false” width=”500″ action=”recommend”></fb:like>

<br/><br/>

<b>Previously recorded services at Cornerstone Church of God</b>

<div style=”float: left; padding:5px 0px 0px 0px;”>

<embed src=”http://blip.tv/play/g_c0ApmgOQ%2Em4v” type=”application/x-shockwave-flash” width=”350″ height=”350″ allowscriptaccess=”always” allowfullscreen=”true”></embed>

<div style=”clear:both;”></div>

<div style=”float: left; padding:20px 0px 0px 0px;”>

<div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=191773364177093&amp;xfbml=1″></script><fb:comments numposts=”10″ width=”520″ publish_feed=”true”></fb:comments>

</div>

</body>

</html>