Facebook Iframe Resizing Solution

Magnifying Glass Recently I have been working on working with a Facebook application which resides within an iframe.  However, the application could change size as the UI state changed, and the iframe needed to change size to match.

Luckily for me Facebook provide a prebuilt solution for this which you can drop into your page with only a few lines of Javascript.  They even provide a demo application.

Unluckily for me, after following Facebook’s instructions perfectly, the resizing didn’t work!

The behaviour I observed was:

Google Chrome
Internet Explorer

The iframe would always open at 800px tall if the height of the
content was less than 800px. The iframe would enlarge correctly
if the contents grey beyond 800px tall, but it would never shrink.
Mozilla Firefox The iframe resizing worked perfectly ?!

I confirmed that the demo application Facebook provided worked correctly in all browses, but I just couldn’t get mine to work the same.  Eventually I removed lines from the Facebook demo application one-by-one until I discovered what caused my error.

In the end it turns out that it was simply a case of my application not specifying a DOCTYPE in the main html page.  After I inserted the DOCTYPE tag from the demo application everything worked perfectly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It’s a pity that Facebook didn’t mention anywhere in their documentation that this line is critical to the operation of the iframe resizing code.  I’m glad things are working for me now though, and hopefully other people will be able to learn from my mistake.

10 thoughts on “Facebook Iframe Resizing Solution”

  1. Thanks, this blog aided me in narrowing down some problems with the latest version, Why do they always seem to leave out vital documentation when they release a new version? It may be trivial to them but not for us! I’m sure we’re not alone either.

  2. hey tony,

    im hoping you can help me with my facebook app.

    The width limit i see in facebook is 760px but my site is 976px. Also, my sites height is much larger than what my fb app is displaying.

    I’ve gone back and forth in the fb documentation but i havent been able to figure it out. A competitor site of ours has successfully built their add and I am trying to also offer this to our users.

    How can i get this to work?

    1. Hi Guillo – I’m not aware of anyone increasing the width of their canvas page to be greater than 760px, and I have no idea how it could be possible sorry. In the past I have always redesigned my applications to fit within 760px.

  3. Hey Tony,

    So I was able to do a css fix that will resize our page to fir the 760px of the iframe.

    I wan into another issue though. I placed the code offered by facebook to resize their iframe but is is also affecting my page. When I uncomment the code, the vertical scroll bar in our site disappears.

    would you know how to fix this?

  4. Hi Tony

    I’m suprised you don’t use the strict xhtml doctype as standard. It’s the only doctype I’ll let my students use. I’d be interested in your comments about why so many developers are not disciplining themselves to work within the confines of strict xhtml.

    1. @Geronimo
      I only ever use strict xhtml, but often when I code a new file from scratch (particularly if it’s only for a proof of concept) I don’t bother putting the doctype declaration in.

      I learnt my lesson though :)

  7. Hello Tony,

    My application has 5 pages, questionnaire on each page has different number of questions so each page has different height. I’ve used

    window.fbAsyncInit = function() {FB.Canvas.setSize();}

    in HEAD tag and then called

    FB.init({
    appId : ”,
    status : true,
    cookie : true,
    xfbml : true
    });
    FB.Canvas.setAutoResize(7);

    after body.

    But when I navigate through pages…if page01.php has 900px height and the next page page02.php with fewer questions has 700px of height, canvas height remains at 900px. How I could resize it to automatically get at 700 pixels?

    Thanks.

    1. Hello Waseem,
      I am not exactly sure what could be going wrong in your case, but it could be that your page has not calculated its own size yet when you try to auto size. I would try temporarily creating a button to trigger the resize code so you can be sure when it happens and eliminate this possibility.

Comments are closed.