Accessing user’s Facebook checkins via Graph API

Your application might want to use a user’s checkin data in various ways, I outline below how to fetch a user’s facebook checkin information and get the Facebook page for that location.

First of all, you need to have the permissions to access a user’s checkin data. Look at http://developers.facebook.com/tools/explorer for information on this.

Once you have the required permissions and the user is logged in via Facebook connect:


//dojo.hitch to make the object scope available
FB.api("/me/checkins", dojo.hitch(this, function(response){
	if(response.data && response.data.length > 0) {
		dojo.forEach(response.data, function(item) {
            var locationId = item.id; 
            var locationName = item.place.name; //name of the place
            // To get a Facebook link to the location
            var locationLink = this.getLocationLink(locationName, locationId);
            console.log(locationLink); //print location link
        });
	}
}));

/**
* Output like this: http://www.facebook.com/pages/Espetus-Churrascaria-Brazilian-Steakhouse/166393336742282
*/
getLocationLink: function(locationName, locationId) {        
        var baseURL = 'http://wwww.facebook.com/pages/';
        var locationNameArr = locationName.split(' ');
        var locationLink = '';
        for(var i = 0; i < locationNameArr.length; i++) {
            locationLink += locationNameArr[i];
            if(i != locationNameArr.length-1) locationLink += "-";
        }        
        return baseURL + locationLink + '/' + locationId;
    },
    

More information on whats available with the Checkin object is outlined here: http://developers.facebook.com/docs/reference/api/checkin/

The /me/checkins request usually returns the most recent 25 checkins, with a hook to access more of the checkin information if required.

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.