Post photo on user's wall using Facebook iOS SDK

Question

I\'m trying to upload a photo from the camera to a user\'s Facebook wall. I\'m not entirely sure what the correct strategy is, but from reading around it seems the thing to

Answer 1

I searched far and wide for a solution that worked on the latest APIs, until I came across this:

http://xcodenoobies.blogspot.co.uk/2012/09/how-to-upload-photo-and-update-status.html

By far the clearest solution I've come across, simple and works with the latest API.

Answer 2

I did this in three steps

1 post picture to album (returns imageID)

2 use imageID to request metadata for imageID

3 use the 'link' field (not the 'source' field) as a link to the image in a post to the user's wall

The downside is that there are now two posts to the wall, one for the image, and one for the actual post. I haven't figured out yet how to post a picture to an album, without also a wall post appearing (ideally it would just be the 2nd post that appears)

Step 1:

- (void) postImageToFacebook {

    appDelegate = (ScorecardAppDelegate *)[[UIApplication sharedApplication] delegate];

    currentAPICall = kAPIGraphUserPhotosPost;

    UIImage *imgSource = {insert your image here};
    NSString *strMessage = @"This is the photo caption";
    NSMutableDictionary* photosParams = [NSMutableDictionary dictionaryWithObjectsAndKeys:
                                         imgSource,@"source",
                                         strMessage,@"message",
                                         nil];

    [appDelegate.facebook requestWithGraphPath:@"me/photos"
                                     andParams:photosParams
                                 andHttpMethod:@"POST"
                                   andDelegate:self];     

    // after image is posted, get URL for image and then start feed dialog
    // this is done from FBRequestDelegate method
}

Step 2 (kAPIGraphUserPhotosPost) & step 3 (kAPIGraphPhotoData):

- (void)request:(FBRequest *)request didLoad:(id)result {

    if ([result isKindOfClass:[NSArray class]] && ([result count] > 0)) {
        result = [result objectAtIndex:0];
    }

    switch (currentAPICall) {
        case kAPIGraphPhotoData: // step 3
        {
            // Facebook doesn't allow linking to images on fbcdn.net.  So for now use default thumb stored on Picasa
            NSString *thumbURL = kDefaultThumbURL;
            NSString *imageLink = [NSString stringWithFormat:[result objectForKey:@"link"]];    

            currentAPICall = kDialogFeedUser;
            appDelegate = (ScorecardAppDelegate *)[[UIApplication sharedApplication] delegate];


            NSMutableDictionary* dialogParams = [NSMutableDictionary dictionaryWithObjectsAndKeys:
                                     kAppId, @"app_id",
                                     imageLink, @"link",
                                     thumbURL, @"picture",
                                     @"Just Played Wizard etc etc", @"name",
                                     nil];

            [appDelegate.facebook dialog:@"feed" 
                               andParams:dialogParams 
                             andDelegate:self];


            break;
        }
        case kAPIGraphUserPhotosPost: // step 2
        {

            NSString *imageID = [NSString stringWithFormat:[result objectForKey:@"id"]];            
            NSLog(@"id of uploaded screen image %@",imageID);

            currentAPICall = kAPIGraphPhotoData;
            appDelegate = (Scorecard4AppDelegate *)[[UIApplication sharedApplication] delegate];

            [appDelegate.facebook requestWithGraphPath:imageID
                                           andDelegate:self];
            break;
        }
    }
}

I've modified the code to show just the Facebook stuff condensed. If you want to check if the post is successful you'll want something like this:

- (void)dialogDidComplete:(FBDialog *)dialog {
    switch (currentAPICall) {
        case kDialogFeedUser:
        {
            NSLog(@"Feed published successfully.");
            break;
        }
    }
}

The blue text in the Facebook post is whatever you put in the "name" parameter in Step 3. Clicking on the blue text in Facebook will take you to the photo posted in Step 1, in an album in Facebook (Facebook creates a default album for your app if you don't specify an album). In my app's case it's the full-sized image of the scorecard (but could be any image, e.g. from the camera). Unfortunately I couldn't figure out a way to make the thumb image a live link, but it's not very readable so a default thumb works in my case. The part in the Facebook post (in black font) that says "First game of the year..." is entered by the user.

Answer 3

It's clearer what you wish to do - post a photo to FB, and guarantee that a post goes on the user's wall/stream.

Unfortunately, there are some things in the way.

FB Graph API appears to only allow you to post EITHER a picture to an album, or post to the wall directly, linking to a picture already existing somewhere on the web. In the first case, a post in the stream will probably be made, but FB appears to consolidate multiple posts in some manner so as to keep the user's stream from being bombarded. The mechanism for this is not documented anywhere I could see.

In the second case, you might think you could get away with posting to an album, and then explicitly posting a link to the album. You can add a parameter to the original album post, "no_story" with a value of 1, and suppress the wall post that might be made while you prepare to make an explicit one. However, FB will not have the source URL for a newly posted image for a while, AND, it doesn't appear to like URLs that include its own content delivery network, returning an error. You might think to simply put status update in the stream, talking about the post, However, the Graph API is also limited to 25 such direct feed posts per day per app, to prevent spamming.

One solution would be to post to something like Flickr, get the URL of the image, and then post to the wall. FB's preferred solution appears to be to use the FB dialogs that are part of the mobile toolkit - essentially little web pages much like the OAuth screen.

Personally, I plan to simply post to the album as above, and live with FB's idea of how the user should be notified. Curious how you choose to proceed.

Answer 4

I'm not sure what part isn't working for you, since you are posting and getting an ID back, but here is what I did in a quick and dirty way, in case someone reaches here via Google.

This is an HTTP POST function, and the binary data of the file goes up as multipart mime.

I'm a big fan of the ASIHTTPRequest library available here.

**UPDATE: 10/22/2012 ** - AFNetworking has replaced ASIHTTPRequest in my code in the past few months. Available on GitHub here

Facebooks docs are confusing, partly because they are incomplete and partly because they can be wrong. You'll probably tear some hair out figuring out exactly what post value to set for a caption or something, but this recipe puts a photo into an album, and that goes into the feed.

You still need to set up the Facebook OAuth stuff in the basic way - I happened to do that in the app delegate, so I grab the Facebook object from there to get my access token. I made sure to ask for the "publish_stream" permission when I authenticated, like this:

[facebook authorize:[NSArray arrayWithObjects:@"publish_stream", nil] delegate:self];

This will create or add to an album called "YOUR_APP_NAME Photos", and will appear in the user's feed. You can put it in any album, including the "Wall" album, by getting the ID of that album and changing the URL to http://graph.facebook.com/THE_ID_OF_THE_ALBUM/photos.

Here's the basic method:

-(void) postImageToFB:(UIImage *) image
{

    NSData* imageData = UIImageJPEGRepresentation(image, 90);
    Facebook* fb = [(uploadPicAppDelegate *)[[UIApplication sharedApplication] delegate] facebook   ];


    ASIFormDataRequest *request = [ASIFormDataRequest requestWithURL:[NSURL URLWithString:@"https://graph.facebook.com/me/photos"]];
    [request addPostValue:[fb accessToken] forKey:@"access_token"];
    [request addPostValue:@"image message" forKey:@"message"];
    [request addData:imageData forKey:@"source"];

    [request setDelegate:self];
    [request startAsynchronous];  
}

Using the Facebook provided iOS library looks like this:

-(void) postImageToFB:(UIImage *) image
{

    NSData* imageData = UIImageJPEGRepresentation(image, 90);
    Facebook* fb = [(uploadPicAppDelegate *)[[UIApplication sharedApplication] delegate] facebook   ];

    NSMutableDictionary * params = [NSMutableDictionary dictionaryWithObjectsAndKeys:[fb accessToken],@"access_token",
                                    @"message text", @"message",
                                    imageData, @"source",
                                    nil];
    [fb requestWithGraphPath:@"me/photos" 
                   andParams:params 
               andHttpMethod:@"POST" 
                 andDelegate:self];


}

Answer 5

Using Facebook SDK 3.0:

 - (void)postPhotoThenOpenGraphAction {
    FBRequestConnection *connection = [[FBRequestConnection alloc] init];

    // First request uploads the photo.
    FBRequest *request1 = [FBRequest 
        requestForUploadPhoto:self.selectedPhoto];
    [connection addRequest:request1
        completionHandler:
        ^(FBRequestConnection *connection, id result, NSError *error) {
            if (!error) {
            }
        }
            batchEntryName:@"photopost"
    ];

    // Second request retrieves photo information for just-created 
    // photo so we can grab its source.
    FBRequest *request2 = [FBRequest 
        requestForGraphPath:@"{result=photopost:$.id}"];
    [connection addRequest:request2
         completionHandler:
        ^(FBRequestConnection *connection, id result, NSError *error) {
            if (!error &&
                result) {
                NSString *source = [result objectForKey:@"source"];
                [self postOpenGraphActionWithPhotoURL:source];
            }
        }
    ];

    [connection start];
}

They follow this post with an OpenGraph action publish ([self postOpenGraphActionWithPhotoURL:source];), but if you just want the image on the user's wall, you wont need that.

More info: https://developers.facebook.com/docs/tutorials/ios-sdk-tutorial/publish-open-graph-story/#step7

Yay!, FB SDK 3.0 rocks! No more AppDelegate.facebook :)