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.

By Sara Vieira
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.
  • concerned citizen

    I don’t think you really want to leave your access token in your JS

    • moadw

      No i don’t want to leave the token in the JS file, but gathering the token in a variable will let the app make some calls on the fly to different user information. If this isn’t a good practice why is it available on the Instagram API? I am just trying to create a simple web app.

  • pvf

    it’s better and more secure to work with access token via server-side solution like node.js and if you really need that in client-side don’t do like you did – try to play with templates(ECT, Jade)

  • bius

    How can i load more other 6 photos? How can i manage a pagination?

    • Oliveira

      Just change the for looping. (var i = 0; i < 10; i++) you will get 10 images.

  • moadw

    Hi Sara, how do you get the access token form the URL in javascript? With the hash i get the “#access_token=” part of the string and not the token itself? Thanks

  • onder

    thanks for your sharing, but ı have a question, How can we provide to follow someone with ajax request ?

  • Chiamaka Nwolisa

    Awesome Sara. Thanks a bunch

  • Rodney Sanchez

    Hi Sara,

    How can I hide the access token on an MVC application. Right now is in a JavaScript file but I don’t feel comfortable exposing it.

    Thanks

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns