Trouble With Instafeed.js

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 a

Solution 1:

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:

<scripttype="text/javascript">var feed = newInstafeed({
    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.

Solution 2:

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.

<scripttype="text/javascript">var feed = newInstafeed({
 get: 'tagged',
 tagName: 'awesome',
 clientId: 'Your Client Id',

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

Solution 3:

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

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