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.

Authentication

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:

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

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

http://yourredirectwebsite.com/#access_token=806401368.f59def8.e8efe19844fd46238d592f9f20216f88

In this case, your access token would be:

806401368.f59def8.e8efe19844fd46238d592f9f20216f88

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">
</ul>

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):

https://api.instagram.com/v1/media/popular?access_token=youraccesstoken

So, our code looks like this:

    $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/v1/media/popular?access_token=youraccesstoken",
      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='" + data.data[i].link + "'><img src='" + data.data[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:

https://api.instagram.com/v1/users/usert_id/?access_token=youraccesstoken

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:

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "https://api.instagram.com/v1/users/25025320/?access_token=youraccesstoken",
  success: function(data) {
    $('.name').text(data.data.username);
    $('.tagline').text(data.data.bio);
  }
});

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

Conclusion

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.