How to get profile picture from javascript SDK framework?

Question

I am trying to get a profile picture from facebook. Right now I am getting all the information from facebook, but I can’t get the user profile profile. 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 an image from the response of this API.

Answer 1

Why don't you just use the identifier you already extracted and display the image directly? Why do you need an extra call?

eg

 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 a Mark Zuck image

If you are having problems, register the URL to make sure you return the correct identifier and paste the URL into the browser.

Answer 2

Try

 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 a link to the image and you can use it accordingly

Another option

Answer 3

I tried this and it works successfully. Try the following:

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

I hope you have an answer.

Answer 4

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

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

Answer 5

try the following:

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

Answer 6

I know this post is outdated, but other answers give my site broken links (concatenating the user ID with the rest of the URL to receive 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 white papers, how do you get a user profile picture

Answer 7

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

Answer 8

You can try the following 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; };