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:

Sample code will be provided for the corresponding two scenarios:

  1. Uploading a photo to your app’s album.
  2. 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>&lt/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.