How to resize Facebook Tab iframe size
- tutorials
- (Updated at )
Facebook Tab size
Facebook has 2 size option for canvas, one is fluid and the other is fixed with specified height.
Neither way is not auto resize the iframe by its content, and there is a method FB.Canvas.setAutoResize to solve the problem, but when "AutoResize" is not really resizing the height of iframe by its content height, Facebook decide to rename it ot FB.Canvas.setAutoGrow.
What I mean by not resizing the height correctly, because what the fucntion does is make the iframe height enough for current content, but when the content changed, and the height is smaller then previous, FB.Canvas.setAutoGrow will not shrink the size for you, that's why it rename to AutoGrow not AutoResize.
The code
Back to the topic, so how do we make it works like auto resize.
A simple solution is we make the size smaller at first, then fire FB.Canvas.setAutoGrow to let Facebook decide how height it should be.
window.fbAsyncInit = function() {
FB.Canvas.setSize({height:600});
setTimeout(function() {
FB.Canvas.setAutoGrow();
setTimeout(function() {
FB.Canvas.setAutoGrow(false);
}, 500);
}, 500);
};
Why call it twice
FB.Canvas.setAutoGrow take a parameter as interval, yes it runs repeatly by a giving time. So the second FB.Canvas.setAutoGrow is simply to stop the timer.
If your content is dynamically changes, something like loading content via ajax call, then you may not need to stop the timer, depending on what you need.