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.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).
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
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:
6. Setup the Login button and permissions
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.
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
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.