Facebook Tab – Removing Scrollbars

In the Basic settings for your app in fb make sure the Canvas Height is set to “Fixed at (800)px” in the App Dashboard.

Just below the opening <body> tag add the Facebook Javascript SDK:

<div id="fb-root"></div>
 <script>
 window.fbAsyncInit = function () {
 FB.init({
 appId: 'YOUR_APP_ID', // App ID
channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
 status: true, // check login status
 cookie: true, // enable cookies to allow the server to access the session
 xfbml: true // parse XFBML
 });
// Additional initialization code here
 FB.Canvas.setAutoGrow();
 };
// Load the SDK Asynchronously
 (function (d) {
 var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
 if (d.getElementById(id)) { return; }
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 ref.parentNode.insertBefore(js, ref);
 } (document));
 </script>

Replace YOUR_APP_ID with the app_id of your app.

The FB.Canvas.setAutoGrow(); line tells facebook to increase the size of the page as the content grows.   Note it’s a one way process, it won’t shrink the page.

See here for more details:

http://developers.facebook.com/docs/reference/javascript/

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>