Migrating from the Facebook Connect JavaScript Library to the new JavaScript SDK and Graph API

Around a month ago I worked on a project at work to rebuild the ninemsn commenting tool which lets our users post comments on our website content (I’ll post a full review when we go live next week - End May 2010).

I spent a lot of time working with Facebook and Twitter integration so that comments that users post on our sites seamlessly flow into Facebook and Twitter as well (the user gives us permission to do so of course).

After I spent two weeks coding a custom solution using the “Facebook Connect JavaScript Library” for local authentication and the "Post to Wall" integration, Facebook makes the major announcement during F8 2010 that Facebook Connect will be replaced with the new “Graph API”. (Although, Facebook did say that they will continue to support the Facebook Connect JavaScript Library, but officially introduce a new “JavaScript SDK” as a wrapper around the Graph API).

As we were too committed to the launch date, I decided not to upgrade our Facebook Connect JavaScript Library solution to use the JavaScript SDK and Graph API, as we did not see a risk of it being decommission anytime soon and our solution crashing overnight.

But lo and behold, since last week I realised that for some reason when the user tried to login using Facebook Connect on our site, the login screen got blacked out like so:

After wondering if our application was being blocked, I soon realised that Facebook seemed to be making a lot of updates to their core JavaScript backend and the old Facebook Connect JavaScript Library was being affected by that.

I traced the problem above to the Facebook authentication screen being blocked out when it’s loaded in an iframe (it is supposed to be a pop up window by default). I customised it to load in an iframe so it looks good, and it worked perfectly until last week. So this restriction seems to have been introduced by Facebook only recently.

I soon realised that if I continue to use the old Facebook Connect JavaScript Library, it was going to get more and more unstable. (Being a developer myself, I perfectly understand and accept this because I can imagine Facebook primarily focusing on their new Open Graph platform and their old platforms being left in the sidelines as a result)

So, I hit Google and started researching on how I can move to the new JavaScript SDK and the Graph API as quick as possible, and came across this tutorial:
http://thinkdiff.net/Facebook/graph-api-javascript-base-Facebook-connect-tutorial/

I spent the last 4 hours moving my solution to the new platform and I’ll have to say the API seems to be much more solid and cooler and I highly recommend making the move to the new JavaScript SDK and the Graph API. The tutorial above is great to get you started and after you get your head around the JavaScript code you will be able to code some pretty cool apps.

And if you are migrating then one of the steps you have to do is to officially “Migrate” your Facebook's Application setting in to use the new Graph API backend. You will find that option in your Application settings page as shown here:

Well, good luck guys and if you have any questions then comment using the comment tool below or tweet me on @newbreedofgeek