Subscribing to Facebook Graph API’s real time updates using CURL.

Facebook allows you to subscribe to an application user’s activity on Facebook, so that you can subscribe to them, and use that information for various things. This is great because (the other alternative is) having to run a daemon process in order to find out a user’s Facebook activity is painful.

However, as awesome as this service is, understanding their documentation on this topic is a whole another matter. I found it almost impossible to decipher, as a lot of things were unclear or left unexplained. Look here: http://developers.facebook.com/docs/reference/api/realtime/

Luckily I found a blog post explaining how to do this, here it is.

I’ll run down the steps again below, as a few of the steps are now easier:

1. Get access token: https://developers.facebook.com/tools/access_token/ gives you access tokens to all your apps on facebook.

2. Check if access token works:

curl "https://graph.facebook.com/<appid>/subscriptions?access_token=<access token from  step (1)>"

Since you originally have no subscriptions, you get:

{“data”:[]} or some kind of error.

3. If you got empty JSON back in step 2, now you can subscribe to updates(here I want to subscribe to user checkins):

curl -F 'object=user' \
-F 'callback_url=<callback url you have to implement>' \
-F 'fields=checkins' \
-F 'verify_token=<secret token>' \
"https://graph.facebook.com/<your-app-id>/subscriptions?access_token=<access token from (1)"

The callback_url should be something along the lines of: https://github.com/facebook/php-sdk/blob/master/examples/example.php

This call should return “null” if successful. Once you have subscribed to updates, Facebook starts posting activities of all your application users to the callback_url above.

4. To verify step 3 was successful, run step 2 again, and this time, it should return something like this:

{"data":[{"object":"user","callback_url":"http:\/\/yourdomain.com\/callback.php","fields":["checkins"],"active":true}]}

The above response means the subscription to updates about user checkins are now active. Hopefully this helps people who are confused about how to get real time updates working.

Advertisements

Facebook Graph API – Facebook connect using JavaScript

To use facebook connect on your website, or to allow a user to login to your website using facebook, its important to use Facebook Connect. I prefer doing this via JavaScript because its the language I am most comfortable with.

Basics on how to set up and register a facebook app have been covered elsewhere, over here I’m going to focus on the code which makes this happen.

To get started, make sure you import the Facebook JavaScript file. You also need to add a div whose id is fb-root, and you also specify your application credentials. For example:


<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true  // parse XFBML
  });
</script>

Once you do this, the FB object becomes available for use in your application. The best way to invite the user to login and/or provide permissions to your application is to use the FB.getLoginStatus() method:

FB.getLoginStatus(function(response) {
	(response.session) ? showAccountInfo(): showLoginButton(); 
	FB.Event.subscribe('auth.statusChange', function() { // do something when auth status changes }); 
});

If the user is not logged in or has not provided the required permissions to your application, display the login button.

<img style="cursor: pointer;" 
onclick="FB.login( function(response) {yourObject.onStatus(response)},{ perms: 'email,publish_stream,offline_access,user_checkins,friends_birthday' })"
src="https://s-static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif"/>

The image, when clicked, calls the onStatus() method. “yourObject” assumes you are writing Object oriented JavaScript and the object is available in the namespace.

The permissions requested above are: email,publish_stream,offline_access,user_checkins,friends_birthday. You may want less, more or just the default information facebook makes available about every user. More information on permissions is available here: https://developers.facebook.com/tools/explorer

Thats it! The steps to have a user login and provide the required permissions to your application using the Facebook Graph API using JavaScript.

Sorting birthdays received from Facebook’s graph API

While working with Friend lists using Facebook’s graph API, you may want to retrieve your friends and do something based on their birthdays. Here’s some sample code to sort your friends based on upcoming birthdays.

FB.api("/me/friends?fields=id,name,birthday,picture, link", dojo.hitch(this, function(response) {
    var birthdays = response.data; //list of friend objects from facebook
    var currentMonth = new Date().getMonth() + 1;
    var upcoming = [];
    dojo.forEach(birthdays, function(item) {
        if (item.birthday) {
            var bday = item.birthday;
            //if the birthday is after today
            if (currentMonth <= bday.substr(0, 2) * 1 && new Date().getDate() <= new Date(bday).getDate()) {
                upcoming.push(item);
            }
        }
    });

    //set the year to current year because of birth years being different.
    var year = new Date().getFullYear();
    upcoming = upcoming.sort(function(a, b) {
        return new Date(a.birthday).setYear(year) - new Date(b.birthday).setYear(year);
    });

    console.log(upcoming);//console log here, but do whatever you want with the sorted friends
}));