As part of our continuing series of “how tos,” we thought it’d be interesting to show how you can easily upload photos to a user’s profile. Photos are a deeply integrated part of the Facebook experience. Publishing photos adds a photo to user’s profile and also generates a newsfeed story about the photo with a link to your app. This is a great way to engage the user’s friends and drive interest for and traffic back to your app.
Here’s a sample photo published on a user profile from my ‘Photo upload test app’ app and the newsfeed story published as a result.
<
p> This How-To will walk you through the album and photo objects in the Graph API and the steps you need to take in order to upload a photo to a user’s profile.
<
p>
Publishing an Photo
In order to publish a photo to a user’s album, you must have the publish_stream permission. With that granted, you can upload a photo by issuing an HTTP POST request with the photo content and an optional description to one these to Graph API connections:
-
https://graph.facebook.com/USER_ID/photos- The photo will be published to an album created for your app. We automatically create an album for your app if it does not already exist. All photos uploaded this way will then be added to this same album. -
https://graph.facebook.com/ALBUM_ID/photos- The photo will be published to a specific, existing photo album, represented by the ALBUM_ID.
Sample code will be provided for the corresponding two scenarios:
- Uploading a photo to your app’s album.
- Creating a new album and uploading a photo to the album you create.
Scenario 1: Uploading a photo to the app’s album
This is the scenario where you upload a photo to the USER_ID/photos Graph API endpoint. The user interface for this example allows the user to select a photo and add a caption before submitting the new photo. The newly created photo ID is returned to the user.
Using PHP:
<?php
$app_id = "YOUR_APP_ID";
$app_secret = "YOUR_APP_SECRET";
$post_login_url = "YOUR_POST_LOGIN_URL";
$code = $_REQUEST["code"];
//Obtain the access_token with publish_stream permission
if(empty($code)){
$dialog_url= "http://www.facebook.com/dialog/oauth?"
. "client_id=" . $app_id
. "&redirect_uri=" . urlencode( $post_login_url)
. "&scope=publish_stream";
echo("<script>top.location.href='" . $dialog_url
. "'</script>");
}
else {
$token_url="https://graph.facebook.com/oauth/access_token?"
. "client_id=" . $app_id
. "&redirect_uri=" . urlencode( $post_login_url)
. "&client_secret=" . $app_secret
. "&code=" . $code;
$response = file_get_contents($token_url);
$params = null;
parse_str($response, $params);
$access_token = $params['access_token'];
// Show photo upload form to user and post to the Graph URL
$graph_url= "https://graph.facebook.com/me/photos?"
. "access_token=" .$access_token;
echo '<html><body>';
echo '<form enctype="multipart/form-data" action="'
.$graph_url .' "method="POST">';
echo 'Please choose a photo: ';
echo '<input name="source" type="file"><br/><br/>';
echo 'Say something about this photo: ';
echo '<input name="message"
type="text" value=""><br/><br/>';
echo '<input type="submit" value="Upload"/><br/>';
echo '</form>';
echo '</body></html>';
}
?>
Example Response
{
"id": "1001207389476"
}
Scenario 2: Creating a New Album and Adding a Photo
This is the scenario where you upload a photo to the ALBUM_ID/photos Graph API endpoint. The user interface for this example allows the user to select a photo and add a caption before submitting the new photo.
Using PHP:
<?php
$app_id = "YOUR_APP_ID";
$app_secret = "YOUR_APP_SECRET";
$post_login_url = "YOUR_POST-LOGIN_URL";
$album_name = 'YOUR_ALBUM_NAME';
$album_description = 'YOUR_ALBUM_DESCRIPTION';
$code = $_REQUEST["code"];
//Obtain the access_token with publish_stream permission
if(empty($code))
{
$dialog_url= "http://www.facebook.com/dialog/oauth?"
. "client_id=" . $app_id
. "&redirect_uri=" . urlencode($post_login_url)
. "&scope=publish_stream";
echo("<script>top.location.href='" . $dialog_url .
"'</script>");
}
else {
$token_url= "https://graph.facebook.com/oauth/"
. "access_token?"
. "client_id=" . $app_id
. "&redirect_uri=" . urlencode( $post_login_url)
. "&client_secret=" . $app_secret
. "&code=" . $code;
$response = file_get_contents($token_url);
$params = null;
parse_str($response, $params);
$access_token = $params['access_token'];
// Create a new album
$graph_url = "https://graph.facebook.com/me/albums?"
. "access_token=". $access_token;
$postdata = http_build_query(
array(
'name' => $album_name,
'message' => $album_description
)
);
$opts = array('http' =>
array(
'method'=> 'POST',
'header'=>
'Content-type: application/x-www-form-urlencoded',
'content' => $postdata
)
);
$context = stream_context_create($opts);
$result = json_decode(file_get_contents($graph_url, false,
$context));
// Get the new album ID
$album_id = $result->id;
//Show photo upload form and post to the Graph URL
$graph_url = "https://graph.facebook.com/". $album_id
. "/photos?access_token=" . $access_token;
echo '<html><body>';
echo '<form enctype="multipart/form-data" action="'
.$graph_url. ' "method="POST">';
echo 'Adding photo to album: ' . $album_name .'<br/><br/>';
echo 'Please choose a photo: ';
echo '<input name="source" type="file"><br/><br/>';
echo 'Say something about this photo: ';
echo '<input name="message" type="text"
value=""><br/><br/>';
echo '<input type="submit" value="Upload" /><br/>';
echo '</form>';
echo '</body></html>';
}
?>
Example Response
{
"id": "1001207389476"
}
Christine, a Partner Engineer, hopes to see more apps use the Graph API to upload photos.