Get rid of scrollbars in Facebook canvas application

First of all, make sure, that you have correct settings in Your Facebook app setup. To check it, go to: https://developers.facebook.com/apps

  1. on the left side choose You app
  2. than on the top right click on “Edit App” button
  3. On the left should be choosen: Settings -> Basic
  4. Go down into the section called: “Select how your app integrates with Facebook”
  5. Find setup for Page Tab and check if you have set correct width of used app layout (mine was 520px)
  6. Save changes, if anything changed
  7. Than on the left choose Settings -> Advanced
  8. In the section “Canvas Settings” should be following setup for canvas height: fluid

If above described setup is ok, than we have to fix it in our application. It is simple, with two code snippets. Just add following before </body> tag (If You are not using Facebook init script already):

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script><script type="text/javascript">// <!&#91;CDATA&#91;
	FB.init({
		appId : '399179393429469',
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml : true // parse XFBML
	});
// &#93;&#93;></script>

And put this code just before closing tag :

  <script type="text/javascript">
	window.fbAsyncInit = function() {
		FB.Canvas.setSize();
	}
	function sizeChangeCallback() {
		FB.Canvas.setSize();
	}
	</script>

Now, If your page is coded correctly into desired width, You should not see scrollbars anymore in it.
Hope it helps.

You may also like