Instagram API basics

The Instagram API is pretty easy to use – as with most APIs these days, send off a URL request and get a bunch of JSON data back to display in your page.

There are a few things you need to do, here’s the steps I used:

1 ) Register your application

Head over to, log in and register your app. The developer console will then provide you with two ‘keys’, Client ID and Client Secret. Keep this page open or paste them somewhere – you will need them in a mo.

2 ) Send for token

Use the following URL, replacing the client ID and the Return URL (Uri) provided when you registered your app. ( [ClientID] & [callbackuri] ). Paste into your browser and hit “Go” – it will send a request to authenticate your app and return to your chosen Return URL.[ClientID]&redirect_uri=[callbackuri]&response_type=token

When this returns, you will see a token appended to the URL. eg: Grab this and paste it somewhere safe, this is your authentication code.

3 ) Send an Ajax request to Instagram

Here we send our request for data to the Instagram API:

[code lang=”js” title=”Place this in your javascript file”]
type: "GET",
dataType: "jsonp",
cache: false,
url: "[UserID]/media/recent/?access_token=[CODE]",
success: function(data) { … }

4 ) Now we write a function to pull back the images

The API has loads of data attached to each image. User / User Avatar / Date /TAGS etc etc. What we’re interested in is the image and the URL of the original image (Instagram page).

[code title=”to replace the 'function' above” language=”js”]
function(data) {
for (var i = 0; i < 10; i++) {
$(".instagram_catch").append("<a target=’_blank’ href=’" +[i].link +
"’><img src=’" +[i].images.low_resolution.url +"’></img></a>");

This code is looping over the results 10 times and using the data fields “link” and “images > low_resolution”. “Link” is the link back to the Instagram page for the image and image.low_resolution is a large, but low resolution version of the image. Other options include standard_resolution, and thumbnail.

It’s a simple loop, building an HTML string then appending it to an element with the class “instagram_catch”.

And that’s it. I hope that makes sense – I hope I haven’t missed anything, if I have drop me a comment and I’ll amend the post.

See it in use here : Laurel Canyons (this time using the hash tag “#laurelcanyonsband”).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>