Just did my first app since Facebook has forced timeline on everyone.<\/p>\n
PROS: Full width page tabs.<\/p>\n
CONS: Can’t make the page open on a page tab (AFAIK). Scrollbars if your page tab markup extends to 810px.<\/p>\n
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. <\/p>\n
Here’s the code:<\/p>\n
\r\n<div id="fb-root"><\/div>\r\n<script>\r\n window.fbAsyncInit = function() {\r\n FB.init({\r\n appId : 'YOUR_APP_ID', \/\/ App ID\r\n channelUrl : 'YOUR_APP_URL\/channel.php', \/\/ Channel File\r\n status : true, \/\/ check login status\r\n cookie : true, \/\/ enable cookies to allow the server to access the session\r\n xfbml : true \/\/ parse XFBML\r\n });\r\n\r\n \/\/ Additional initialization code here\r\n\t\/\/ FB.Canvas.setAutoResize();\r\n FB.Canvas.setAutoGrow();\r\n };\r\n\r\n \/\/ Load the SDK Asynchronously\r\n (function(d){\r\n var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}\r\n js = d.createElement('script'); js.id = id; js.async = true;\r\n js.src = "\/\/connect.facebook.net\/en_US\/all.js";\r\n d.getElementsByTagName('head')[0].appendChild(js);\r\n }(document));\r\n<\/script>\r\n<\/pre>\nInclude 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”. <\/p>\n
Here’s the code for the channel file:<\/p>\n
\r\n <?php\r\n $cache_expire = 60*60*24*365;\r\n header("Pragma: public");\r\n header("Cache-Control: max-age=".$cache_expire);\r\n header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');\r\n ?>\r\n <script src="\/\/connect.facebook.net\/en_US\/all.js"><\/script>\r\n<\/pre>\n