Instagram API and importing photos without server side authentication

Question

I am a bit confused on a certain functionality I would like to implement into a website using the Instagram API. I would like to access my own feed based on my user ID from the Instagram API and display them on my site. It is saying that there is a way to do client side OAuth authentication but I am a bit confused on how I would go about this. I am fairly okay with JavaScript and if someone could point me in the right direction I am sure I could figure it out.

Any best practices would be great.

Thank you in advance,

JN

Answer 1

You're asking how to use Client-Side (Implicit) Authentication for Instagram.

Here are a couple JS libraries made for it:

1. https://github.com/Instagram/instagram-javascript-sdk
2. https://github.com/potomak/jquery-instagram

Answer 2

This was bugging me for ages, but I think I came up with to a simple way to just get my own photo's on my website, using ideas from the "jquery-instagram" plugin, but stripping it way down.

1. Come up with a #tag and add it to all the photos you want to show on your site, make sure it's not something that just anyone will use. (Do it this way to prevent needing to authenticate anything).

2. Register your app here: http://instagr.am/developer/register/ (Just use your Instagram login)

3. Use the following code (with jQuery), where "tag" is the tag you used, "id" is your registered app client id, and "photoCount" is the max number of photos you wish to retrieve.

   $.ajax({
     type: "GET",
     dataType: "jsonp",
     cache: false,
     url: "https://api.instagram.com/v1/tags/" + tag + "/media/recent?client_id=" + id,
     success: function(response) {
       var length = response.data != 'undefined' ? response.data.length : 0;
       var limit = photoCount != null && photoCount < length ? photoCount : length;
       if(limit > 0) {
         for(var i = 0; i < limit; i++) {
           $('<img>', {
             src: response.data[i].images.standard_resolution.url
           }).appendTo($("#photos"));
         }
       }
     }
   });