How to get rid of vertical scrollbars in a Facebook fan page application
12th September 2011
,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.
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;}
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>
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>
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!
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 →
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 →
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 →