Sunday, 12 August 2012

FaceBook Real-Time Updates API Tutorial - Part II


"The Graph API supports real-time updates to enable your application using Facebook to subscribe to changes in data in Facebook. Your application can then cache data and receive updates, rather than polling Facebook’s servers. Caching data and using this API can improve the reliability of your application and decrease its load times.




Tutorial
In the first part of the series, we covered how to subscribe to connections and receive notifications from Facebook.

I've seen a lot of people around on forums who have managed to subscribe to connections, but still don't know if they are actually receiving any notifications. The documentation for this API never actually goes as far as telling you what to do with the notifications that you receive from FaceBook.

In this second article, we’ll therefor cover how to decode the incoming JSON objects, and also how to insert these into a database so that they don't just vanish into thin air.

So lets start with setting up our database table!

Setting Up The Table Structure In Our Database:
The CREATE TABLE statement below will create a table called FaceBook with all the needed columns for inserting our data. (This statement should work in any SQL database)


Before you copy paste the code above however, you may need to modify it a little depending on how you intend to use these notifications.

Example:
You have an application with a list containing all the logged in user's friends and you wish to reload this list whenever the list of friends has changed.

In this example, knowing how many times that the friends connection has changed would just be redundant and take up unnecessary space. Having one row telling us that is has changed is enough.

So.. By setting both the uid and changed_fields columns to be primary keys, we tell the database that there can only ever be one row where the uid=123456789 and the changed_fields = 'friends'.

This way, the max number of rows per user in your table will at all times be equivalent to the number of connections that you have subscribed to.

If you for some reason do need to know this, then just remove that last line that's setting the primary keys.

Now that the table structure is done, we can change the script that we created in the first part of this tutorial so that it inserts the values from the JSON object's key-value-pairs into our newly created mysql table.


Inserting The Decoded Object Into Our Database:
Below you will see that I have made some modifications to the script that we use in part I of this tutorial-series. Whenever it now receives a JSON object notification from FaceBook, it connect to our mysql database, decode the contents of the object and then finally insert this information into the database.

Conclusion
Aight, thats it for this second part of this tutorial-series! I hope that this has helped you to understand how to decode the real-time updates that you receive from FaceBook and also how to store them for later use..  

Please feel free to leave a short comment to let me know that this tutorial was of any use to you.

The next and final part of this tutorial-series will cover how to check if there has been a change to the subscribed FaceBook data.  

Documentation
The documentation for the FaceBook Real-Time Updates API can be found at: https://developers.facebook.com/docs/reference/api/realtime/

Tuesday, 7 August 2012

FaceBook Real-Time Updates API Tutorial - Part I


"The Graph API supports real-time updates to enable your application using Facebook to subscribe to changes in data in Facebook. Your application can then cache data and receive updates, rather than polling Facebook’s servers. Caching data and using this API can improve the reliability of your application and decrease its load times.




Whenever a subscribed change occurs, Facebook makes an HTTP POST request to a callback URL you specify with a list of changes. Your application will generally receive notification of the change within a couple of minutes of its occurrence."

Tutorial
Understanding the documentation for this API can be quite frustrating for some, and it seems like many people are really struggling with understanding how to get updates and how how to handle them. I therefor decided to write a full length tutorial explaining each step in great detail. This part I of a three-part tutorial series on the FaceBook Real-Time Updates API will cover how to subscribe to real-time updates.

The documentation for this API can be found at the bottom of this post.

Here are the steps to set up a subscription:
1) Set up an endpoint URL that receives both HTTP GET (for subscription verification) and POST (for actual change data) requests from Facebook.


Setting up the endpoint URL:
This first step is actually quite easy if you didn't miss the tiny link to the sample code at the bottom of the documentation page.

- Create a php file and copy-paste the code below into the file
- Change the defined VERIFY_TOKEN to be something else than yourownsecretstring
- Upload the file to your server


Code:


Okay, thats it for the first step! Now we are ready to move onto the next step!

2) Make a POST to the graph API url https://graph.facebook.com/yourappid/subscriptions to subscribe, and be ready to handle the verification request.

Making a POST to the graph API
Before we can create a subscription we will need an access token.

Access token
This token is easily obtained by opening your web browser and copy-pasting the following into the address field:

https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=APP_ID&client_secret=APP_SECRET

It should look something like this:
1234567891234|ABcDeFG1H2I34jklmNopQrstUvw5xYZ

(For those of you who don't remember where to find your app id and app secret, just go to https://developers.facebook.com -> Apps -> YourApp)

Creating the subscription
Now that we have our access token we can finally go ahead and create a subscription.

This is done by again simply opening your web browser and copying in the code below. Before you do this however, make sure that you can reach the php-file that you have set up. For this tutorial we will just subscribe to feed, but if you need to subscribe to multiple connections then all you have to do is separate them with a comma. (i.e. fields=feed, friends, events)

https://graph.facebook.com/yourappid/subscriptions?access_token=youraccesstoken&object=user&fields=feed&verify_token=yourownsecretstringsetinyourphpfile&method=post&callback_url=http://www.yourwebsite.com/facebook_subscribe.php

When the page is loaded, it should say null if the subscription was successful)
To check if your subscription is set up correctly
https://graph.facebook.com/yourappid/subscriptions?access_token=youraccesstoken&method=get

When the page is loaded, it should look like this:
{
   "data": [
      {
         "object": "user",
         "callback_url": "http://www.yourwebsite.com/facebook_subscribe.php",
         "fields": [
            "feed"
         ],
         "active": true
      }
   ]
}

To delete your subscription

https://graph.facebook.com/yourappid/subscriptions?access_token=youraccesstoken&method=delete


Conclusion
Aight, thats it for this tutorial! I hope that this has helped you to understand how to receive real-time updates from FaceBook.  

Please feel free to leave a short comment to let me know that this tutorial was of any use.

The second part of this tutorial-series will explain how to handle the notifications you receive from Facebook.

UPDATE:
FaceBook has now made it easier to add, modify, and delete subscriptions using their new Realtime Updates panel.

https://developers.facebook.com/docs/howtos/managing-realtime-update-subscriptions/

Documentation
The documentation for the FaceBook Real-Time Updates API can be found at: https://developers.facebook.com/docs/reference/api/realtime/