A Simple Plugin To Display Your Latest Instagram Photos With Vanilla JS

Minigram is a simple plugin to display your latest Instagram photos using vanilla JS. You are free to design the menu using your own CSS.

get instagram photos javascript, javascript instagram api, instagram javascript code, instagram api get user photos, instafeed js demo github, instagram feed api

How to Make Instagram Slideshow with JavaScript | slide-stories

How to make use of it:

Put the JavaScript Minigram.js file in the document.

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

Create a container to put your latest Instagram photos.

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

Create a new Minigram instance and insert your API access token into 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
});

Adjust the image 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>'
});

Options

  • target – Either the ID name, CLASS name, or the DOM element itself which you want to add the images to.
  • counter – A maximum number of images to display. The default is 10. Max of 20
  • resolution – Size of the images to get. Available options are:
    • thumb (default) – 150×150
    • low – 306×306
    • standard – 612×612
  • token – A valid OAuth token.
  • html – Custom HTML template to use for images.
  • before (function) – A callback function is 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.

Integrate A Instagram Stream Into Your Webpage, Minigram Plugin/Github, instagram feed javascript 2022


See Demo And Download

Official Website(pinceladasdaweb): Click Here

This superior jQuery/javascript plugin is developed by pinceladasdaweb. For extra Advanced Usage, please go to the official website.

Share