Dynamically Resizing Facebook Canvas (iFrame) Apps to Remove Scrollbars

All new Facebook applications are now iFrame apps. But when you check your app using iFrame inside Facebook, horizontal and vertical scroll bars may appear in the iFrame if the content exceeds height and width of the
canvas. Luckily, Facebook provides a ready to use method to dynamically re-sizing of iFrame inside it.

Step 1

If you want to remove the horizontal and vertical scrollbars from your iFrame Facebook app, GO to your application developer page > app settings and in the “Edit settings” section of your app and change your “IFrame Size” to “Auto-resize” NOT “Show scrollbars.”

Step 2

Open your config file where you have defined other settings for your app and add following code:

 
<div id="fb-root"></div>
<script type="text/javascript">
    window.fbAsyncInit = function() {
        //Your app id must be added there to work
        FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
        //Resize the iframe when needed
        FB.Canvas.setAutoResize();
    };
 
    //Load the JavaScript SDK asynchronously
    (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>

Now your iframe FB App should resize automatically depending on the content. You can see the documentation of setAutoResize() method on Facebook wiki.

Hope that helps.

Cheers!

Related posts:

1. Fix Facebook Application Error in FBML Canvas Apps: Empty Response Received
2. How to check Facebook Page Liked by User, Like-Gate Facebook iFrame Tab using PHP Graph API
3. Facebook Platform – Secure Page Tab URL will be required on October 1, 2011.
4. Facebook Graph API authentication OAuth 2.0 replacing Require Login
5. Remove Extra Vertical Line Spacing in Flash AS3 XML Content