How to use the Instagram API

Instagram is widely used, with literally millions of people constantly uploading pictures.

It makes sense, with such a large user base, to create an API. Today we’ll be looking into how to use it.


The first thing you need to do is to register as a developer with Instagram.

You’ll need to register your application name, a description, your website and a redirect URL.

After you’ve done this you’ll receive your Client ID and Client Secret, but this is where it gets a little tricky; you’ll also need an access token.

To get your access token, you need to go to this URL using your data:

You’ll be redirected to a URL that looks something like this:

In this case, your access token would be:


Retrieving popular pictures

When it comes to the actual JavaScript, we just need a simple AJAX call, because the Instagram API returns a JSON response.

Let’s start with the HTML we’ll need:

<h1>Popular Pictures</h1>
<ul class="popular">

Now the fun part. To retrieve the most popular pictures we need a GET request to a URL that looks like this (but uses your access token):

So, our code looks like this:

      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "",
      success: function(data) {
        // placing the images on the page

As you can see, it’s a standard AJAX call, we first set the type as GET, the dataType is jsonp because we’re loading cross domain, the set the cache to false, and finally add the URL.

Now we just need to populate the success function with the necessary code to display the images on our site:

    for (var i = 0; i < 6; i++) {
          $(".popular").append("<li><a target='_blank' href='" +[i].link + "'><img src='" +[i].images.low_resolution.url + "'></img></a></li>");

In order to do this, I’m using a for loop that will stop after 6 images, then inside the loop appending a list item and image.

You can see a demo of this here.

Getting a user’s information

Getting the most popular images is easy, but more commonly we need to get a specific user’s, usually our own.

To get a user’s images, the URL for our GET statement changes slightly:

Then we need the user’s ID, which you can look up here.

Now we need to write the ajax call that will handle this:

  type: "GET",
  dataType: "jsonp",
  url: "",
  success: function(data) {

As you can see, all we changed here was removing the no cache instruction.


Once you get past the rather convoluted authentication process, the Instagram API is incredibly simple to use.

If you have an Instagram account yourself, this is a great way of keeping images on your personal site up to date.

Do you use Instagram? Have you worked with the API? Let us know in the comments.

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website. More articles by Sara Vieira
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress