Building Your Image Gallery Using Public Instagram API

Nishant Arora 24/May/2017

This is an incidental discovery. I was a TA for CSC 309: Programming on the Web during Fall 2016 and Spring 2017. During spring I was responsible for all of the lab design and course material, to make it easier for students to understand subtle things about web development.

So basically teaching students about Javascript, now I know a lot of people in the CS community do not embrace Javascript and that is fine, but once you start to know it better you start to understand how powerful a few things are in this part of the CS world. One of the most tough things to get your head around is the JS Event Loop and JS Scopes. Many seasoned developers know this just by practice but when it comes to explaining it to students it's a tough nut to crack. So I made this presentation for my students:

Presentations are okay-ish, but there is no point continuing till the students can get their hands dirty with code. Let's ask them to make an image gallery. So far so good, but why will students enjoy loading some random images on an html page? I won't enjoy this, here it get's weirder, let's customize these gallaries using images from their own instagram accounts.

This means, I'll also need to explain how Instagram's API work and how they need to register an app with Instagram to make their app functional. This would be overwhelming for a one hour lab session, considering most students who attend this course are not even from the CS background.

A bit of research and I landed on this answer at SOF. This is simple, you can basically traverse through all of the Instagram's public data using this approach. So let's build this, but wait, this public API does not support JSONP, which means my browser won't let me load this JSON as that would be a violation of the CORS policy. I could hypothetically ask my students to manually bypass their browser's CORS complianc, but then they cannot use this code on their own websites later, it would be useless.

So I set out to build a CORS compliant solution for this problem, basically a proxy API for instagram which makes their public API work with JSONP and I had my first working version in 30 minutes, over next 40 minutes I polished some edge cases and added some features (like pagination and limits). The final version was up and running on heroku in 90 minutes flat:

This is running on heroku's free tier and I am surprised it holds up really well, there were some weird crashes which were resolved over next couple of days (check my commits here.) Using this is simple, check use instructions here. Once you have the images loaded as json on your page, you can design a gallery around it.

A simple example is, here are my last three posts on Instagram as JSON. If I were to access this using JSONP the would look something like this: You can see this in action on my blogs front page:

Now a question I've been getting a lot is: Why Call It Instagram Reverse Proxy? The answer is fairly simple, while researching about this I read some comment somehwere "you need to build reverse proxy to provide Instagram's public data as you need", that's it, I was building a reverse proxy for Instagram when I started. We in the CS community are simply bad at naming things. ¯\_(ツ)_/¯

Make something good out of this, Cheers!

Update July 06, 2017: Served 300,000+ requests in last 30 days.

The logs have gone wild, the sheer number of requests are amazing for this service is running on the free heroku tier. In the last 30 days we have serviced more than 300,000 requests to this API. Check this graph out:

At first I was surprized with this number and was inclined towards thinking that someone was trying to scrape instagram using this API. Turns out I was wrong, a really popular asian website is using this service on their website. I am in talks with them to move this traffic to a dedicated separate instance of this service.

Update July 11, 2017: Served 440,000+ requests in last 30 days. Heroku suspended my account.

OMFG, this shit just got out of hand: My account at heroku has been suspended as of now. :-/

Update July 12, 2017: The number of hits are still not down, moving all services to ('a' removed). A crude blacklist is in place.

Update July 20, 2017:New leacher detected.

Notice was sent to the owner, access will be blocked in next 24 hours like in the case of other leachers.