How-To: Use the Graph API to pull the movies friends like

By Vatsal Mehta - Friday, March 18, 2011 at 2:30pm

The Graph API provides a rich set of functionality that enables you build apps with “social” at the core of the experience. Social apps have changed the way people make decisions, like deciding what movies to watch, what songs to listen to, what shows to get into or where to travel.

As part of our continuing series of “how tos,” we thought it’d be interesting to show how you can easily create these same social experiences. We’ve put together a sample app using the Graph API that searches and presents an ordered list of the movies most liked amongst a user and her friends.

To access the set of movies that a user and her friends like, you must first ask the user to authorize your app and request specific permissions: user_likes and friend_likes. The user authorizes your app by logging in to your site using their Facebook account.

The simplest way to implement the login button is to use the Login button social plugin along with our JavaScript SDK as indicated below. The user_likes and friend_likes permissions are added as parameters:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#
appId=YOUR_APP_ID&amp;xfbml=1"></script>

<fb:login-button show-faces="true" width="200" max-rows="1" 
perms="user_likes, friends_likes"></fb:login-button>

When the user clicks the button, she is prompted with the following dialog:

After the user authorizes the app, you will need to ask for her list of friends:

FB.api('/me/friends', function(response) { });

You can then pull movies liked by each friend by calling:

FB.api(‘/USER_ID/movies’, function(response) { });

Once you have the movie, the bold lines in the snippet below show how you can use the movie id to get the thumbnail image and URL link for the movie:

FB.api('/'+movieListSorted[i].id, function(response) {
  var newDiv = document.createElement("DIV");
  newDiv.innerHTML = "<img src='"+response.picture+"'></img><br/>";
  if( response.link) {
    newDiv.innerHTML+="<a href='"+response.link+"'>"+response.link
    +"</a><br/>";
    newDiv.innerHTML+='<iframe src="http://www.facebook.com'
    + '/plugins/like.php?'
    + 'href='+response.link+'&amp;layout=standard&amp;'
    + 'show_faces=true&amp;'
    + 'width=450&amp;action=like&amp;colorscheme=light'
    + '&amp;height=80"' 
    + 'scrolling="no" frameborder="0" style="border:none;'
    + 'overflow:hidden;' 
    + 'width:450px; height:80px;" allowTransparency="true">
    + '</iframe><br/>';
  }
  document.getElementById(response.id).appendChild(newDiv);
});

The return responses for friends’ and the user’s movies are documented on https://developers.facebook.com/docs/reference/api/. The responses are structured in a similar fashion to Movie Pages on Facebook. For example, the response structure of Inception can be accessed by going to http://graph.facebook.com/Inception.

The end result is a list of movies sorted by the most liked amongst your friends.

The full sample app is written entirely in Javascript and HTML. Run the app by clicking here. The sample app code is pasted below, but you can also “view source” on the site to see the entire source code.

<html> 
<head> 
<title>Test Page</title> 
<script> 
  var movieList = new Array();
  var movieListSorted = new Array();
  var friendCount = 0;
  function showMovies() {
    alert(movieList.length);
  }
  function compareMovies(movieA, movieB) {
    if (movieA.name === movieB.name) return 0;
    if (movieA.name > movieB.name) return 1;
    return -1;
  }
  function popularMovies(movieA, movieB) {
    return movieB.mCount - movieA.mCount;
  }
  function data_fetch_postproc() {
    document.getElementById('test').innerHTML 
      = "Generating recommendations ... ";
    movieList.sort(compareMovies);
    // Now we have sorted list, dedupe and count
    mCtr = 0;
    for (i = 0; i < movieList.length; i++)
    {
      var count = 0;
      movieListSorted[mCtr] = movieList[i];
      for ( j = i; j < movieList.length; j++)
      {
        if ( movieList[i].name === movieList[j].name ) {
          count++;
        } else {
          break;
        }
      }
      i = i+count-1;
      movieListSorted[mCtr++].mCount = count;
    }
    var maxResults = 100;
    if( movieListSorted.length < 100) {
      maxResults = movieListSorted.length;
    } 
    movieListSorted.sort(popularMovies);
    document.getElementById('test').innerHTML = "";
    for( i=0; i<maxResults; i++) {
      var newDiv = document.createElement("DIV");
      newDiv.id = movieListSorted[i].id;
      newDiv.innerHTML = movieListSorted[i].name + ' : Likes - ' 
        + movieListSorted[i].mCount;
      document.getElementById("movies").appendChild(newDiv);
      FB.api('/'+movieListSorted[i].id, function(response) {
        var newDiv = document.createElement("DIV");
        newDiv.innerHTML = "<img src='"+response.picture+"'>"
          + "</img><br/>";
        if( response.link) {
          newDiv.innerHTML+= "<a href='"+response.link+"'>"
            +response.link+"</a><br/>";
          newDiv.innerHTML+= '<iframe src='
            + '"http://www.facebook.com/plugins/like.php?'
            + 'href='+response.link+'&amp;layout=standard'
            + '&amp;show_faces=true&amp;'
            + 'width=450&amp;action=like&amp;'
            + 'colorscheme=light&amp;height=80"' 
            + 'scrolling="no" frameborder="0" style="'
            + 'border:none; overflow:hidden;' 
            + 'width:450px; height:80px;"'
            + 'allowTransparency="true"></iframe><br/>';
        }
        document.getElementById(response.id).appendChild(newDiv);
      });
    }
  }
  function get_friend_likes() {
    document.getElementById('test').innerHTML = "Requesting "
      + "data from Facebook ... ";
    FB.api('/me/friends', function(response) {
        friendCount = response.data.length;
        for( i=0; i<response.data.length; i++) {
          friendId = response.data[i].id;
          FB.api('/'+friendId+'/movies', function(response) {
            movieList = movieList.concat(response.data);
            friendCount--;
            document.getElementById('test').innerHTML = friendCount 
              + " friends to go ... ";
            if(friendCount === 0) { data_fetch_postproc(); };
          });
        } 
      });
  }
</script> 
</head> 
<body> 
<div id="fb-root"></div> 
<div id="login"></div> 
<div id="test"></div> 
<div id="movies"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script> 
FB.init({
    appId  : 'YOUR_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies 
    xfbml  : true, // parse XFBML
    oauth  : true
  });
FB.Event.subscribe('auth.authResponseChange', function(response) {
  window.location.reload();
});
FB.getLoginStatus(function(response) {
  if (response.status == "connected") {
    // logged in and connected user, someone you know
    get_friend_likes();
    document.getElementById('login').innerHTML
      ='<a href="#" onclick="FB.logout();">Logout</a><br/>';
  } else {
    document.getElementById('login').innerHTML
      ='<fb:login-button show-faces="true" width="200"' 
      + ' max-rows="1" perms="user_likes, friends_likes">'
      + '</fb:login-button>';
    FB.XFBML.parse();
  }
});
</script> 
</body> 
</html>

Vatsal, a Partner Engineer, is still wondering whether the totem kept spinning in Inception.

Developer Blog

How-To: Use the Graph API to pull the movies friends like