Setting the height of iframe Tabs for Facebook profile Pages

Ahmad picture Ahmad · Feb 15, 2011 · Viewed 39.1k times · Source

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

Landitus picture Landitus · Mar 2, 2011

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.