Posting image to FaceBook wall from iPhone camera roll with PhoneGap

I am using PhoneGap to publish an image to a FaceBook wall from an iPhone.

I am able to log in a FaceBook account and publish a HOSTED image (http://www.mysite.com/my_image.jpg) but not an image from the iPhone.

Here is the script to post to FB:

function fbPost() {
    $.ajax({
           type: 'POST',
           url: "https://graph.facebook.com/me/feed",
           data: {
                message: "<FACEBOOK MESSAGE>",
                PICTURE: "<IMAGE URL>",
                name: "<TITLE OF POST>",
                link: "<LINK TO APP>",
                caption: "<SHOWN BELOW TITLE>",
                description: "<SHOWN BELOW CAPTION>",
                a开发者_Python百科ccess_token: access_token,
                format: "json"
           },
           success: function (data) {
               navigator.notification.alert("success!", null, "Thanks!")
           },
                   },
           dataType: "json",
           timeout: 10000
           })
}

Here is the code to get an image from the iPhone (camera roll or album):

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.FILE_URI }); 

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

(http://docs.phonegap.com/phonegap_camera_camera.md.html).

When I use an image from the iPhone, the URI of the image is something like: file:///var/mobile/Applications/..../Documents/tmp/photo_001.jpg

Again, I am able to publish an image when I specify a hosted (http://...) image, but not when it's an image from the iPhone.

I would greatly apreciate any help.

Thank you.

Rob

Facebook can not access a local file on your telephone. I dont know about the ways you can upload a photo to facebook, but as you said before it works if you use a public hosted file.

So I think you got two choices here: Upload the foto to a server an then post the url of the file to facebook. (you can use the file api of phonegap to do that, theres event an upload plugin), but i think this is not really a good solution.

I would suggest to find if you can post the image data to facebook (maybe base64 encoded) and use the phonegap api to get the base64 encoded content of the foto and post this directly to facebook

I write a PhoneGap plug-in use Graph API to post photos from iPhone/iPad to Facebook. This plug-in can also post photo with Facebook place id (means it can Checkin Facebook with photo) and works fine on iOS 6.0.

It's based on PhoneGap 2.1 and phonegap-plugin-facebook-connect, and not need any middle host, maybe it can solve your problem ;)

First, the PhotoCheckin.h is...

#import <Foundation/Foundation.h>
#import "Facebook.h"
#import "FBConnect.h"

#import <Cordova/CDV.h>

@interface PhotoCheckin : CDVPlugin
<FBDialogDelegate>

- (void) sendPost:(CDVInvokedUrlCommand*)command;

@end

Second, PhotoCheckin.m as follow.

#import "PhotoCheckin.h"
#import "FBSBJSON.h"

@implementation PhotoCheckin

- (void) sendPost:(CDVInvokedUrlCommand*)command {
    UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[command.arguments objectAtIndex:0]]]];
    NSString* message = [command.arguments objectAtIndex:1];
    NSString* place_id = [command.arguments objectAtIndex:2];
    NSLog(@"%@",message);

    NSMutableDictionary *params = [NSMutableDictionary dictionaryWithObjectsAndKeys:image, @"source",message,@"message",place_id, @"place", nil];

    if (FBSession.activeSession.isOpen) {
        [FBRequestConnection startWithGraphPath:@"me/photos"
                                     parameters:params
                                     HTTPMethod:@"POST"
                              completionHandler:^(FBRequestConnection *connection, id result, NSError *error) {
                                  NSString *resultStr = nil;
                                  if (error) {
                                      //resultStr = [NSString stringWithFormat:@"error: domain = %@, code = %d",error.domain, error.code];
                                      resultStr = [[CDVPluginResult resultWithStatus:CDVCommandStatus_JSON_EXCEPTION messageAsString:[NSString stringWithFormat:@"error: domain = %@, code = %d",error.domain, error.code]] toErrorCallbackString:command.callbackId];
                                  }else{
                                      //resultStr = [NSString stringWithFormat:@"Posted action, id: %@",[result objectForKey:@"id"]];
                                      resultStr = [[CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:[NSString stringWithFormat:@"Posted action, id: %@",[result objectForKey:@"id"]]] toSuccessCallbackString:command.callbackId];
                                  }
                                  //[[[UIAlertView alloc] initWithTitle:@"Check-in Result" message:resultStr delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil] show];
                                  [self writeJavascript:resultStr];
                              }];
    }else{
        NSLog(@"no active session");

        NSArray *permissions = [[NSArray alloc] initWithObjects:@"publish_stream",nil];
        // more "permissions strings" at http://developers.facebook.com/docs/authentication/permissions/

        // OPEN Session
        [FBSession openActiveSessionWithPermissions:permissions
                                       allowLoginUI:YES
                                  completionHandler:^(FBSession *session,
                                                      FBSessionState status,
                                                      NSError *error) {
                                      if (FB_ISSESSIONOPENWITHSTATE(status)) {
                                          [[[UIAlertView alloc] initWithTitle:@"Got FB session!" message:@"please check-in again." delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil] show];
                                      }else{
                                          [self writeJavascript:[[CDVPluginResult resultWithStatus:CDVCommandStatus_JSON_EXCEPTION messageAsString:[NSString stringWithFormat:@"error: domain = %@, code = %d",error.domain, error.code]] toErrorCallbackString:command.callbackId]];
                                          /*[[[UIAlertView alloc] initWithTitle:@"Login Fail"
                                                                      message:[NSString stringWithFormat:
                                                                               @"error: domain = %@, code = %d",
                                                                               error.domain, error.code]
                                                                     delegate:self
                                                            cancelButtonTitle:@"OK"
                                                            otherButtonTitles:nil]
                                           show];*/
                                      }
                                  }];
    }
}


@end

Notes: this method will callback when posted, some code lines were commented out, which can make alert to users.

Third, the PhotoCheckin.js as follow.

var PhotoCheckin = {
    sendPost: function(photo_uri, message, place_id, success, fail) {
        return Cordova.exec(success, fail, "PhotoCheckin", "sendPost", [photo_uri, message, place_id]);
    }
}

Finally, when we went to use the plug-in, we write js as follow. (in .html/.js)

PhotoCheckin.sendPost(photo_uri, message, place_id,
    function(result){
        navigator.notification.confirm(
            'message: '+result,
            null,
            'Photo Posted',
            'OK'
        );
    },
    function(error){
        navigator.notification.confirm(
            'message: '+error,
            null,
            'Photo Fail',
            'OK'
        );
    }
);

Notes: photo_uri is the photo's uri (e.g. file:///...), message is user's comment and place_id is the place id in Facebook (e.g. 106522332718569).

And like other plug-ins, we must to edit Resources/Cordova.plist, add photoCheckin as key and PhotoCheckin as value in plugins. And put PhotoCheckin.h&PhotoCheckin.m to folder named Plugins, include PhotoCheckin.js file in your js code.

have fun! from 台灣 :)