Last week, Facebook rolled out an available upgrade of their Pages system. Included was the ability to import outside content to Page Tabs via iframes, like Application Canvas pages, rather than the previous FBML Javascript inclusion. That worked reasonably well, but disallowed certain page features and made it complicated when trying to dynamically generate content using Flash – audio/videos players etc. It also, and more importantly for me, severely limited the extent to which Javascript could be used in the imported content. Not cool!
I’ve been testing out some possibilities for Page Tabs over the weekend and kept running into a particular problem; namely setting the size of the iframe I was importing to so it didn’t have scrollbars within the page. It seems that the default iframe size is 495×800 pixels – narrower than the FBML method which had a container width of 520px. The width I can live with, but I couldn’t figure out how to set height: auto for the container – hence the scrollbars. The Facebook Developers documentation is a hopeless mess and doesn’t seem to have been updated for the new tabs. It turns out that the method is basically the same as for previous iterations of the Facebook Javascript SDK – it’s just that the documentation didn’t give me a clue about the correct syntax required to make things happen! It took much googling to finally figure it out – hopefully this post will make that easier for others!
This is what worked for me. Just add it after the opening body tag on your imported page.
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: '{your App ID here}',
status: true,
cookie: true,
xfbml: true});
FB.Canvas.setAutoResize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
This snippet will call the include Javascript library from Facebook and then Initialise and AutoResize your container on your Facebook Page Tab. You need to add your own App ID – it’s listed among the settings when you create your application in Facebook.
Enjoy…
