Remove scrollbars and get your facebook app/canvas iframe to autosize to height – FB.Canvas.setAutoGrow()

Note: This works with the new facebook 810px width canvas page!

If you have created a Facebook application that has an canvas/iframe page tab and you want the frame to automatically grow to the size of the content, you can use FB.Canvas.setAutoGrow() within the frame. If you haven’t already created a Facebook app tab, follow this tutorial first: http://www.dreamgrow.com/how-to-set-up-a-custom-facebook-landing-page/.

First of all you may need to edit your application’s settings, so go to https://developers.facebook.com/apps/ and click ‘Edit App’. On the menu in Settings -> Basic, scroll down to Page Tab and App on Facebook. Within the App on Facebook section you’ll need to make sure that Canvas Height is set to Fixed at 800px. The Facebook developer reference states that FB.Canvas.setAutoGrow will only work when Canvas Height is set to “Fixed to (800)px”. Note: If you don’t use the App on Facebook option and only have the Page Tab, you won’t need to fiddle with the height settings.

Next you will need to insert the FB.Canvas.setAutoGrow() function within the of your code. The Facebook developer site states that you should use this code:

1
2
3
4
5
6
7
window.fbAsyncInit = function() {
  FB.init({
    appId      : 'YOUR_APP_ID', // App ID
    ... // Other configuration variables here
  });
  FB.Canvas.setAutoGrow(); //<--- This
}

However, I noticed that setAutoGrow() will not properly work on some browsers (mainly Firefox) if you put it within window.fbAsyncInit function like how the Facebook developer site states. Instead, run FB.Canvas.setAutoGrow() on window.onload instead – this will ensure that the timer starts after the browser has finished rendering the document and the DOM is ready:

1
2
3
4
5
6
7
8
9
10
window.fbAsyncInit = function() {
  FB.init({
    appId : 'YOUR_APP_ID', // App ID
    ... // Other configuration variables here
  });
}

window.onload = function() {
  FB.Canvas.setAutoGrow(100); //Run the timer every 100 milliseconds, you can increase this if you want to save CPU cycles
}

The Facebook frame should be auto growing to the height of the content now. If it isn’t, leave a comment and I will help you. Even though the frame height is sizing automatically, you may still have a vertical scrollbar visible. To remove this, set overflow:hidden on the body:

1
body {overflow:hidden;}

Iframe Code Example

Below is an example of how your page should look, an example of the application can be seen here: http://www.facebook.com/pages/atomikucom/250331981713993?sk=app_236448559776994.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>Title Here</title>
    <style>
      body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */
    </style>
  </head>
  <body>
    <div id="fb-root"></div>
    <script src="https://connect.facebook.net/en_US/all.js"></script>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId : 'YOUR_APP_ID', //Your facebook APP here
          cookie : true // enable cookies to allow the server to access the session
        });
      }

      window.onload = function() {
        FB.Canvas.setAutoGrow(91);
      }
    </script>

    <p>Your content here...</p>
  </body>  
</html>

If you have any problems, or found this post helpful, leave a comment and I will try to help.

Edit Feb 13th: I have updated the above complete iframe sample to demonstrate how it works. Tested in Firefox, Opera and Chrome on mac.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.