When building a Facebook application tab, Facebook gives you a great function called FB.Canvas.setAutoGrow (formally FB.Canvas.setAutovsize) that allows for the Facebook iFrame to automatically figure out how tall it should be to incorporate all your content. As you switch between pages in your app, it continues to grow as needed.i
The downside is that it doesn’t shrink. If your first page is 2000 pixels tall, and your second is only 800, the iFrame remains at 2000 pixels and you get a bunch of empty white space at the bottom.
This isn’t a bug, it’s a feature. FB.Canvas.setAutoGrow grows. And when you grow, you don’t get smaller; ever.
If you want to make the iFrame smaller, and eliminate all that white space, you’ll need to set the iFrame size manually with FB.Canvas.setSize.
If you don’t want to mess with sizes, and you don’t want to have a bunch of empty white space either, I’ve found a solution.
First, you use FB.Canvas.setSize to set the height of your iFrame. I picked 600px because that’s about as small as a Facebook page goes with ads on the side.
Second, wait about a half a second and then call FB.Canvas.setAutoGrow. If the iFrame needs to be taller than 600px, it will now expand and show the content. Don’t worry about the delay, this will go fast enough that no one will notice.
This is the best, and only, solution I’ve come up with. Plus it works.
At this time, Facebook doesn’t have a way to make the iFrame smaller without using two functions. It now makes sense to me why the company thought it was important to rename FB.Canvas.setAutoResize to FB.Canvas.setAutoGrow. Resize makes it sound like it could make the iFrame smaller when it never does.
I’m not sure why Facebook feels that automatically growing AND shrinking the iFrame is a bad idea, but I’m sure they’ve got their reasons. For now, use the method above and keep coding.
awesome! thanks for this great pst.
your code didn’t quite work for me (the site i’m working on using lots of ajax calls that grow the canvas with content, so maybe that’s it), but here’s what ultimately worked:
so thanks for pointing me in the right direction! the only addition was telling autoGrow to chill out for a moment while i change the height, then turning it back on after 100ms or so
Awesome. Worked perfectly. Thanks, I was ripping my hair out on this.
Works great and the timeout delay is okay. Thanks!
After Many Many hours of searching this is the best solution ever!!!!!!!!!
Thank you for sharing
after searching in everywhere and finally I found this article. you solved my problem
Thank you very much
After 1 day of battle, @ 00.16 i entered this blog. I want to personally thanks you!
Thanks for this great post !
I developped an application using Ajax and I was stuck with the autogrow issue, your post saved me hours of work !
Perhaps the reason for not having a shrinking function is that someone could have an entire source page filled with relatively or absolutely positioned objects, and have mistakenly set a too-small height on their containing div….
Would the i-frame then shrink to fit the container cutting off content?
Not if it were coded properly.
Thanx, this solved my problem (esp. the advice to wait before calling setAutoGrow() after the setSize() call). Strange that FB don’t mention the effect of the former on the latter.
A BIG HELP $$$ for you
I could kiss you.
brilliant! took me hours before i found this. thanks!
Thanks! It worked
Is it possible to shrink my iframe page below 800px? or is 800px the minimum?
I don’t think there is a minimum. If you are using setAutoGrow, it’ll automatically resize. Otherwise just set it to whatever size you want via setSize.
thanks man. this is brilliant and really works!
many thanks for this clever solution !! it works like a charm. Shame on Facebook !!!!
Thanks for sharing but the code below also works for me.
Cool trick. Thanks for sharing.
you know, you just can call FB.Canvas.setSize(); without paremter to have the height set automaticly ?
Good job guy.
This is great, thank you! It seems to kill in page anchor links though. Has anyone else seen this?
Good solution. It works like a charm
This snippet save my life