technology and zen of life

“A heisenbug (named after the Heisenberg Uncertainty Principle) is a computer bug that disappears or alters its characteristics when an attempt is made to study it.”

Instagram – Using the API

First a short introduction on Instagram, it is an iphone app for taking pictures, adding filters to make them look retro, and then for sharing them with sites like Twitter, Flickr, Tumblr, and Facebook, more importantly, it’s a simple social network of other people’s photos. You can “like” or comment on the photos, and see what’s new. It’s easy and doesn’t take much time or effort. This is one of the reasons it has become so popular so quickly.


What is also good to know is that Instagram has recently released an API which the user’s can use to fetch pictures that users upload to the website. In this article I want to discuss that API and how to use it to make the most out of it.

Firstly there are a number of ways in which you can fetch photographs….
1. Photos from a certain user
2. Photos which have been tagged with a specific keyword
3. Photos based on a geographic location
4. And finally photos which are most popular recently.

Before you start with accessing lets look at the initial steps.

Firstly you need to register your application with Instagram, this will provide you with a unique client_id and client_secret which you would need to continue further in your development.

After you have the client registered the next step is to get an authentication token. This step is quite important.
To get your authentication token you need to visit the following url

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

While replacing the [ClientID] with the ID you got in the first step and the [callbackuri] with your callback uri. If you were not already logged in it will ask you to authenticate and then return to your callbackuri after authentication with your authentication token attached at the end of the url like

 http://your-redirect-uri?code=CODE

Where CODE is your authentication code.

The next part is actually sending and receiving updates from the instagram website. I would be making use of the jquery as it simplifies things while placing your call to instagram to fetch the images.

$.ajax({
        type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/users/[UserID]/media/recent/?access_token=[CODE]",
        success: function(data) {...}
    });
});

The userID used here is your ID and not the login name. It is a numeric number, if you can’t find it leave a comment and I will help you with it.
This would return the data which is an object which contains the returned images and their properties. The various data endpoints are described at Instagram developer page. How ever if you just want to get the image and the link you can use something like this as the function:

 function(data) {
for (var i = 0; i < 10; i++) {
$(".pics").append("<a target='_blank' href='" + data.data[i].link +
"'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}
}

This would fetch the first 10 images returned and display them in the div pics. You should include an empty div called pics in your html for this to work. and this function should be included as a javascript in the head of your page.

The url in the function can be replaced to fetch different types of pictures:

For most popular pictures:
url:  "https://api.instagram.com/v1/media/popular?client_id=[ClientID]&access_token=[CODE]"

The 4 latest Popular pics:

For recent pics of a User:
url:  "https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=[CODE]"

My 4 last pics:

For most recent pictures with a specific tag:
url:  "https://api.instagram.com/v1/tags/[TAG]/media/recent?client_id=[ClientID]&access_token=[CODE]"

Here are the last 4 images with the tag hdr :

For most recent pictures from a specific location:
url:  "https://api.instagram.com/v1/media/search?lat=[LAT]&lng=[LNG]&distance=[DST]
?client_id=[ClientID]&access_token=[CODE]"

Where LAT and LNG are latitude and longitude of the place and DST is the radius of the area in meters (max 5000 meters)

For example here you can see the last few pics uploaded from Amsterdam icon smile Instagram   Using the API

Have fun with the API and feel free to post links to your web pages where you use it.
Also if you have any questions let me know!

Leave a Reply

97 Responses

  1. PC says:

    Hi Guys,

    Can I have All possible attributes shared by instagram for the api trying to register via them.

    Thanks in advance.

    Regards,
    PC

  2. PC says:

    All possible attributes shared by instagram for the api trying to register via them

  3. Monika P says:

    Hi Navin,
    Thanks for sharing this post .
    I am new to Instagram development .

    I want to display/download images/videos from instagram account to my webapplication using Microsoft technologies like asp.net/mvc etc .

    Can you please guide me on this?
    From where should I have to start ? and which IDE should I use ?

    Thanks in advance.

  4. rob says:

    Hi,
    How can the thumbnail size be changed or made to be responsive? And thank you for such an amazing run through of the instagram api.

  5. rob says:

    How quickly does the feed refresh with new images?

  6. davidmabe24 says:

    Hi, I have a doubt. access_tokens are unique to a user. So i need to retrieve access_token data from url always for different users using my app. But i didn’t find a way to detect instagram authorization, after which i should take the url. Please suggest what to do.

    Regards,
    David

    • Navin says:

      If you are creating a access token per user then you need to call the reg URL and wait for the call back from instagram. You don’t need to worry about authentication.

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

      And then instagram will reply by calling the url
      http://techmonks.net/register_user/?code=code

      Next step is to get the ACCESS_TOKEN

      For this you need to call the instagram API with the following parameters
      client_id: your client id
      client_secret: your client secret
      grant_type=”authorization_code”
      redirect_uri: Note: this has to be the same value as in the authorization request.
      code: the exact code you received during the authorization step.
      For example, you could request an access_token like so:

      https://api.instagram.com/oauth/access_token?client_id=[ID]&client_secret=[Secret]&grant_type=authorization_code&redirect_uri=[URI]&code=[CODE]

      • CKL says:

        Hi I would like to create an API showing latest feeds from different users.
        I have a problem with finding the [CODE].
        Would you kindly show me the steps to get it please?
        I do not get it anywhere when I am registering for the API Key.

        Thanks and have a lovely day!

        Cheers,
        Karen

  7. Jagdish says:

    Can I Post data or share data on Instagram using api?

  8. poorusher says:

    Hey, this is great.

    Do you happen to know where the documentation is for this stuff: data.data[i].images.low_resolution.url

    I managed through trial and error to get data.data[i].link but I cannot find any info on the Instagram API site on the other parameters.

    TIA
    Lue

  9. mike says:

    Any way to combine searches? I want to do a specific hashtag from a specific lat/long location.

  10. freshprinc says:

    hello
    thank you for this
    i get this error [13:19:24.466] TypeError: data.data is undefined

  11. Octopus says:

    It would be helpful if you provided a link to the page where we get our client id codes from.

  12. srinivas says:

    how to do the same in ios app, I mean i want fetch the images in ios app, please suggest if anyone aware of this

  13. [...] via Instagram – Using the API | instagr.am API. [...]

  14. Thank for your tutorial.

  15. Daniela says:

    hi, Where can i find the user id?

  16. Pankti says:

    hi, i am trying to download content from Instagram. i have register my website in my Instagram developer account.
    Can you help me to start with this task? how to get pictures from account.

  17. Biswanath Bose says:

    What is the process, to share some image fraom a website to instagram, Have you nay PHP code for this. How can i register in instagram, through browser

  18. Shivani says:

    i want to fetch particluar user images for some particular tags,how can it be done?

  19. Ximena says:

    Hello,

    I am not sure what Im doing wrong, but I cant seem to find the client id and secret id. When i click on “register a client”, instagram redirects me to my “edit profile” page. There is no way I can add a cient???

    Is this because I am using my own instagram account (stereotipa)? Do I need to create some sort of developper account?

    Please, would appreciate some light on this!

    Thanks in advance,
    Xime

Email Subscription

Disclaimer

The views expressed on this blog are personal. We do not claim to be a representative voice of the views of any organisation whatsoever. We are not responsible for the content present on the blogs to which we have linked.Views expressed are solely that of the author and does not reflect a collective opinion of contributors.
%d bloggers like this: