Thursday, May 28, 2009

Facebook Connect: IE problem with Feed/Share dialogs

I've been playing with Facebook Connect for a while, integrating it with a web application I am working on. One of the pages was demanded to show the feed dialog that lets the user publish a news feed entry on his Facebook Wall. The way to do it seemed pretty simple; given the Facebook feed template id, A single JavaScript call was needed:


FB.ensureInit( function(){
FB.Connect.showFeedDialog(templateId, templateData, targets, feedBody, 2, FB.RequireConnect.doNotRequire, null);
});


That worked just fine with Firefox. However, when trying it on IE, it 'occasionally' causes the page to crash during loading. No explicit JavaScript error was shown, the page just crashes.

After digging it up for a long time, I failed to find out the exact reason that causes the problem. However, with a little help from OldMoe, I succeeded in defining the exact scenario of the crash, that previously seemed inconsistent. What showFeedDialog does is that, it inserts an iframe in the page, makes a post request and loads the feed dialog inside it. The crash generates only when the iframe loads before the original page completes loading. Obviously, disregarding the exact reason of the scenario, the solution was to ensure DOM loaded before calling showFeedDialog:


document.observe("dom:loaded", function() {
FB.ensureInit( function(){
FB.Connect.showFeedDialog(templateId, templateData, targets, feedBody, 2, FB.RequireConnect.doNotRequire, null);
});
});