如何从Facebook javascript SDK获取个人资料图片?

时间:2014-07-30 10:01:31

标签: javascript ajax facebook

我正在尝试从Facebook获取个人资料图片。现在我从facebook获取所有信息,但无法获得用户的个人资料照片。这是我的代码:

function getFBData () {
    FB.api('/me', function(response) {
      fbinfo = new Array();
      fbinfo[0] = response.id;
      fbinfo[1] = response.first_name;
      fbinfo[2] = response.last_name;
      fbinfo[3] = response.email;
      FB.api('/me/picture?type=normal', function (response) {
         var im = document.getElementById("profileImage").setAttribute("src", response.data.url);
         alert(im);
        }); 

如何从此API的响应中获取图片。

10 个答案:

答案 0 :(得分:13)

为什么不使用您已检索到的ID并直接显示图像?你为什么需要额外打电话?

e.g

function getFBData () {
FB.api('/me', function(response) {
  fbinfo = new Array();
  fbinfo[0] = response.id;
  fbinfo[1] = response.first_name;
  fbinfo[2] = response.last_name;
  fbinfo[3] = response.email;

     var im = document.getElementById("profileImage").setAttribute("src", "http://graph.facebook.com/" + response.id + "/picture?type=normal");
});
}

例如http://graph.facebook.com/4/picture?type=normal重定向到Mark Zuck的图片

如果您在记录网址时遇到问题,请确保您获得有效的ID并将网址粘贴到浏览器中。

答案 1 :(得分:4)

尝试喜欢

FB.api("/me", {fields: "id,name,picture"}, function(response)
{

    FB.api(
            {
                method: 'fql.query',
                query: 'SELECT pid, src_big, src_big_height, src_big_width FROM photo WHERE aid IN ( SELECT aid FROM album WHERE owner="' + response.id + '" AND name = "Profile Pictures")'
            },
            function(data1) {
                alert( data1[0].src_big );
            }
    );

});

这将为您提供图像的链接,您可以适当地使用它

One More Option

答案 2 :(得分:4)

@hiraa是对的,但代码丢失了。在这里

FB.api('/me', {fields: 'id,name,email,picture'}, function (response) {
    var picture_url = picture.data.url;
});

答案 3 :(得分:2)

我已经尝试过这个并且运行成功了。试试这个:

FB.api('/me', { fields: 'id, name, email' }, function(response) 
{
    var userInfo = document.getElementById('user-info');
    userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name ;

});
希望你能得到答案。

答案 4 :(得分:1)

试试这个:

FB.api('/me/picture?type=normal', function(response) {
    var str="<img style='border: 3px solid #3a3a3a;' src='"+response.data.url+"'/>";
    return str;
});

答案 5 :(得分:1)

它不应该是response.data.url ....尝试使用response.picture.data.url

答案 6 :(得分:1)

我知道这篇文章已经过时了,但其他答案正在给我的网站断开链接(将用户ID与其余网址连接起来以获取图片)。

我发现正确的方法如下(根据官方文档:https://developers.facebook.com/docs/graph-api/reference/user/picture/):

/* make the API call */
FB.api(
    "/{user-id}/picture",
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);

从官方文档中,您获取用户个人资料照片的方式

答案 7 :(得分:0)

你可以试试这些例子:

function(){
  var url=null;
    FB.getLoginStatus(function(response){

  if (response.status === 'connected') {
    console.log("getting photo")
    FB.api(
    "/me/picture",
    function (response) {
      if (response && !response.error) {
      console.log(response);
      url=response.data.url;
      console.log(url);
    }else {
      console.log("Error Occured");
    }
    }
);
  }
});
  return url;
};

答案 8 :(得分:0)

function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
    document.getElementById('profilepic').innerHTML = '<img src="'+response.picture.data.url+'"/>';

}); }

答案 9 :(得分:0)

您可以按照此链接中的说明进行操作> https://developers.facebook.com/docs/facebook-login/web/

默认情况下,当您尝试从个人资料获取回复时,您只会获得idname

FB.api('/me', function(response) {
  console.log('Successful login for: ' + response);
});

但是如果要获取emailpicture,则需要添加这样的参数

FB.api('/me' {fields: "id, name, email, picture"}, function(response) {
  console.log('Successful login for: ' + response);
});