Just did my first app since Facebook has forced timeline on everyone.

PROS: Full width page tabs.

CONS: Can’t make the page open on a page tab (AFAIK). Scrollbars if your page tab markup extends to 810px.

To fix the scrollbar issue you have to load the FB SDK and make a call to the FB.Canvas.setAutoGrow() function. This will push the iframe to the bounds of your markup, which if sized correctly, will make the scrollbars disappear.

Here’s the code:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : 'YOUR_APP_URL/channel.php', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
	// FB.Canvas.setAutoResize();
    FB.Canvas.setAutoGrow();
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

Include the code above just after the opening body tag. You’ll also need to setup a channel file, as referenced in the code above via the “channelUrl” option. According to the FB docs you want this to cache and it’s very important that the protocols match, so make them protocol independent. Eg. “//www.website.com/channel.php”.

Here’s the code for the channel file:

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

Also include overflow:hidden; in your CSS for the body tag so that there is no flash of scroll bars while we are waiting for things to happen when the page loads.

Reference: Facebook JavaScript SDK

Published on June 12, 2012