JavaScript Library To Fetch And Display Instagram Feeds On The Webpage – instafetch.js

instafetch.js is an easy-to-implement, dependency-free JavaScript library that has the ability to fetch and display the latest Instagram images with captions using Instagram API. Includes the ES6-Promise polyfill for Internet Explorer support.

Important Note:

This plugin is broken since Instagram has changed its API. You can now use the Feed Instagram Graph API plugin instead.

How to use it:

Place the minified version of the instafetch.js at the bottom of the webpage.

<script src="instafetch.min.js"></script>

Create an empty container with an unique ID ‘instafetch’.

<div id="instafetch"></div>

Initialize the instafetch.js and insert your own access token as this:

document.addEventListener('DOMContentLoaded', function() {
  instafetch.init({
    accessToken: 'ACCESS TOKEN'
  });
});

Specify the maximum number of Instagram photos to display.

document.addEventListener('DOMContentLoaded', function() {
  instafetch.init({
    accessToken: 'ACCESS TOKEN',
    numOfPics: 10
  });
});

Decide whether to display the image captions.

document.addEventListener('DOMContentLoaded', function() {
  instafetch.init({
    accessToken: 'ACCESS TOKEN',
    caption: true
  });
});

Specify the CSS ID of the target container.

document.addEventListener('DOMContentLoaded', function() {
  instafetch.init({
    accessToken: 'ACCESS TOKEN',
    target: 'instafetch'
  });
});

Changelog:

09/13/2018

• Fixed bug for images without caption.