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 });

however, it doesn't work without parameters, i.e. .setSize().

Also, I can adjust the height by

FB.Canvas.setAutoResize(true);

but only increasing - it doesn't reduce the height when content is reduced.

The following lines do not work:

FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
FB.Canvas.setSize(FB.Canvas._computeContentSize());

How can one make it working?

Some more comments on the subject:

1. http://developers.facebook.com/blog/post/93
2. http://developers.facebook.com/docs/reference/javascript/fb.canvas.setautoresize

Related:

1. facebook-api: what's Facebook Connect cross-domain receiver URL?
2. facebook-app: how can i change the height of a resizeable iframe application?
3. Document height grows on resize when setting canvas dimensions dynamically

How do you control the size of your Facebook Canvas apps?

Answer 1

Don't write your own function for timed Auto-resize. Fb has one:

FB.Canvas.setAutoResize();

If you know when you need to resize it use

FB.Canvas.setSize()

So, if you want to make is smaller when you click a link, stick it in a function and then call that function later like:

function sizeChangeCallback() {
    FB.Canvas.setSize();
  }

//start some function or on click event - here i used jquery
$("#something").click(function() {
  sizeChangeCallback()
});

You don't need to set an explicit height, but sometimes you can have trouble with dynamic xfbml elements like the comments plugin. Try using an event subscribe callback:

   FB.Event.subscribe('xfbml.render', function(response) {
    FB.Canvas.setAutoResize();
  });

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setSize/

http://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoResize/

http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/