Question

I am using the Facebook Javascript SDK to upload a photo to the user’s timeline. This is my call:

function post_photo_to_facebook() {
    var file_name = 'https://my-image.url.com/image.jpg';
    var access_token = FB.getAuthResponse()['accessToken'];
    $.ajax({
        type: "POST",
        url: "https://graph.facebook.com/me/photos",
        data: {
            message: "Here is my message",
            url: file_name,
            access_token: access_token,
            format: "json"
        },
        success: function(data){
            alert("POST SUCCESSFUL");
        },
        error: function(data){
            alert('Error');
            console.log(data);
        }
    });
}

When in Chrome, I am receiving an Error back from this AJAX call, yet the statusText is “OK”, and the image is being successfully uploaded to my timeline. I am just wondering what I am missing here – why is the error being called?

Answer 1

You should be using FB.api to upload images, rather than ajax POST due to CORS reasons.

So your code above would look like this:

var file_name = 'https://my-image.url.com/image.jpg';

FB.api('/me/photos', 'post', {
    message:'Here is my message',
    url:file_name        
}, function(response){

    if (!response || response.error) {
        alert('Error occured');
    } else {
        alert('Post ID: ' + response.id);
    }

});

and you use FB.init to set up your tokens etc.