CODEWITHSUNDEEP
javascripthtmlinstagraminstafeedjs
diegoigaete
diegoigaete

Reputation: 21

Using instafeed.js - blank page, not working

I am trying to use the instafeed.js javascript on a basic nothing html page, just to test the API. I have registered with Instagram and have my clientId value, which I have configured in my code:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Instagramify your website</title>
 <link href="css/style.css" rel='stylesheet' type='text/css' />
 <script type="text/javascript" src="js/instafeed.min.js"></script>
</head>
<body>
  <div id="wrapper">
    <h2>Instagram pics</h2>
    </div><div id="instafeed"></div>
  </div>
  <script type="text/javascript" src="js/instafeed.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    var feed = new Instafeed({
      get: 'tagged',
      tagName: 'awesome',
      clientId: 'clientId'
    });
    feed.run();
  })
 </script>
</body>
</html>

I am not quite sure its not working, I have used the same examples as in other posts. Please help me! I am starting to lose the little hair I have..

Thanks!

Upvotes: 1

Views: 4082

Answers (2)

diegoigaete
diegoigaete

Reputation: 21

Last night, after some moment of inspiration, I finally got it to work. Since I could not see any particular error on the page, I figured Id use to Javascript debugger from Chrome. This way I was able to see the returned value and error from Instagram, and it was:

"Uncaught Error: Error from Instagram: The access_token provided is invalid."

Which was strange enough since all examples (including mine above) never mentioned the access_token for just obtaining public hashtag pictures. In any case, I made sure to obtain the correct access_token (49 characters long, including 2 '.' in between) and used the code passing also the accessToken. No need for "useHttp: true" either (I am testing locally) or target.

I did add a template and resolution attributes, it ended up looking like this:

var feed = new Instafeed({
  get: 'tagged',
  tagName: 'awesome',
  clientId: 'client_id',
  accessToken: 'access_token',
  template: '<li><div><a href="{{link}}"><img src="{{image}}" /></a><h3>{{caption}}</h3></div></li>',
  resolution: 'standard_resolution'
});
feed.run();

Now it works perfectly. Just sucks of all the new restrictions that Instagram has made to the API. It seems like you can only see your pictures that are with the searched hashtag, and if you add users to your client, then you should be able to see those as well (I will try this today). Now back to reading the documentation...

Upvotes: 1

Stuart
Stuart

Reputation: 6785

You need to set a target:

var feed = new Instafeed({
    target: 'instafeed',
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'clientId'
});

Upvotes: 0

Related Questions