Facebook AutoGrowWhen building a Facebook application tab, Facebook gives you a great function called FB.Canvas.setAutoGrow (formally FB.Canvas.setAutoResize) 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.

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.

Grow and shrink the Facebook App Tab iFrame with JavaScript:

FB.Canvas.setSize({height:600});
setTimeout("FB.Canvas.setAutoGrow()",500);

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.

Possibly Related Posts: