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

admin管理员组

文章数量:1312681

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="/'+ response.id+'/picture?type=large"/>');
  });
  }

However, the array which is suppose to contain all my friends info is empty (see image : )

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./'+ response.id+'/picture?type=large"/>');
  });
  }

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

• javascript
• facebook
• facebook-graph-api
• facebook-graph-api-v2.0

Share Improve this question Follow edited Oct 16, 2017 at 20:27 ROMANIA_engineer 56.7k3030 gold badges209209 silver badges205205 bronze badges asked May 19, 2014 at 19:42 Pierre ARNOUPierre ARNOU 9111 silver badge66 bronze badges 3

• 2 Was your app created after 4/30/2014? In that case you can not use API v1.0 – WizKid Commented May 19, 2014 at 19:57
• Hi! Thanks for your ment. Yes the app was created in May 2014 so it seems like I have to use the v2.0. – Pierre ARNOU Commented May 19, 2014 at 21:10
• 1 Ok, in API v2.0 you only get access to friends that use your app (not all of them) and all friends_* permissions have been removed. – WizKid Commented May 19, 2014 at 22:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 mon 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./docs/graph-api/reference/v2.0/user/taggable_friends https://developers.facebook./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 prehensive, 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.

It seems like in V2.0, Friends permission have dissapeared : Facebook graph api explorer doesn't show 'Friends Data Permission' tab https://developers.facebook./docs/facebook-login/permissions/v2.0

本文标签： How to get Facebook user39s friends39 profile picture using Javascript SDK V20Stack Overflow