Tutorial :Facebook Login with Open Graph

Question:

 //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 I can add the facebook users profile pic to the above code...After someone connects to my site they will get a Welcome, (their name) to my site....How can I also add there profile picture after Login along with the Welcome note?

Solution:1

I hope by now you've solved this but if not you need to use the access token supplied by the getLoginStatus response.
Check out: http://developers.facebook.com/docs/api
The example links for Users, Pages, Events etc are misleading. If you hover over the links you'll see that Facebook adds "?access_token=%TOKEN%" to each link. That's what you'll need to do.

You function will probably look something like this depending on how you work it. Hope this helps.

  window.fbAsyncInit = function()    {     FB.init({ appId: 'Your App Id', status:true, cookie:true, xfbml:true });     FB.getLoginStatus(function(response){      if(response.session){       /* Fetch Access Token Data Here and set to Global Var */       var access_token = response.session.access_token;       /* Other Init Functions */      }     });      function login()      {      FB.api('/me', function(response){         /* Use Access Token Data Here */       document.getElementById('fb-info-block').innerHTML = (        "Welcome, " + response.name + ".<br /><br />" +        '<br/><img src="https://graph.facebook.com/me/picture?access_token='+ access_token +'"/><br/>'+        "<fb:like href = 'www.whitbreaddesign.com' show_faces = 'false' width = '100' action = 'like' colorscheme = 'light'></fb:like>"       );      });     }    }

Solution:2

<img src="http://graph.facebook.com/me/picture">

Solution:3

Why don't you use fbml tags:

fb:profile-pic and fb:name (http://developers.facebook.com/docs/reference/fbml/)

And once, you put that FBML inside your div, you may need to call FB.XFBML.Parse() javascript function. (It pre-exists as I assume you must have included facebook's javascript by now)

Solution:4

The me shortcut will only work if the person is logged in to fb. You can also use their facebook Id:

<img src="https://graph.facebook.com/220439/picture">

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com