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 http://instagram.com/developer, 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.

https://instagram.com/oauth/authorize/?display=touch&client_id=[ClientID]&redirect_uri=[callbackuri]&response_type=token

When this returns, you will see a token appended to the URL. eg: http://robhadfield.co.uk/?access_token=123ABC123ABC. 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:

$.ajax({
    type: "GET",
    dataType: "jsonp",
    cache: false,
    url: "https://api.instagram.com/v1/users/[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).

function(data) {
    for (var i = 0; i < 10; i++) {
        $(".instagram_catch").append("<a target='_blank' href='" + data.data[i].link +
"'><img src='" + data.data[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.

http://instagram.com/developer/endpoints/media/

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=""> <strike> <strong>