Remove scrollbars from Facebook App’s Canvas Page


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.

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:

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:

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:
body {overflow:hidden;}

Tagged with: ,
Posted in Facebook Apps Development

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow me on Twitter

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 442 other followers

%d bloggers like this: