Setting the height of iframe Tabs for Facebook profile Pages

Question

As we know that Facebook has introduced iframe Tabs for Pages. I have developed an application and added the tab of the application in a profile page, application tab is opened in an iframe according to the update "iframe Tabs for Pages". The problem is that height of the page is not adjusted and unable to remove the scrollbars to display the fully page without scrollbars. All the solutions which I found work for the Application canvas page but not for the Application Tab page.

How can we do that?

Answer 1

It's quite easy to achieve. You have to set up the application in the Facebook Integration tab as an IFRAME and the size of the frame as "Auto-resize".

Now, on your server, you have to add the following code before the </BODY> tag:

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
    FB.Canvas.setSize();
</script>  

This will auto resize it. It also helps if you add overflow:hidden to the BODY tag.

Answer 2

The following guide helped me through the same problem:

http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/

In short, do the following:

• Change your "IFrame Size" to "Auto-resize"

• Load Facebook's Javascript SDK

add the following code just before the </body> tag of your index page:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '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
});
</script>

• Use FB.Canvas.setSize()

Put the following code before the </head> tag:

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

That should do it, hope it helps!