Search code examples
javascriptjqueryhtmlcssinstafeedjs

Trying to get a load more button working on an Instagram Instafeed script but it isn't responding in my site


I have an instagram feed integrated into a site I'm updating, I'm using instafeed.js which I have used before and I've set the feed up no problem but I'm trying to integrate a load more button which would load more images below the original set of images.

Even though I've done this before in another site and I'm using the exact same code as I did then, it doesn't want to make the load more button work. Can anyone help me find where I'm going wrong and get the solution?

HTML:

<div class="instagramFeed row">
    <div id="instafeed"></div>

    <p id="mybutton">Load More...</p>

</div>

</div> <!-- end container three -->

CSS:

.instagramFeed {
 padding-bottom: 40px;
 border-bottom: 1px dotted #666666;
}

#instafeed {
 position: relative;
 width: 108%;
 max-width: 108%;
 z-index: 999;
}

#instafeed img {
position: relative;
 width: 20%;
 max-width: 100%;
 margin-right: 4.5%;
 margin-top: 4.5%;
}

#mybutton {
 position: absolute;
 z-index: 999;
}

JS:

var feed = new Instafeed({
target: 'instafeed',
get: 'tagged',
userId: 925022210,
tagName: 'justanotherinvegas',
accessToken: '925022210.467ede5.5d4dff89eb4c464392a859b27f8f43f5',
clientId: 'f1e17875a4214d059676570a91955844',
limit: '12',
sortBy: 'most-recent',
link: 'true',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
resolution: 'standard_resolution'
});

 // call feed.next() on button click
 $('#mybutton').on('click', function() {
  feed.next();
 });

 feed.run();

Solution

  • I have added a JsFiddle for the code provided, the problem is that next() is not defined.

    Check the console.log where it shows that feed has {options: Object, run: function, parse: function, _buildUrl: function} there is no next function defined

    I have updated my fiddle with an older version of the script that works. Apparently at some point, the script removed these features.