How to resize Facebook Canvas app (iFrame) correctly?

Question

I need to adjust canvas size after updating content of a page. I can do it explicitly by

FB.Canvas.setSize({ width: 760, height: 1480 });

howev

Answer 1

When resizing to the minimum height do not forget to make it a little bit bigger than it is, to account for horizontal scrolling bar and some extra pixels that some browsers add, otherwise you will end-up with vertical scroll.

Also I do not recommend to use body to count height.

This worked for me :

window.fbAsyncInit = function() 
{FB.Canvas.setSize({height:document.getElementById('m_table').offsetHeight+40});}

where m_table is table ID with all my content (you can use div instead).

Answer 2

This has worked for me:

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

Note that you don't need FB.init unless you are using it for other reasons.

Answer 3

bit of excess functionality, but this article explains why you cant do that dynamically and provides the easiest solution... http://www.twistermc.com/36764/shrink-facebook-tabs/ The answer is simple: Shrink it really small, then after a pause use AutoGrow to make it the correct size... Alice in Wonderland style.

• I say easiest because from a dev and user point of view this slows things down by about 1/4 second, and the user gets a tiny flash of the scrollbars...

Answer 4

I have managed to make .setSize() working by delaying its execution (as suggested on various forums):

window.setTimeout(function() {
  FB.Canvas.setSize();
}, 250);

If you have XFBLM elements, especially fb:comments, then you need to parse the page before setting its size

window.setTimeout(function() {
  FB.XFBML.parse();
  FB.Canvas.setSize();
}, 250);

Note, that you need to run this script after your content block, otherwise increase the time interval (in ms) allowing webserver and client browser building the content before resizing canvas.

This approach only increases the height of your page and doesn't decrease it. You can achieve decreasing manually by firing the following line before the code above

FB.Canvas.setSize({height: 480}); // min height - .setSize() won't reduce it

however, there is a drawback - the page will be blinking due to the double resizing.

Also, one suggests running .setSize in several time intervals to account delayed content:

FB.Array.forEach([300, 600, 1000, 2000], function(delay) {
  setTimeout(function() {
    FB.XFBML.parse();
    FB.Canvas.setSize();
  }, delay)
});

In this case, the page and XFBML elements become quite blinky.