Instagram API

Instagram API can be used to build non-automated, authentic, high-quality demonstrative blocks.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.instagram.js plugin and include the data-user-id, data-client-id and data-token data attributes.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/instafeed.js/instafeed.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/helpers/hs.instagram.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of instagram api
    $.HSCore.components.HSInstagram.init('#instaFeed', {
      after: function () {
        // initialization of masonry.js
        var $grid = $('.js-instagram').masonry({
          percentPosition: true
        });

        // initialization of images loaded
        $grid.imagesLoaded().progress(function () {
          $grid.masonry();
        });
      }
    });
  });
</script>

Objects

Quality of the images.

resolution: 'standard_resolution' - string

Valid values are:

• thumbnail (150x150)
• low_resolution (306x306)
• standard_resolution (612x612)

Default value is: thumbnail

Callbacks

before: function (invoker) {} - function
after: function (invoker) {} - function
success: function (invoker) {} - function
error: function (invoker) {} - function

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-user-id="".