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>

  • Iamqueensblvd24

    Great post! The best way is to directly convert to iFrames bit.ly/fAiICq

  • Dorian Speed

    This is super-helpful! Thank you! I’m so mad that they are getting rid of Static FBML just as I was learning to use it. :) Oh, well.

    Can you clarify for me – if all I want to do is set up a custom tab on my page, do I now have to do that via an app that will ask users for permission, etc.? That annoys me…

    • Hi Dorian – no, your iFrame tab for your Facebook Fan Page will not ask for
      permission unless you’ve specifically added those FB tags and request it.

      The purpose of the iFrame tabs is to allow you – the admin – to build a more
      customized user experience on your Fan Page.

  • Hayley McCann

    So, just to clarify…if I were to take my modified version of the code above, upload it as an html file to a server, and directly link to that file as the canvas url. Would there be any other steps I need to complete to make my app? (Index files, etc)

  • Great Post, I have been struggling with the scroll bar issue. I have inserted code all over the place on my html page that seems to work for everyone else but I keep getting the scroll bars. Very frustrating. Thanks for your post and FYI – you are missing a tag in your full version of code above. P.S. I live in Atlanta and would love to hook up sometime and talk internet marketing and facebook.

    • Hi Todd (I’m assuming your name is Todd) – the way I’ve been able to resolve
      scroll bar issues, if the auto-size script isn’t working, is to simply add
      the height element manually (i.e. “height: 2000px”).

      This has worked 100% of the time for me – the auto-sizing script is not as
      reliable.

  • Muge Celik

    ok this is the code but where should i start? where am i writing these codes and how to transfer to my FB page? you should say something for beginners too. i am not html programmer :(