I am an Adobe Flex (and everything else) developer working at
FutureTech.
Before that I worked at SmallWorlds.com.
This blog is where I share the tips and tricks I pick up along the way.
Feb 24
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 |
| 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.
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.
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?
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.
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?
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.
@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