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:



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.


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.

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.

Related posts

Leave a Reply