Wednesday, July 14, 2010

Facebook JavaScript SDK Code + Hidden iframe + IE = Facebook API Not Responding

I just wanted to write up a quick post on this little scenario that can drive Facebook developers crazy when trying to work out why their Facebook code does not work in IE.

If you are using the Facebook JavaScript SDK on your site to connect and use the Facebook Graph API, chances are you usually would code all our Facebook JavaScript code in a separate html/js file and include it as a hidden iframe on all your host pages. In ninemsn, when we build in any Facebook login based tools (like our user generated comments tool) which lets user post comments and share stuff on Facebook from our ninemsn sites, we have to build a network wide solution which needs to work across multiple sub domains and maintain login state across page refreshes.

The only way to do this is to put in all your Facebook JavaScript SDK code is a separate file and call it locally on any page within your site by putting that page in a hidden iframe like so:

You then call the Facebook JavaScript SDK functions inside the facebook_sdk.aspx file like so:

The Problem:
Pretty straight forward right? Well, it is but then why does this not work in IE? Well, it’s simple actually (so simple that it took me a couple of days to figure out :)

When a iframe (or its parent DIV) is set to be “display:none”, IE seems to have issues accessing JavaScript code and the DOM of pages called inside the iframe. It’s hard to work this out because it works sometime and sometimes it does not, so it’s more so stability issues with IE rather than a solid bug.

This issue is only with IE with other major browsers not having this same issue.

The Solution:
It’s simple, do not set the iframe that holds the Facebook SDK JavaScript code (or its parent DIV) to be “display:none”, instead keep it visible on the page and reduce its width and height to be 1px and set its border to none. You should not be able to see the iframe and it will now work perfectly. And also, setting "visibility:hidden;" does not work either so dont bother trying that.

Happy Facebook coding!

1 comment:

  1. Man you save me hours of frustration. Thanks.


Fork me on GitHub