Trouble with Instafeed.js

Question

I am just creating a basic page that shows Photos from Instagram using the Instafeed.js library. I followed the tutorial but when I open my HTML page, I just see pixilated images and not the actual images.

When I open the console, I get the error net::ERR_FILE_NOT_FOUND next to each photo.

Here is the code:

<script type="text/javascript" src="instafeed.min.js"></script>


<div id="instafeed"></div>


<script type="text/javascript">
 var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'Your Client Id'
});
 feed.run();
</script>

If you are looking for a workaround for the new API after March 31 2020, look here: https://stackoverflow.com/a/60394300/2397550 — Mr. Hugo, Feb 25 '20 at 12:31

score 5 · Answer 1 · answered Jul 18 '14 at 04:58

If you are viewing your HTML page locally (and by locally I mean your address bar begins with file://, you will need to add useHttp: true to your settings:

<script type="text/javascript">
  var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'Your Client Id',
    useHttp: true   // <--- add this
  });
  feed.run();
</script>

This option is required when viewing files locally since the images are trying to load using protocol-relative URLs. If you were to view that HTML file on an actual web server, that option isn't required.

That change was introduced in version 1.3.

score 0 · Answer 2 · answered Jul 08 '14 at 13:41

0

Had the same problem matey, inspecting the elments will help a lot. Adding the template param will help and the problem is with the {{image}} you have to put http: before it. Hope it helps because it should.

<script type="text/javascript">
 var feed = new Instafeed({
 get: 'tagged',
 tagName: 'awesome',
 clientId: 'Your Client Id',

 template: '<a href="{{link}}" target="_blank"><img src="http:{{image}}" /></a>'

answered Jul 08 '14 at 13:41

Auguste

285
1
4
11

You actually can just add the `useHttp: true` option. You don't have to add `http:` to the template. Check my answer above for more info. – Steven Schobert Jul 18 '14 at 04:59

score 0 · Answer 3 · answered Feb 22 '15 at 01:47

I was having a similar issue. Even after following Steven's answer I could not get the images to display locally. However, after uploading the file to the server all images appeared as expected. You have to make sure that the client id you use is correct and try to access it on the server. My code looked like this

<script type="text/javascript">
  var feed = new Instafeed({
  get: 'tagged',
  tagName: 'happy',
  clientId: 'the-client-id'
  });
  feed.run();
</script>
 <div id="instafeed"></div>
</body>

Trouble with Instafeed.js

3 Answers3

Linked