Dynamic Height For Facebook Canvas Page

To dynamically increase and decrease Facebook’s canvas page, put the following simple JS(jQuery) code at the bottom of your page. Please make sure to select fixed height 800px in your app setting. Don’t select fluid, it will add scroll to your page.

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>/* Normal height should be your page height at first load. In my case it's 350 */<script charset="utf-8" type="text/javascript">
    var bodyHeight   = $('body').height();
    var normalHeight = 350;
    if(bodyHeight > normalHeight) {
        bodyHeight = bodyHeight - 100;
        FB.Canvas.setSize({ width: 760, height: bodyHeight });
    }else {
        FB.Canvas.setSize({ width: 760, height: normalHeight });
    }
</script>

UPDATE:

A simpler way:

$(window).load( function() {
         FB.Canvas.setAutoGrow();
    });
This entry was posted in Facebook. Bookmark the permalink.
  • Dumbsearch

    Hello! :) I’m really enjoying your blog… Bookmarked! :D Wondering why it doesn’t have more comments… but anyways, which sites do you run?