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

You can follow instruction from this link > https://developers.facebook.com/docs/facebook-login/web/

when you try to get response from profile by default you gonna get only id and name

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

but if you want to get email and picture you need to add parameter like this

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

Answer 2

try this:

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

Answer 3

I know this post is old, but the other answers are giving my website broken links (concatenating the user ID with the rest of the URL to get the image).

I found that the correct way to do this is as follows (according to the official docs here: 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 */
      }
    }
);

From the official docs, the way you get the profile picture of a user

Answer 4

@hiraa is right, but the code is missing. Here it goes

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