minigram

v0.1.1

Published

2 years ago

A simple plugin to display your latest Instagram photos with Vanilla JS

Downloads

0High
0Medium
0Low

pinceladasdaweb

instagram

Minigram

A simple plugin to display your latest Instagram photos with Vanilla JS

Demo

View demo here

Install

With npm

npm install minigram --save

Download

You can download the latest version or checkout all the releases here.

How to use?

Require the package or use the global Minigram namespace:

AMD

<script>
require(["path/to/minigram.js"], function(Minigram) {
    // Code here
});
</script>

commonJS

var Minigram = require('Minigram');

ES6

import Minigram from 'Minigram';

Browser

<script src="path/to/minigram.js"></script>

Basic Usage

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>

Requirements

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.

Options

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 20
resolution - Size of the images to get. Available options are:
- thumb (default) - 150x150
- low - 306x306
- standard - 612x612
token - A valid oAuth token. See the wiki how to get your token
html - 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.

Templating

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 be image or video.
{likes} - Number of likes the image has.
{filter} - Filter name used in photo.
{image} - URL of the image source. The size is inherited from the resolution option.