Integrate A Instagram Stream Into Your Webpage – Minigram.js

Minigram.js is a minimal JavaScript library that gets and displays a list of your latest Instagram pictures on the webpage. You are free to style the list using your own CSS.

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 JavaScript file Minigram.js at the end of the document.

<script src="dist/minigram.js"></script>

Create a container to place your latest Instagram photos.

<div class="demo">
</div>

Create a new Minigram instance and insert your own API access token to the JavaScript:

new Minigram('.demo', {
    token: 'YOUR API KEY HERE'
});

Set the maximum number of photos you want to display.

new Minigram('.demo', {
    token: 'YOUR API KEY HERE',
    counter: 12
});

Set the photo quality.

new Minigram('.demo', {
    token: 'YOUR API KEY HERE',
    counter: 12,
    resolution: 'low'
});

Customize the template.

new Minigram('.demo', {
    token: 'YOUR API KEY HERE',
    counter: 12,
    resolution: 'low',
    html: '<div class="col-lg-3"><a class="instagram-placeholder" href="{url}" target="_blank"><img src="{image}" alt="{caption}" class="img-thumbnail img-responsive"></a></div>'
});