Resizing the facebook iframe to fit smaller content?

Question

From my research it seems as if this is a re-occuring problem. I'm using the following code to resize the iframe, it currently works... that is it resizes the iframe to fit larger content, however it won't shrink back again!

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    /* Init fb Resize window */
    FB.Canvas.setAutoResize(7);
    FB.init({
        appId:'<?php echo Yii::app()->params['fbAppId']; ?>',
            status: true,
            cookie: true,
            xfbml: true
    });
  };
</script>   

The code is positioned at the very end of the html file, before the closing body tag.

Answer 1

It is not logical to call FB.Canvas.setAutoResize(7); before you call FB.init()

Also you should not call FB.Canvas.setAutoResize(7); in window.fbAsyncInit

Here is a proper example

window.fbAsyncInit = function() {
    FB.init({
        appId  : js_fb_app_id,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true,  // parse XFBML
        oauth   : true          
    });
};
$(document).ready(function(){
    FB.Canvas.setAutoResize();
});

Using jQuery . This way you can be sure that the page is resized when DOM is loaded, not before that. This way you can place your code anywhere on the page.

You set FB.Canvas.setAutoResize to 700 ms. Do you have any particular reason to do so ? The default value is 100ms

Answer 2

The simplest way would be to call setSize() once after the page is fully loaded, like this:

<script type='text/javascript'>
window.onload=function() {
  FB.Canvas.setSize({width:760,height:document.body.offsetHeight});
}
</script>

You don't actually need FB.init unless you are using the SDK for other things as well.

Answer 3

I'm facing exactly the same issue with my app on https://fb.pienternet.be/overview for a few weeks now -- tried a lot of things but none of them work.. using setTimeout, using setSize manually, the new setAutoGrow, combinations of them... It happens when navigating within in the iframe from long to short pages , but also from short to long pages.

What does work for me is navigating to the pages using the parent URI; eg apps.facebook.com/pienternet/detail/5 ... I guess this is a bug in the SDK, will post this on the Facebook bugtracking platform too.

Two screenshots to make this clear:

• http://cl.ly/3t2U2i272G40110X3b0p (you can see the footer end in the black background)
• http://cl.ly/1n442j0w3i2W1f050W04 (you can see the content being cut off)