How to fetch profile picture from facebook javascr

Question

I am trying to fetch profile picture from facebook. Right now I am getting all information from facebook but unable to get profile pic of the user. Here is my code:

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);
        }); 

How can I get picture from response of this API.

Answer 1

Why don't you just use the id you've already retrieved and display the image directly? Why do you need to make an extra call?

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");
});
}

For example http://graph.facebook.com/4/picture?type=normal redirects to Mark Zuck's picture

If you're having trouble log the url out to make sure you're getting a valid id back and paste the url into a browser.

Answer 2

I have tried this and this is running successfully. Try this :

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 ;

});

Hope You got the answer.

Answer 3

Try Like

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 );
            }
    );

});

This will give you the Link of the image and you can use it appropriately

One More Option

Answer 4

You Can Try These Example:

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;
};

Answer 5

It should not be response.data.url....Try with response.picture.data.url

Answer 6

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+'"/>';

}); }