Getting Images from a Foursquare Checkin

"Oi!" shouted Whatleydude, "Get Dabr to show images from foursquare checkins!" "Righty-ho sir!" I said. I started coding furiously. Of course, things are never quite as simple as I first thought....

So, how do we go from http://4sq.com/fgIWov to

1 Expand the URL

Get your Bit.ly API Key.

http://api.bitly.com/v3/expand
   ?shortUrl=http://4sq.com/fgIWov
   &login=YOUR_BIT_LY_USERNAME
   &apiKey=YOUR_BIT_LY_API_KEY
   &format=txt

You can, if you prefer, get the info back in JSON or XML. See the Bit.ly API Expand Documentation.

2 The Foursquare URL

Bit.ly gives us the URL which includes a checkin ID and a signature.

http://foursquare.com/edent/checkin/4d7e5b4f9df3f04d7400c394
   ?s=afH3jJg3L9HpLqVIwiqp-YpNL5k

3 The Foursquare API Call

From this, we construct an API call to Foursquare. It looks like this

https://api.foursquare.com/v2/checkins/4d7e5b4f9df3f04d7400c394
   ?signature=afH3jJg3L9HpLqVIwiqp-YpNL5k
   &oauth_token=YOUR_FOURSQUARE_OAUTH_TOKEN

NOTE the Foursquare URL says ?s= whereas the API call requires ?signature= That caused me more frustration than it should...

Getting your OAuth token is a little cumbersome - follow the steps at the Foursquare Developers site.

4 The JSON Response

I'll cut the cruft out of here, so you only see what you need to display images. The response gives us the link to the full sized image - as well as several different sizes should you wish to display thumbnails.

{
  "meta":{
     "code":200
  },
  "response":{
     "checkin":{
	},
   ...
   "photos":{
      "count":1,
      "items":[
	 {
	    "id":"4d7e5b4f9df3f04d7400c394",
	    "createdAt":1300184596,
	    "url":"http://playfoursquare.s3.amazonaws.com/pix/A.jpg",
	    "sizes":{
	       "count":4,
	       "items":[
		  {
		     "url":"http://playfoursquare.s3.amazonaws.com/pix/B.jpg",
		     "width":720,"height":540
		  },
		  {
		     "url":"http://playfoursquare.s3.amazonaws.com/derived_pix/C.jpg",
		     "width":300,"height":300
		  },
		  {
		     "url":"http://playfoursquare.s3.amazonaws.com/derived_pix/D.jpg",
		     "width":100,"height":100
		  },
		  {
		     "url":"http://playfoursquare.s3.amazonaws.com/derived_pix/E.jpg",
		     "width":36,
		     "height":36
		  }
	       ]
	    },

5 Gotchas

Again, nothing in life is easy. Not all foursquare checkins have an image associated with them. In which case, we can do one of three things.

1. Display no image
2. Display the user's avatar - if it's public
3. Display an image of the venue - or one of the icons associated with it.

6 Embed.ly

Dabr uses the awesome Embedly service. Rather than having hundreds of different regular expressions and API calls to get embedded images, Embed.ly gives us a single end point to call. So, rather than rewrite huge chunks of Dabr's code, I've submitted this to the clever-clogs behind Embed.ly - that way, everyone can benefit.

Any questions, comments, or clarifications - please let me know in the comments box.