A simple plugin to display your latest Instagram photos with Vanilla JS
View demo here
With npm
npm install minigram --save
You can download the latest version or checkout all the releases here.
Require the package or use the global Minigram
namespace:
<script>
require(["path/to/minigram.js"], function(Minigram) {
// Code here
});
</script>
var Minigram = require('Minigram');
import Minigram from 'Minigram';
<script src="path/to/minigram.js"></script>
See how easy it is to obtain images of a profile:
<script>
new Minigram(target, {
counter: 8,
resolution: 'low',
token: 'YOUR_TOKEN_HERE',
html: '<li class="instagram-thumbnail"><a class="instagram-placeholder" href="{url}" target="_blank"><img src="{image}" alt="{caption}"></a></li>'
});
</script>
The only thing you'll need to get going is a valid access token from Instagram's API. You can easily register for one on Instagram's website.
target
- Either the ID name, CLASS name or the DOM element itself where you want to add the images to.counter
- Maximum number of images to display. Default is 10. Max of 20resolution
- Size of the images to get. Available options are:thumb
(default) - 150x150low
- 306x306standard
- 612x612
token
- A valid oAuth token. See the wiki how to get your tokenhtml
- Custom HTML template to use for images. See templating.before
(function) - A callback function called before fetching images from Instagram.after
(function) - A callback function called when Instagram returns valid data.error
(function) - A callback function called if the API Instagram return error (argument -> json object).success
(function) - A callback function called when images have been added to the page.
The easiest way to control the way minigram.js looks on your website is to use the template option. You can write your own HTML markup and it will be used for every image that minigram.js fetches.
Here's a quick example:
<script>
new Minigram(target, {
counter: 8,
resolution: 'low',
token: 'YOUR_TOKEN_HERE',
html: '<a href="{url}"><img src="{image}" alt="{caption}"></a>'
});
</script>
Notice the {url}
, {image}
and {caption}
? The templating option provides several tags for you to use to control where variables are inserted into your HTML markup. Available keywors are:
{caption}
- Image's caption text. Defaults to empty string if there isn't one.{url}
- URL to view the image on Instagram's website.{type}
- the image's type. Can beimage
orvideo
.{likes}
- Number of likes the image has.{filter}
- Filter name used in photo.{image}
- URL of the image source. The size is inherited from theresolution
option.
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 9+ โ | Latest โ | Latest โ | Latest โ | Latest โ |
Check CONTRIBUTING.md for more information.
Check Releases for detailed changelog.