I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented.
<script type="text/javascript">
feed = new Instafeed({
clientId: '99808b1edfc140eda1cfa2dca4b4fe4c',
accessToken: '201047212.467ede5.1072e8c882e34a8fb7975f725e7b3ba8',
get: 'user',
userId: 201047212,
resolution: 'standard_resolution',
links: 'false',
template: '<div id="instafeed-caption">{{caption}} <br>♥ {{likes}} on <a href="{{link}}" class="sky">instagram</a></div><div id="instafeed-container"><img src="{{image}}" /></div>',
mock: true,
custom: {
images: [],
currentImage: 0,
showImage: function () {
var result, image;
image = this.options.custom.images[this.options.custom.currentImage];
result = this._makeTemplate(this.options.template, {
model: image,
id: image.id,
link: image.link,
image: image.images[this.options.resolution].url,
caption: this._getObjectProperty(image, 'caption.text'),
likes: image.likes.count,
comments: image.comments.count,
location: this._getObjectProperty(image, 'location.name')
});
(function($){
$("#instafeed").html(result)
})
}
},
success: function (data) {
this.options.custom.images = data.data;
this.options.custom.showImage.call(this);
}
});
feed.run();
(function($){
$(".instafeed-next").click(function () {
var length, current;
current = feed.options.custom.currentImage;
length = feed.options.custom.images.length;
if (current < length - 1) {
feed.options.custom.currentImage++;
feed.options.custom.showImage.call(feed);
}
})
});
(function($){
$(".instafeed-prev").click(function () {
var length, current;
current = feed.options.custom.currentImage;
length = feed.options.custom.images.length;
if (current > 0) {
feed.options.custom.currentImage--
feed.options.custom.showImage.call(feed);
}
})
});
</script>
If anyone could help me identify and fix the issues with this script, I would greatly appreciate it. The initial example was taken from the Instafeed website for reference. You can find the website at www.hemeon.com. My specific website where I am trying to implement this is located at www.vcluxe.nu/contact-me. Thank you!