A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

Facebook Page Tab: Remove scrollbars and auto-resize height

I have come across many ones, but this one always worked for me without problems.

CSS

html, body { overflow: hidden; }

Put this just after the tag:

<div id="fb-root"></div>

Put this after you have jQuery and other libraries loaded. Don’t forget to put in your App ID.

$(document).ready(function() {
    window.fbAsyncInit = function() {
        FB.init({
            appId: FB_APP_ID,
            cookie: true,
            xfbml: true,
            oauth: true
        });
 
        FB.Canvas.setSize({height:600});
        setTimeout("FB.Canvas.setAutoGrow()",500);
 
    };
    (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);
    }());
});

I forgot where I got this from but if anyone knows, flick me an email!

This entry was posted in Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>