Displaying a picture from the Facebook API in a client-side popup window

Question

I'm trying to post a Facebook profile picture into a Jquery popup window and do not know what I need to do after getting a FB access token (see "Client-side flow" at https://developers.facebook.com/docs/authentication/ ).

I'm able to successfully get a FB user object's ID using the FB Javascript SDK via the FB.api (after getting an access token):

 FB.api('/me', function(response) {
   alert(response.id);
 });

The FB.api returns the user's id in a popup box; however, I need to use the user's id to access his/her picture with the following URL:

 http://graph.facebook.com/(INSERT USER'S ID)/picture

Can somebody tell me how to get the ID from the FB.api so I can create the appropriate URL to pull up the image in a Jquery popup window? Please keep in mind that I'm very new to Facebook's API and Jquery.

Thanks in advance for your help!

Answer 1

If the current facebook user is authenticated, the response of the javascript call " FB.api('/me', function(response) " is the user object and you can retrieve the facebook ID of the user using response.id. The profile image url of the user would be the same as you have mentioned in your question.

To insert this image in a popup, you can use the following code (I am assuming that you already have created a image tag to show this profile image in)

   FB.api('/me', function(response) {
      $("#"+youImageTagId).attr('src', "http://graph.facebook.com/"+response.id+"/picture")       
   });

Answer 2

Use this URL to get profile picture.

 https://graph.facebook.com/me/picture?access_token=YOUR_ACCESS_TOKEN

Here after getting access token you will not required user's ID. Just write 'me' in place of user's ID. And replace YOUR_ACCESS_TOKEN by your access token which you got.

You can directly try it in browser. Write this url in browser. It will show profile picture on browser.