instagram-plugin.liquid

<!-- Instagram widget -->
<div class="col-12"><h2>{% t 'Instagram' %}</h2></div>
<div id="instagram" class="col-12"></div>

<!-- Instagram script -->
<script>
$.ajax({
  url: "https://js-instagram-proxy.herokuapp.com/{{social.instagram_url | replace: "https://www.instagram.com/", "" }}/media",
  dataType: "jsonp",
  data: {
    count: 12
  },
  success: function(json) {
    for (var i in json.posts) {
      if(i >= 12){continue};
      url = json.posts[i].display_url;
      shortcode = json.posts[i].shortcode;

      newElement = document.createElement('div');
      newElement.className = 'insta_img';
      newElement.style = 'background-image: url(' + url + ')';

      newElementLink = document.createElement('a');
      newElementLink.href = "https://www.instagram.com/p/" + shortcode;
      newElementLink.appendChild(newElement);

      var clientHeight = document.getElementById('instagram').clientHeight;
      document.getElementById("instagram").appendChild(newElementLink);
    }
  }
});
</script>
<!-- End Instagram script -->
<!-- Instagram css -->
<style>
#instagram {
  padding: 0;
  line-height:0;
}

#instagram a > div {
  display: inline-block;
  width: 16.666%;
  height: 0;
  padding-bottom: 16.666%!important;
  background: #eee 50% 50% no-repeat;
  background-size: cover;
}

/* Responsive instagram */
@media (max-width: 768px) {
  /* Instagram Feed */
  #instagram a > div {
    width: 25%;
    padding-bottom: 25%!important;
  }
}

@media (max-width: 544px) {
  #instagram a > div {
    width: 33.33%;
    padding-bottom: 33.33%!important;
  }
}
/* End Responsive instagram */

</style>
<!-- End Instagram css -->