NovoGeek's Blog (Archive)

Technical insights of a web geek

Programming the Social Web with Facebook's Open Graph API

A couple of weeks back I have presented on Facebook Apps Development at DevCon 2010 and it was nice to see overwhelming response. In this article, I shall throw light on FaceBook's new social features, to help developers getting started with Facebook apps development.

The Facebook F8 conference is an yearly event hosted by Facebook, to bring developers & entreprenuers together to build the social web. With the previous events announcing the Social graph & Facebook Connect, the 2010 F8 (21st April, 2010) had big news for the evolution of social web, briefly:

  • The Graph API
  • oAuth 2.0 based authorization
  • Social plugins
  • The Open Graph protocol.

The Graph API, which is the core of Facebook Platform, gives developers the power to share and make the web more open & connected. Mark Zuckerberg, founder of Facebook, coined the term "Social Graph" which means "the global mapping of everybody and how they're related". By definition, the social graph is composed of objects(people, pages, events, communities, photos etc) and the connections(relationship, tagging, grouping etc) between them. Every object in the graph has a unique ID by which it can be referenced.

Technically speaking, Facebook offers REST based service which can be used to query about any object in the graph.

e.g., To get public info about Bill Gates on Facebook, click the following link: https://graph.facebook.com/billgates.

[Note: When you click the above link, the query gives JSON output, which contains data about the requested object. IE will ask to download the output which can be opened in notepad, where as Firefox/Chrome/Safari will open in new tab directly.]

Similarly, you can get info about the recent Microsoft PDC as: http://graph.facebook.com/MicrosoftPDC. You can even introspect a bit deep and get additional info as: http://graph.facebook.com/MicrosoftPDC?metadata=1

Notice that in the above cases, we are retrieving only public info. To get private info, you need to get authenticated by Facebook and append an "access_token" parameter in query string like: https://graph.facebook.com/microsoftpdc/feed?access_token=xxxxxxxxxxxxxxx.

To see how it works, login to facebook.com and then open http://developers.facebook.com/docs/api in new tab. Scroll down to connections section and click on any connection like "Friends", "News Feed", "Profile feed" etc. The url looks like this: https://graph.facebook.com/me/friends?access_token='A set of random characters which FB gives you after authentication'.You will be able to see complete private information, which is not available without authentication.

oAuth 2.0 is new authorization mechanism which is used by Facebook. It is an open protocol which allows secure API authorization without the need for entering credentials(passwords).It relies on the exchange of tokens instead of credentials and is more secure.

In layman's terms, when you add applications like FarmVille, you will get a confirmation box with "Allow/Deny" buttons. When you click the "Allow" button, the application will be added to your graph. Behind the screens, the app uses oAuth to authorize you via exchange of tokens. More about it in my upcoming article.

Social Plugins are extensions of Facebook which can be embeded in your websites, creating social experiences. The famous "Like" button, login button, recommendations etc are some of the social plugins. They can be embeded into any existing site using FBML and Facebook JavaScript API. The official reference is clearly the best guide for learning about the social plugins.

The Open Graph Protocol helps in turning out your web pages into more meaningful objects in social graph (Did i say something similar for social plugins too? Wait., there is more to say).

By adding a like button, you only add a link to your page in facebook's social graph, which does not have any other information. But by adding <meta> tags of Open Graph protocol on your web page's header, you are sharing more semantic data about your webpage, such as, title of the content, type of content, description, image etc. Since the protocol is open, these tags can be read by facebook (or any other network in future) to provide more meaningful information to users.

So, by using the Graph API, oAuth, social plugins and the Open Graph Protocol, you can fetch data about any object in the social graph, present it in a semantic way and provide social experiences to the 500 million(& growing) Facebook users on your site!

In my upcoming articles, I shall write in depth about each of these, explaining with code how they work.

Happy Coding Smile

Pingbacks and trackbacks (1)+

Comments are closed