Instafetch.js is a 6KB JavaScript plugin for the Instagram API using fetch instead of jQuery.
Instafetch.js is available on CDNJS, NPM, Bower, and GitHub.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/instafetch.js/1.5.0/instafetch.min.js"></script>
npm install --save instafetch.js
require('instafetch.js');
bower install instafetch.js
<script type="text/javascript" src="path/to/bower_components/instafetch.js/dist/instafetch.min.js"></script>
Download the script or the minified version in the dist
folder.
<script type="text/javascript" src="path/to/instafetch.min.js"></script>
The Instagram API uses the OAuth 2.0 protocol, so you're going to need an access token. The easiest way to get your access token is login to Instagram on your browser and generate one on Pixel Union.
<script type="text/javascript">
instafetch.init({
accessToken: 'ACCESS TOKEN',
target: 'instafetch',
numOfPics: 20,
caption: false
});
</script>
Instafetch.js will look for an element with the ID of instafetch by default. The target element can be changed when initializing the plugin.
Name | Description | Default Value |
---|---|---|
accessToken |
Generate this on Pixel Union | null |
target |
id of the element to insert the images into | 'instafetch' |
numOfPics |
Maximum number of pictures to display | 20 |
caption |
Whether to generate markup text | false |
articleClassName |
ClassName for the article tags | null |
aClassName |
ClassName for the a tags | null |
figureClassName |
ClassName for the figure tags | null |
imgClassName |
ClassName for the img tags | null |
divClassName |
ClassName for the div tag of the captions | null |
pClassName |
ClassName for the p tag of the captions | null |
imgLazyLoad |
If true, the src of the image is replaced with a data-src, for use with Lazy Loading. (e.g. lazyload) | false |
Instafetch.js was only 3KB initially, but those 3KB didn't support any version of Internet Explorer. IE will return "Promise is undefined" and the Instagram feed will be empty. Version 1.2 included the ES6-Promise polyfill, which added an extra 7KB just for IE. Version 1.3 removed the ES6-Promise polyfill for another Promise polyfill that only added 3KB.
1.5
- Updated Promise polyfill
- Fixed bug for returned images without a caption
1.4
- Updated Fetch-JSONP
- Switched from ES5 to ES6
1.3
- Removed ES6-Promise polyfill
- Added Promise polyfill
1.2.2
- Fixed installation instructions for NPM
1.2.1
- Published different paths on NPM and Bower
1.2
- Added Browserify
- Added ES6-Promise polyfill for Internet Explorer support (Brian Hague)
1.1
- Changed Instagram API endpoint
- Removed user ID
1.0
- Initial release
Please submit any issues here.
Instafetch.js is licensed under the MIT License.