A few weeks back I decided to upgrade one of my web apps to the Open Graph API. Previously it was running on Facebook Connect and using the Facebook Developers Toolkit on the backend. This still works fine, but it always felt like over kill. The simplicity of the new Open Graph api is compelling, and implementing it was pretty straight forward.

  1. Remove code to initialize the connect javascript library
    This includes the link to the FeatureLoader script and the javascript used to initialize the library. In my case the code looked like this:

    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"
type="text/javascript"></script>
FB_RequireFeatures(["XFBML"], function(){
	FB.init('APIKEY', 'Path to xd_receiver.htm',{permsToRequestOnConnect : 'email'});
});

    The above code is not compatible with the Javascript SDK or any of the social widgets.

  2. Add the open graph namespace to your Master page’s html element 
    <html xmlns:og="http://opengraphprotocol.org/schema/"
		  xmlns:fb="http://www.facebook.com/2008/fbml">
  3. Load the library asynchronously in the master page with the following code, by placing this right after the opening body tag. Be sure to enter a valid app id where ‘your app id’ is listed. 
    <div id="fb-root"></div>
window.fbAsyncInit = function() {
	FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
		/* sample events to respond to*/
		FB.Event.subscribe('auth.login', function(response) {});
		FB.Event.subscribe('auth.logout', function(response) {});
		FB.getLoginStatus(function(response) {});
	 };
(function() {
	var e = document.createElement('script'); e.async = true;
	e.src = document.location.protocol +
	  '//connect.facebook.net/en_US/all.js';
	document.getElementById('fb-root').appendChild(e);
}());
  4. Depending on whether or not you’re using the XFBML elements, you may have to remove modify these elements to remove missing attributes (for example, the fb:login-button element). In my case I use the javascript SDK to login with the following jquery : 
    $('#fbLogin).live('click',function() {
	FB.login(function(response) {
	  if (response.session) {
		//user has been authenticated
	  } else {
	  }
	}, {perms:'email,user_about_me'});
	return false;
});
  5. Modify your logout code to use FB.logout, for example: 
    FB.logout(function(response) {
  //whatever code you want to run when the user logs out
});

    Again if you’re using XFBML you can just set your login buttons autologoutlink attribute to true.

That’s pretty much all there is to it, much simpler than implementing the original Connect code. Making calls to the Open Graph API on the backend is a bit more involved. While I initially used the Facebook Developer toolkit, I’ve since removed that dependency entirely, and created wrapper classes to pull out the necessary keys from the authentication cookie (namely sessionkey and access_token) to make the necessary calls. If there’s any interest in it I can post that code and a few examples of using it.