How to get rid of vertical scrollbars in a Facebook fan page application

tom Tom, 12th September 2011

More and more companies are getting customised Facebook pages, like ours! But when you create a basic Facebook fan page application you might find that the lovely design you've created gets horrible vertical scroll bars added along the right hand side. Here's a quick 'howto' to explain the steps you need to take to reveal the whole of your design when your fan page loads up and loose those pesky scroll bars once and for all.

If you have no idea what this is about, but want something pretty on Facebook, please get in touch.



  1. Use CSS to hide the excess content in your body tag. I.e. overflow:hidden

    body{width:520px;margin:0;padding:0;border:0;overflow:hidden;}

  2. Load up the Javascript SDK to make all of Facebooks javascript functions available to your page. The one we're interested in is FB.Canvas.setAutoResize();

    To load up the JS SDK you need to add the following to the bottom of fan page:

    <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js"></script> <script> FB.init({ appId : '238735892839415', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse XFBML channelURL : 'http://WWW.MYDOMAIN.COM/channel.php', // channel.php file oauth : true // enable OAuth 2.0 }); </script>

  3. You'll need to create a channel.html file which is referred to above. The code you'll need to add to this file is as follows:

    <?php $cache_expire = 60*60*24*365; header("Pragma: public"); header("Cache-Control: maxage=".$cache_expires); header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT'); ?> <script src="http://connect.facebook.net/en_US/all.js"></script>

  4. At this point you should hopefully have all the functions from the JS SDK available to use on your fan page, so you can now call the FB.Canvas.setAutoResize() function. The example below uses jQuery to wait until the page has loaded first. Stick this code in the header of your fan page to execute the setAutoResize function.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" /></script> <script type="text/javascript"> $(document).ready(function() { FB.Canvas.setAutoResize(); }); </script>

More information about the Facebook Javascript SDK can be found here:
https://developers.facebook.com/docs/reference/javascript/

To see this in action, take a look at our Facebook Fan page and like us!

More from our blog

18a win Netty 2024 award for Activibees.com

18a win Netty 2024 award for Activibees.com

29.02.24

We are delighted to announce that 18a has been recognised for its outstanding work in the "Web Design Agency of the Year - UK" category at… Read →

Generating an Effective Content Security Policy with your Laravel React App

Generating an Effective Content Security Policy with your Laravel React App

27.02.24

I recently had an interesting problem to solve. I'd built a brand new author website on a shiny installation of Laravel 10, utilising its out-of-the-box… Read →

If your WordPress website looks broken, it could be because of this.

If your WordPress website looks broken, it could be because of this.

15.02.24

WordPress is the incredibly popular blogging-come-full-website platform that powers over 835 million websites* in 2024. It's functionality is extended by plugins, and one such very… Read →