OAuthAccessTokenException

[tgirardi]

It seems that instagram implemented new restrictions to it's API. making a request to the URL https://api.instagram.com/v1/tags/<uer-id>/media/recent?client_id=<client-id> now gives a 400 HTTP error code, with the error_type OAuthAccessTokenException

Anyone knows how to work around this? Any suggestions?

[tgirardi]

Here is a similar project with similar problems: stevenschobert/instafeed.js#408. The discussion on that issue could be helpful

[LotharVM]

Already found a solution @tgirardi ? I, quite urgently, need a fix for this too. I look at the other link you posted but can't really find a solution in there..

[timhc22]

Same problem for me!

[tgirardi]

@LotharVM @timhc22 I stopped using instagram-scroll and started using https://github.com/Bolandish/Instagram-Grabber, which is suggested in the issue mentioned above (stevenschobert/instafeed.js#408). Other solutions mentioned on that issue needed an access token to be available for the javascript code. If that code is running on a server through NodeJs or similar, then there's little risk, but I'm not sure about putting that on the front-end and making it visible for every visitor of the site (I asked about the security implications of doing so, in that issue thread, but no answer has been posted yet).

I wanted to rely on a pure front-end javascript solution, because my app is a shopify site, so I have access to make modifications in the front-end, but not the back-end. I can insert javascript code inside the front-end template files, but not in the back-end portion of the app - no nodeJs Javascript, no PHP, no Python, etc. However, after looking for several days for an effective and secure solution I gave up and went with the back-end based solution.

Now. There's a way of quickly getting the back-end portion running and work around restrictions like the one I had to face with my Shopify site (only access to front-end code): deploying a Heroku App.

Feel free to fork my Heroku app: https://github.com/tgirardi/kafibody-instagram-grabber. You'll just need to edit the app.json file and change the value for the USER_ID environment variable defined there

If you like, you can also change the name of the JSONP callback inside web/index.php, so it doesn't include the name of my site (kafibody).

Probably I'll make a more generic version of that repository, where the USER_ID has a value of "<CHANGE_THIS_ID>", the JSONP callback is just called instagramScrollCallback and with a Readme.md file that explains the installation process...

Now. About the front-end/javascript portion of the scroller: you can use my code also:

$.ajax({
  url:'<HEROKU_APP_URL_HERE>',
  dataType:'jsonp',
  jsonpCallback:'kafibodyInstagramGrabber',
  success: function (response) {
    'use strict';
    if(response !== null){
      var ul = $('<ul/>');
      $(response).each(function(index, obj){
        if(index > 15)
          return;

        var link = $('<a/>'), image = $('<img/>'), li = $('<li/>');
        var imgSrc = obj.thumbnail_src;
        image.attr({'src': imgSrc,
                    'width': 480,
                    'height': 480});
        link.attr('href', 'https://www.instagram.com/p/' + obj.code +
          '/?taken-by=kafibody');
        image.appendTo(link);
        link.appendTo(li);
        try {
          $('<div class="caption">' + obj.caption + '</div>').appendTo(li);
        } catch(e) { }
        ul.append(li);
      });

      $('#<INSTAGRAM_SCROLLER_HTMLELEMENT_ID>').append(ul);
    }
  }
});

You just need to indicate the correct values for <HEROKU_APP_URL_HERE> and <INSTAGRAM_SCROLLER_HTMLELEMENT_ID> (if you change the name of the callback in the heroku app, then you need to change that in the above code as well).

I'll probably make a gist for this or add it as an example inside the Heroku app repository...

Ah! And I used a size of 480px for my images, so if you prefer a different size, make the necessary changes around the middle portion of the code above.

[timhc22]

Thanks for this, will give it a go!

[LotharVM]

Thanks @tgirardi !