Instagram feed not returning any data

Question

I'm using Instafeed.js for a client's site: http://instafeedjs.com/

I've included the script, got my access token & userID. I obtained these by scrolling down to the 'Getting images from your User Account' section of the aforementioned page, and clicking the link at bottom: Don't know your user id or token? Click here to get one.

My code:

$(document).ready(function() {
      var userFeed = new Instafeed({
           get: 'user',
           userId: clientsID,
           accessToken: 'MY_ACCESS_TOKEN',
           template: '<a href="{{link}}"><img src="{{image}}" /></a>',
           target: 'instafeed',
           limit: 6
       });
  userFeed.run();
 });

I've created an empty div with the 'instafeed' id. The div is being populated with 6 empty a tags, each with an empty image tag. I don't have any console errors.

In the instructions on this site, I'm told to

"make sure your token is set to basic authorization, which only allows GET requests. If you aren't sure what scope your token has, check under your account page."

On my account page, I have an 'Instafeed.js' application set up, but the only option I have is to revoke access. I cannot edit or see any other options, so I'm not sure if this could be related to the problem.

Any help would be greatly appreciated!

Answer 1

In case someone else runs into this issue, my problem was actually a conflict with Shopify's template engine. When I removed the template option everything worked fine, thanks to Steven here who actually responded to my email! This dude is killer.

Answer 2

All tokens issues by the API are given the basic scope, unless the scope was specified in the authentication request.

From the Instagram API Docs:

Currently, all apps have basic read access by default. If all you want to do is access data then you do not need to specify a scope (the “basic” scope will be granted automatically).

You can verify which scope the token has by visiting the Manage Applications page. Each application will display what kind of access level it has. A basic permission set should say something like "Access your basic information":

So you shouldn't need to do anything to set the token's permissions, that's all handled when the token is created. If you used the helper link on instafeedjs.com to get that token, then all the permission levels should already be taken care of for you.

Answer 3

In Shopify, if you drop the configuration script into a new "asset" labeled instafeed_config.js and then call it with

{{ "instafeed_config.js" | asset_url | script_tag }}

after loading

{{ "instafeed.min.js" | asset_url | script_tag }}

then you are able to use the Template feature.

Answer 4

You can adjust the template section.

Change the following:

img src="{{image}}"

To:

img src="http:{{image}}"