Making Life with Facebook Connect Easier

Thursday, February 11, 2010, at 06:32PM

By Eric Richardson

I implemented Facebook Connect on blogdowntown in December of 2008 and have pretty much had a love-hate relationship with it ever since. The functionality is great, but the facebook Javascript has consistently been the slowest loading piece of the site.

Today I deployed a code update that moves the site over to Facebook's new open-source connect-js library. It's alpha, it's incomplete, but boy does it feel better to use.

Implementation wasn't without its challenges. The connect-js code doesn't yet support the onlogin="" handler in a fb:login-button XFBML tag, so I had to re-implement our login function as a static image that calls my own handler.

It also doesn't yet support iframes for things like the publish dialog, using a popup instead. That posed a problem, since we've traditionally popped that dialog based on a response sent when a comment was submitted. Since the popup wasn't coming directly enough from a button press, it was getting caught up in popup blockers.

Again, I had to re-architect a bit to create a link that would pop the button. I'm sure it drops the conversion rate slightly, but it's fine for now.

I also ran into a conflict between the connect-js code's use of the JSON library and my use of prototype. Specifically, prototype adds a .toJSON function to arrays that was breaking JSON's ability to stringify an object I needed.

The solution was surprisingly simple, though it does sort of scare me a little.

    FB.init({apiKey: this.options.api_key, cookie: true});

    // WARNING -- Overload JSON stringify to handle array issue
    // use native prototype toJSON instead
    JSON.stringify = function(obj) { return Object.toJSON(obj) }

By overloading stringify and just using Prototype's built-in code, things seem to be working fine in all my testing.

And, lastly, the popup for that publish dialog was being created too short for the content that was to go inside it. I ended up grabbing a local copy of the core.debug.js file, changing the hardcoded height, and then compressing it myself with YUI Compressor.

Everything seems to be working well right now, and I really think it will just continue to get better as Facebook gets this library fleshed out more.