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!