Search code examples
javascriptfacebookfacebook-graph-apifacebook-graph-api-v2.0

How to get Facebook user's friends' profile picture using Javascript SDK V2.0

I am creating a website using Facebook API V2.0 JavaScript SDK and I would like to display the profile pictures of the user's friends. I have managed to display my profile picture using the graph API but I can't manage to get the ID of all my friends if I am logged in my app (I am an admin). If I have the ID, I'll be able to show their profile picture.

In the graph explorer, I have checked all permissions (User Data Permissions + Extended Permissions). I have noticed if I switch to API V1.0, I get friends permission which is exactly what I'd like.

Also, I have added a couple of permission to my app in Facebook developers > App details > App Center Listed Platforms > Configure app center permissions. (user_friends + friends_birthday + friends_religion_politics + friends_relationships + friends_relationship_details + friends_location + friends_photos + friends_about_me)

So far, my html looks like this :

<fb:login-button scope="public_profile,email,user_friends,read_friendlists" onlogin="checkLoginState();">

After loading the Facebook SDK, I have :

function getUserFriends() {
  FB.api('me/friends?fields=first_name,gender,location,last_name', function (response) {
    console.log('Got friends: ', response);
    $("#friendslist").html('<img src="https://graph.facebook.com/'+ response.id+'/picture?type=large"/>');
  });
  }

However, the array which is suppose to contain all my friends info is empty (see image : http://www.screencast.com/t/W02GaOm3h)

Solution

  • If all you need is their image, this can be found in the "taggable_friends" scope. However, do note that this field is very limited (by design) and that you require additional review by Facebook in order to present it to the average user.

    It contains:

    • A taggable id. This is an id with the express purpose of tagging; it cannot be used to identify the user or otherwise gather information from their profile.
    • A name. The user's first and last name.

    • A picture, with common related fields. Url, is_silhouette, height and width.

      function getUserFriends() {
  FB.api('me/taggable_friends', function (response) {
    console.log('Got friends: ', response.data);
    $("#friendslist").html('<img src="'+response.data[0].picture.data.url+'"/>');
    // maybe an $.each as well
    // var friendMarkup = '';
    // $.each(response.data, function(e, v) {
    //   friendMarkup += '<img src="' + v.picture.data.url +'" alt="'+ v.name +' picture"/>';
    // }
    // $("#friendlist").html(friendMarkup);
  });
}

    Related reading:
    https://developers.facebook.com/docs/graph-api/reference/v2.0/user/taggable_friends https://developers.facebook.com/docs/opengraph/using-actions/v2.0 - Tagging friends and Mentioning friends sections

    A disclaimer: I've been battling with this issue for several days without really being able to mention-tag. My submission to use taggable_friends as a comprehensive, navigatable list for the user was rejected and I speculate (speculation ho!) it was because I did no actual tagging. I'll get back to this in a few days when I've clarified and re-submitted my request for a review on Facebook.

    -- Edit --

    It would seem the reason my initial submission was rejected was because I was using a special development url and did not point out clearly enough why it was not enough to use the url set under settings. This time I clearly pointed out and explained this reasoning in both the general description of my submission and in the step-by-step notes. In summary, be exceptionally clear in your submission about everything; your reasoning as to why you need this permission, how they can access it, etc. Just to make sure it isn't missed if skim-read.