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

Question

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)

Answer 1

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.