Can't call instagram API from Shopify

Question

I am trying to use the instagram API from my shopify webstore. I am using javascript. When I use jQuery, instagram does not pass back the right headers.

Here is the my code (the call has been verified):

jQuery

$.getJSON( call, function( data ) {
  alert("sdfewsf");
}).error(function(jqXHR, textStatus, errorThrown) {
  console.log("error " + textStatus);
  console.log("incoming Text " + jqXHR.responseText);
});

This is the error I recieve:

XMLHttpRequest cannot load https://api.instagram.com/v1/tags/%7Btag-name%7D/media/recent?client_id=95d4426edafc476d9b76a5dacc4c12ca. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.99centrazor.com' is therefore not allowed access. The response had HTTP status code 404.

I have also tried instafeed.js, which isn't working.

Instafeed.js

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

This returns an object but the run funciton does not work --

Uncaught TypeError: Cannot read property 'appendChild' of null

Does anyone know a way to make this thing work?!?! Thanks!

Answer 1

I'll narrow my answer to your second question, regarding instafeed.js.

The error you are seeing is caused by instafeed.js not finding its target element on the page.

To resolve this, make sure you have put <div id="instafeed"></div> on your page, and that you are loading instafeed.js after the page has been completely loaded:

$(document).ready(function() {
  var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: clientId
  });
  feed.run();
});