Instagram API

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

Official documentation

For more detailed information and examples, see the official documentation: Instagram API .

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>

JavaScript behavior

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="".

Attributes Description

data-user-id

 A unique user ID. Use if data-get is set true.

data-get

data-client-id

 An ID obtained with the Instagram API. Required!.

data-token

 A valid oAuth token. Can be used in place of / along with the user ID.

data-get

 Determines which type of images to output.
Valid values are:
  • user
  • popular
  • tagged
  • location
Default value is user

data-limit

 Specifies the limit on the number of output images.

data-template

 A template element.

afterShow: function (invoker) {}

 Executes the code inside the body of the function each time it appears.

beforeShow: function (invoker) {}

 Executes the code inside the body of the function each time it appears.

success: function (invoker) {}

 Executes the code inside the body of the function if the plugin received the data.

error: function (invoker) {}

 Executes the code inside the body if the images could not be loaded.
Previous Slick carousel
Next Social APIs - Facebook
Contact Us