Facebook page tab: hide scroll bars from iframe

In the following case, we are using an iFrame to render a page tab in our Facebook page. The page in the iFrame is hosted on a different server.

1. First of all, we need to setup the Facebook app canvas settings accordingly (in the advanced settings of the app):

2. Then using javascript we’ll ask Facebook to resize the frame automatically. Add the following code inside your page <head>:

1
2
3
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
      FB.Canvas.setAutoResize();
// ]]></script>

3. Finally, we need to force our body and html tag to avoid scroll bars. In your style sheet add the following:

1
2
3
4
5
body, html {

overflow:hidden;

}

or inline with the html code:

1
2
3
<html style="overflow:hidden;">

<body style="overflow:hidden;">

This has worked for me to remove all the scroll bars. It’s working on the 18th of October, but because Facebook keep changing their code, it may change in the future.

 

  • bob schecter

    This did it.
    With all the garbeldygook out there, this is the only explanation that worked. So many others just assume everyone out there is a developer – not so.

    Other than changing the AutoResize to AutoGrow,(per the latest change by FB) it was simple enough even for me.

    Thanks Guillaume

    • http://www.facebook.com/ Kierra

      Weeeee, what a quick and easy soluiton.

  • dome

    thanks a lot!