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

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.