Facebook Graph API and Its JavaScript SDK

Facebook has recently released a new tool for accessing its vast amount of data. The name of the tool is the Graph API. The Graph API allows you to literally interact with any Facebook object, including users, their photos, posts, groups, pages, as well as connections between object, i.e. listing people’s friends, group members and page fans, etc. Moreover, this interaction isn’t only single-directional, in fact you can also modify object, add and delete them.

Technically, it’s done by sending simple HTTP requests and getting responses in a format that is similar to JSON that is both readable by the machine and the human. So, for example, if you want to gather some information on a person with the ID of 56250462 you just need to retrieve this URL https://graph.facebook.com/562504622, eventually you will get a response like this:

{
   "id": "562504622",
   "name": "Mike Borozdin",
   ...
}

STOP! Actually, I was a little bit optimistic when I said you needed just to retrieve that URL. In fact, the URL isn’t that simple and you also have to pass a token ID which identifies a user you are acting up who has granted a permission to your application. An access token can be obtained as soon as the authentication process is successfully finished, for this reason Facebook uses the o Auth 2.0 protocol. However, you actually don’t have to worry about implementing the authentication on your own, as well as you don’t need to think about parsing a response. Instead you can use one of the available SDKs released for a few languages and platforms.

In this story I’m only talking about the JavaScript SDK, because I believe it’s the simplest way of starting to work with the Facebook Graph API because first of all you don’t have to worry about obtaining JavaScript since it’s available within any modern web browser, second you don’t even need to install the SDK, instead you just reference it in a script tag.

So, let’s get started. But before we start writing some code, we should create a Facebook application and gets its application ID. Then we just create an HTML page where we can put a script tag loading the SDK.

<script
  type="text/javascript"
  src="http://connect.facebook.net/en_US/all.js"
></script>

And also put our application ID inside of a script tag in a place where it will definitely be executed first.

//the API key of the application, change it to yours
FB.init({ apiKey: '**************** });

The next thing is perform the authentication, we are writing this function:

function login() {
  FB.login(handleLogin);
}

That gets invoked whenever a page loads (according to the documentation FB.login() can be only executed on some event), thus:

<body onload="login();"></body>

When we execute FB.login() we pass it a name of the function responsible for handling the post log-in process, so we also must define that function.

function handleLogin(response) {
  //if a user fails to log in...
  if (!response.session) {
    return;
  }
}
//and now we can do everything

Yes, since now we can finally send requests to Facebook and get some data. To send a request we are just using FB.api() which first parameter is a request string and the second one is a callback function for processing the retrieved data.

At the moment we just want to get some information of a logged-in user:

FB.api("/me?fields=name,picture", handleMe);

We even don’t need to know his ID we can use ‘me’ instead. Also, we can choose the fields we want to pull. If we don’t select fields explicitly, then we’ll get all the profile fields… excluding a picture.

And our processing function should look like this:

function handleMe(response) {
  var divInfo = document.getElementById("divInfo");

  divInfo.innerHTML = "<h1>Me</h1>";
  divInfo.innerHTML += "Name: " + response.name + "<br />";
  divInfo.innerHTML += '<img src="' + response.picture + '" /><br /><br />';
}

Providing we’ve added a div with the ID of ‘divInfo’ somewhere.

In addition we also want to get a list of our friends, so we send another request:

FB.api("/me/friends?fields=name,picture", handleFriends);

And handle it respectively:

function handleFriends(response) {
  var divInfo = document.getElementById("divInfo");

  var friends = response.data;

  divInfo.innerHTML += "<h1>My Friends</h1>";

  for (var i = 0; i < friends.length; i++) {
    divInfo.innerHTML += friends[i].name + "<br />";
    divInfo.innerHTML += '<img src="' + friends[i].picture + '" /><br /><br />';
  }
}

Conclusion and References

The Facebook Graph API is indeed an extremely useful tool for writing application that interact with Facebook, also it can be quite useful for analysing Facebook data, especially social interactions, I believe it must be really interesting to create a map of social connection of your friends or of some group.

In addition, to the JavaScript API, there are also libraries for Python, PHP, iPhone and Android which should also be fully functional and are available at this page - http://developers.facebook.com/docs/ – that is also a starting point for further studies.

Also, there is a .NET SDK being currently in development, but it is also available for downloading at the Facebook GitHub repository - http://github.com/facebook