CODEWITHSUNDEEP
javascriptinstagramfeedcodepen
Ruilk Gold
Ruilk Gold

Reputation: 51

Instagram feed javascript on my website wont work

Hey I'm trying to implement this codepen script:

https://codepen.io/matthewelsom/pen/zrrrLN

On my website http://mariumarif.co.uk/index.php

But it won't work on my site

I've generated and entered all my "client id" "secret code" etc into the codepen and it works IN the codepen with my instagram: https://www.instagram.com/mariumarif_hairstylist/

Not sure why it won't work on my site. Any ideas? 

// Use the CDN or host the script yourself
// https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js
// https://matthewelsom.com/assets/js/libs/instafeed.min.js

var userFeed = new Instafeed({
  get: 'user',
  userId: 'MY_USER_ID',
  clientId: 'MY_CLIENT_ID',
  accessToken: 'MY_ACCESS_TOKEN',
  resolution: 'standard_resolution',
  template: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
  sortBy: 'most-recent',
  limit: 17,
  links: true
});
userFeed.run();
#instafeed {
  max-width: 1080px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
#instafeed a {
  display: flex;
  align-items: center;
  position: relative;
  width: 50%;
  background: white;
}
@media only screen and (min-width: 580px) {
  #instafeed a {
    width: 25%;
  }
}
#instafeed a img {
  display: block;
  width: 100%;
}
<div id="instafeed">
</div>

Upvotes: 1

Views: 1157

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26360

Open your console (F12). It says :

Uncaught ReferenceError: Instafeed is not defined

So, as the instructions say ("Use the CDN or host the script yourself") include this dependency before running your code and you should be good :

<script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>

Upvotes: 1

Related Questions