Main Content

How to shrink your Facebook tabs iFrame when AutoGrow fails you.

Facebook AutoGrowWhen 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.

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.


25 Responses

  1. Dominick says:

    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:

    FB.Canvas.setAutoGrow(false);
    FB.Canvas.setSize({height:1200});
    setTimeout(function(){
    FB.Canvas.setAutoGrow(true);
    }, 100);

    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

  2. Brennan says:

    Awesome. Worked perfectly. Thanks, I was ripping my hair out on this.

  3. Nils says:

    Works great and the timeout delay is okay. Thanks!

  4. Manolis says:

    After Many Many hours of searching this is the best solution ever!!!!!!!!!
    Thank you for sharing

  5. Josef says:

    after searching in everywhere and finally I found this article. you solved my problem
    Thank you very much

  6. Antonio says:

    After 1 day of battle, @ 00.16 i entered this blog. I want to personally thanks you!

  7. jeFFF says:

    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 !

  8. Kelly B says:

    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?

  9. (David *)Frenkiel says:

    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.

  10. jrick says:

    A BIG HELP $$$ for you

  11. Anthony Hook says:

    I could kiss you.

  12. alex says:

    brilliant! took me hours before i found this. thanks!

  13. Gaurang Jadia says:

    Thanks! It worked

  14. Zafer says:

    Is it possible to shrink my iframe page below 800px? or is 800px the minimum?

    • Thomas says:

      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.

  15. gnomefan says:

    thanks man. this is brilliant and really works!

  16. Josef says:

    many thanks for this clever solution !! it works like a charm. Shame on Facebook !!!!

  17. Murtz says:

    Thanks for sharing but the code below also works for me.

    FB.Canvas.setAutoGrow();

    FB.Canvas.setSize({height:600});

  18. kishorys says:

    Cool trick. Thanks for sharing.

  19. Rufinus says:

    you know, you just can call FB.Canvas.setSize(); without paremter to have the height set automaticly ?

  20. @brunoew says:

    Great!!!
    Good job guy.

  21. This is great, thank you! It seems to kill in page anchor links though. Has anyone else seen this?

  22. Sudharshan says:

    Good solution. It works like a charm

  23. nut says:

    Thank you,

    This snippet save my life

    FB.Canvas.setAutoGrow(false);
    FB.Canvas.setSize({height:1200});
    setTimeout(function(){
    FB.Canvas.setAutoGrow(true);
    }, 100);

Leave a Reply