Facebook Real Time Updates

Facebook’s Graph API is such a big mess^H complicated process that after having tackled it down I’m compelled to write this post, and maybe other ones later.

Here I’m showing how to use the real time updates feature. Meaning, you will get a notification whenever a user, who has authorized your app, writes for example a status message (or does something else that the app is instructed to track).

I’m going to show the steps and explain along the way.

1. Create a new App

Of type “www”.

2. Do some basic setup

Site URL and App Domains. Not sure if these are mandatory but they don’t seem to hurt.

Also set the deauthorize url. This will be called whenever the user deauthorizes your app. Knowing this will probably be useful.

3. Go to Graph API Explorer

This is the important stuff. Here you will setup the subscriptions that the App is tracking. First, you can see that the sunscriptions are empty by doing a GET request. Fill your own App ID. Click the Get App Token to automatically authorize the request.

4. In your server code, set up the callback for the upcoming call

When you use the Graph API Explorer there will be a request to your server to verify the callback url you will be using for the real subscriptions.

Facebook will issue a GET request to this url with some parameters. The parameters are hub.challenge and hub.verify_token. You will need to send the hub.challenge back in the request handler. hub.verify_token is for you to check that it is the same which you were expecting (you will set it yourself in a bit).

For example, here is the JavaScript code for this request step:

router.get('/cb', function(req, res, next) {
	console.log('get /cb', req.query);
	if (req.query['hub.verify_token'] === 'moi') {
		res.send(req.query['hub.challenge']);
	}
});

5. Set the subscription in Graph API Explorer

Here we are doing a POST request to setup the callback url and the fields that this App will be tracking. Here we track the user’s statuses (hence object user and fields statuses).

If your callback url is working correctly you should get a success message back.

Now, if you go back to step 4 and issue a GET request, you should see the subscription:

With the login button the user is authorizing your app to track his/her status messages.

The code to set this up can be taken from Facebook’s docs, for example here. This code will be using the Facebook JS SDK which will be loaded “on the fly” with the script snippet. You will need to add your app id into the correct place.

The permissions are setup in the JavaScript code for now. Whenever your Facebook App goes public (now it’s in the test mode) you will need to setup the permissions in the App as well.

So, edit the Html/JS we got from Facebook’s docs:

<fb:login-button scope="public_profile,user_status,user_photos" onlogin="checkLoginState();"></fb:login-button>

Here we are issuing the permissions public_profile,user_status,user_photos. In the test mode, we don’t need to bother Facebook with reviewing the app, but if we were to publish the app, we would submit our app for reviewing because we of the permission user_status.

7. Start your server

We should see the login button if we are lucky. Click it.

Let’s authorize the app.

8. We should be all set. Write a status message.

Now after writing the status message you should get a callback from Facebook.

If you got this far and got the callback, you will get a user id and ‘changed fields’ to notify you what has changed. This won’t get you the actual status message but you will have to go get it with the Graph API. That is another story.

The code for this excercise is here (a Node.js app): https://github.com/ile/fb-real-time-example.

In the server code, there is the “app secret” code that you need to change. This is used for various things. Here is it used to decode the signed request for deauthorization POST messages.