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.


Developing with Facebook: Signature in .NET

5. Januar 2012

At the moment I’m working a little on developing an application for Facebook. On the one hand this is for getting experience with the Facebook-API for future options in our software and on the other hand it is useful for my private life to get a glimpse at the data Facebook provides the application hoster.

First before really getting into the Facebook-API you’ll need a server which ideally supports SSL. A small test-web-application could easily be created, the IIS configured and the app registered at Facebook. Next step was to register the newly created app to the page I’m working with where my private account is the administrator.

After all the setup steps (easily described in the Facebook tutorial) and manually hacking around with Try&Error where the tutorial misses some small information, I finally got my first Facebook-data-string.

The string consists of two Base64-encoded substrings with a ‘.’ as seperator. The first is a signature of the second one – the second one is the interesting data as a JSON-array.

It’s really easy to get the data – but what worth is it without checking whether it is correct or not? So I needed to calculate the hash of the data. Sounds easy, eh? From the tutorial I knew that it is simply a HMCA SHA-256 hash-function – fortunately with a .NET equivalent.

Unfortunately getting this running was not as easy as it looked in the tutorial: After some more Try & Error I found that Facebook does not really delivers a standard Base64 string – it simply removes all ‘=’ (equivalent for String.Empty) and replaces ‘+’ with ‘-‘ and ‘/’ with ‘_’.

So after calculating the hash-value all I needed to to is to do the same as Facebook – et voilá my signature was the same.

Following is an example code how I implemented the hash-function:

Public Shared Function FacebookHMACSHA256(ByVal myKey As String, ByVal stringToHash As String) As String
Dim encoding As New System.Text.ASCIIEncoding
Dim key() As Byte = encoding.GetBytes(myKey)
Dim XML() As Byte = encoding.GetBytes(stringToHash)
Dim myHMACSHA256 As New System.Security.Cryptography.HMACSHA256(key)
Dim HashCode As Byte() = myHMACSHA256.ComputeHash(XML)
Dim output As String = ToUrlBase64String(myHMACSHA256.Hash)

Return output
End Function

Shared Function ToUrlBase64String(ByVal input As Byte()) As String
' Facebook benutzt andere URL-Encoding-Zeichen
Return Convert.ToBase64String(input).Replace("=", String.Empty).Replace("+", "-").Replace("/", "_")
End Function

Finally it’s worth to say that the first glimpse at the data Facebook supports is really really interesting. Soon I will report about my next experience with this experiment.