Facebook Iframe Resizing Solution

Tony Fendall — Wed, 24 Feb 2010 22:29:14 +0000

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.

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.

HTML – Tony Fendall

Facebook Iframe Resizing Solution