Facebook Login with Open Graph

Answer 1

<img src="http://graph.facebook.com/me/picture"&gt;

Answer 2

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)

Answer 3

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"&gt;

Answer 4

Hi Eddie,

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