Reputation: 143
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.
Upvotes: 7
Views: 25995
Reputation: 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);
});
Upvotes: 0
Reputation: 294
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+'"/>';
}); }
Upvotes: 1
Reputation: 2600
@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;
});
Upvotes: 4
Reputation: 969
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
Upvotes: 1
Reputation: 2039
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.
Upvotes: 2
Reputation: 1
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;
};
Upvotes: 0
Reputation: 9648
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.
Upvotes: 12
Reputation: 1
It should not be response.data.url....Try with response.picture.data.url
Upvotes: 0
Reputation: 39
try this:
FB.api('/me/picture?type=normal', function(response) {
var str="<img style='border: 3px solid #3a3a3a;' src='"+response.data.url+"'/>";
return str;
});
Upvotes: 1
Reputation: 4906
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
Upvotes: 4