Add Facebook Profile Picture after Login?

Question

Here is my code::

//if user is logged in - do this
function login() {
FB.api('/me', function(response) {  
document.getElementById('fb-info-block').innerHTML = 
"Welcome, " + response.name + ".<br /><br />" +
"<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>";
});
}

Can someone tell me how to add the users facebook profile within this code...I already figured out how to retrieve their name with "Welcome, "+ response.name+"

Any ideas..thanks a bunch...

Answer 1

You need to list fields you are interested in as a second parameter to FP.api:

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

Here is a list of all available fields

Answer 2

document.getElementById('something').innerHTML = '<img src="http://graph.facebook.com/' + response.id + '/picture" />';

Answer 3

@ceejayoz Can you tell me how to add the above script together with what you added...I just want to add login name and their profile picture after login....thanks so much!

Answer 4

You could use the FBML tag for profile pics:

var profile_pic_html = '<fb:profile-pic></fb:profile-pic>';

Just add that anywhere on the page, and as long as you have FB Connect's xd_receiver setup, that will show the currently logged in user's profile pic. To show profile pics by UID use:

var profile_pic_html = '<fb:profile-pic uid="'+some_uid+'" ></fb:profile-pic>';

Answer 5

You need to call FB.XFBML.Parse() so that your updated FBML can be parsed into HTML by facebook's javascript. You may be missing that.

Answer 6

Maybe just use XFBML?:

<fb:name uid="loggedinuser" use-you="no"></fb:name>
<fb:profile-pic uid="loggedinuser" size="square" facebook-logo="true"></fb:profile-pic>

Here's an example: http://fbrell.com/xfbml/account-info