Facebook Development: Posting Feeds and Uploading Images

12. Juni 2012

Currently I’m working on some experimental stuff with Facebook and their JavaScript SDK which can be used in several cases like e.g. a FacebookApp, your own website when integrated the FacebookLogin etc pp.

When learning how to use the SDK you will soon recognize that the documentation is a little bit short – just with the experience from other users who share their knowledge I solved my problems. That’s why I want to share mine too – maybe it helps someone who stumbles by accident over this blog.

So when working with the JavaScript SDK you will get a really powerfull jQuery-like weapon to get access to someones Facebook-account – if he/she grants you the access. For today I will restrict my article on how to post to the users wall and „upload“ a picture to ones album via JavaScript.

When working with the tutorials you will come to a point where you find the first approach on how to post a feed via javascript: Do a HTTP-POST call to an url with the message as JavaScript array. Basically this works fine – but when trying to do this asynchronously you will fail due to the cross-domain-policy rules which will only allow a GET.

But working with the SDK this is easy as anything else:

FB.api('/<TARGET>/<WHAT>', 'post', {
message: '<MESSAGE>' },
function(response) {   if (!response || response.error) {     alert('Error occured');   } else {     alert('Post ID: ' + response.id);   } }); }

Or more as an example:

FB.api('/me/feed', 'post', { message: 'Hello world!' }, function(response) {   if (!response || response.error) {     alert('Error occured');   } else {     alert('Post ID: ' + response.id);   } }); }

As you can see it is simply the same as the first intention: You get a target („/me/feed“) and depending on your choosen target you will need to support a dynamic array of data. In this case the simple message „Hello World!“.

Now to „upload“ an image – as you should know it is impossible to really upload an image via JavaScript as this would open a direct door to your computer files. But you can support an URL of an image which will then be „uploaded“ to the users album you targeted at or in case you did not defined a target album id it will then create a new album with the registered FacebookAppName:

FB.api('/me/photos', 'post', {
message: msg,
url: pic },
function(response) {   if (!response || response.error) {     alert('Error occured: ' + response.error.message);   } else {     alert('Post ID: ' + response.id);   } });

Now it should be a little bit easier to understand the documentation of the Facebook-API as we now have a nice tool (the SDK) given to access all the nice litte informations we’re offered by Facebook about the users of our websites or Apps.

But always think of the policies about posting in name of others: You have to follow the rules and you should not post without the users permission. So better do it visible instead silently in the background – this could harm your reputation as a company and also have other consequences.