How can I display the users profile pic using the facebook graph api?

Php Problem Overview

I would like to display the users profile picture inside of my applications canvas page, is there a way to do that using the graph api?

I know I can do it using FBML but I would also like to pass the profile pic to a flash game I am making, so I would have to get the profile pic from the api and send it as a variable, here is the code I have thus far,

$facebook = new Facebook(array(
    'appId'  => FACEBOOK_APP_ID,
    'secret' => FACEBOOK_SECRET_KEY,
    'cookie' => true,
    'domain' => 'myurl/facebook-test'
));
 
$session = $facebook->getSession();

        $uid = $facebook->getUser();
        $me = $facebook->api('/me');
 
        $updated = date("l, F j, Y", strtotime($me['updated_time']));
 
        echo "Hello " . $me['name'] . $me['picture'] . "<br />";
  echo "<div style=\"background:url(images/bg.jpg); width:760px; height:630px;\">" . "You last updated your profile on " . $updated . "</div>" . "<br /> your uid is" . $uid;

$me['picture'] does not seem to be working, but I am still very new to the graph api, and I am probably making a few very amateur mistakes!

Php Solutions

Solution 1 - Php

Knowing the user id the URL for their profile picture is:-

http://graph.facebook.com/[UID]/picture

where in place of [UID] you place your $uid variable, and that URL can be passed to flash

Solution 2 - Php

to get different sizes, you can use the type parameter:

You can specify the picture size you want with the type argument, which should be one of square (50x50), small (50 pixels wide, variable height), and large (about 200 pixels wide, variable height): http://graph.facebook.com/squall3d/picture?type=large.

Solution 3 - Php

You can also resize the profile picture by providing parameters as shown below.

https://graph.facebook.com/[UID]/picture?width=140&height=140

would work too.

Solution 4 - Php

  //create the url
  $profile_pic =  "http://graph.facebook.com/".$uid."/picture";
	
 //echo the image out
 echo "<img src=\"" . $profile_pic . "\" />";

Works fine for me

Solution 5 - Php

EDIT: So facebook has changed it again! No more searching by username - have amended the answer below...

https://graph.facebook.com/{{UID}}/picture?redirect=false&height=200&width=200

UID = the profile or page id
redirect either returns json (false) or redirects to the image (true)
height and width is the crop
does not require authentication

e.g. https://graph.facebook.com/4/picture?redirect=false&height=200&width=200

Facebook Graph picture doc

Solution 6 - Php

Here is the code that worked for me!

Assuming that you have a valid session going,

//Get the current users id
$uid = $facebook->getUser();

//create the url
$profile_pic =  "http://graph.facebook.com/".$uid."/picture";

//echo the image out
echo "<img src=\"" . $profile_pic . "\" />";

Thanx goes to Raine, you da man!

Solution 7 - Php

I was having a problem fetching profile photos while using CURL. I thought for a while there was something wrong my implementation of the Facebook API, but I need to add a bit to my CURL called:

curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);

Solution 8 - Php

One very important thing is that like other Graph API request, you won't get the JSON data in response, rather the call returns a HTTP REDIRECT to the URL of the profile pic. So, if you want to fetch the URL, you either need to read the response HTTP header or you can use FQLs.

Solution 9 - Php

The returned data is the binary data of the image type. If you use JavaScript to retrieve the user photo, please get the photo data as blob type in a XMLHttpRequest, and then retrieve the blob URL from the response. For your reference:

 var request = new XMLHttpRequest;
 var photoUri=config.endpoints.graphApiUri + "/v1.0/me/photo/$value";
 request.open("GET",photoUri);
 request.setRequestHeader("Authorization","Bearer "+token);
 request.responseType = "blob";
 request.onload = function (){
        if(request.readyState == 4 && request.status == 200){
               var image = document.createElement("img");
               var url = window.URL || window.webkitURL;
               var blobUrl = url.createObjectURL(request.response);
               image.src = blobUrl;
               document.getElementById("UserShow").appendChild(image);
        }
 };
 request.send(null);

Content Type	Original Author	Original Content on Stackoverflow
Question	Odyss3us	View Question on Stackoverflow
Solution 1 - Php	hndcrftd	View Answer on Stackoverflow
Solution 2 - Php	squall3d	View Answer on Stackoverflow
Solution 3 - Php	Deepak Thomas	View Answer on Stackoverflow
Solution 4 - Php	Kannan Prasad	View Answer on Stackoverflow
Solution 5 - Php	sidonaldson	View Answer on Stackoverflow
Solution 6 - Php	Odyss3us	View Answer on Stackoverflow
Solution 7 - Php	adjwilli	View Answer on Stackoverflow
Solution 8 - Php	Sanket Sahu	View Answer on Stackoverflow
Solution 9 - Php	Dilhan Chathushka	View Answer on Stackoverflow