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
- on the left side choose You app
- than on the top right click on “Edit App” button
- On the left should be choosen: Settings -> Basic
- Go down into the section called: “Select how your app integrates with Facebook”
- Find setup for Page Tab and check if you have set correct width of used app layout (mine was 520px)
- Save changes, if anything changed
- Than on the left choose Settings -> Advanced
- 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">// <![CDATA[ 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 }); // ]]></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.
Great! This is exactly what I need. Unfortunately I am not able to find any more the canvas settings. The last section in the “Advansed” tab is Contact Info.
It has moved to Basic tab couple of days ago…