nazly.me

Weblog of Nazly Ahmed

Nazly Ahmed

Nazly Ahmed

Web Developer. PHP Addict. Wordpress Hacker. FOSS Enthusiast. (Micro)Blogger. Photo Hobbyist. Cricket Fanatic. Husband. Dad.

This post is more of a note to self. A canvas page in an FB app has a height of 800px. There won’t be any issues if the content of the page is within that limit. If the content is dynamic in nature and can grow above 800 pixels, only a part of your content will be visible. The canvas page won’t know that your content has grown since it uses iframes. To overcome this issue, we can use the setAutoResize() function in the Facebook JavaScript SDK. Unfortunately getting it to work can be pain. But I finally found a working code which would increase the height of the canvas page when the content grows.

Replace the appID with yours.

<div id="fb-root"></div>
<script type="text/javascript"> 
  window.fbAsyncInit = function() {
        FB.init({appId: '123456789123', status: true, cookie: true, xfbml: true});
        window.setTimeout(function() {
            FB.Canvas.setAutoResize();
        }, 250);
  };
  (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>
Posted on 24th June 2011 21:30:23