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
Photo of a MacBook. The decal sticker is of Iron Man. His hand blaster is replaced with the Apple logo.

1 Expand the URL

Get your API Key.

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

2 The Foursquare URL gives us the URL which includes a checkin ID and a signature.

3 The Foursquare API Call

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

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.


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.


Dabr uses the awesome Embedly service. Rather than having hundreds of different regular expressions and API calls to get embedded images, 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 - that way, everyone can benefit.

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

Share this post on…

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.Allowed HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <p> <pre> <br> <img src="" alt="" title="" srcset="">