Tutorial v1.0: Customizing Instagram Feed Image Previews BlogrCart MNMLUS

Blogger store owners would like to extend their Instagram's feed & show more posts/images at their store.

Below is the tutorial on how to extend Instagram's display at BlogrCart MNMLUS Blogger store template

Extending Instagram's Previews

Go to Template > back-up your template if necessary > click Edit  HTML.

Click the Jump to widget button and find HTML99

At HTML99 find <b:includable id='js-add-ons'>...</b:includable> & open up theme add-on codes by clicking the small black triangle on the left within this line of code.

Below you will find the functions for your Instagram preview like so:-

$(function(){
  // instafeed
  if($('#instafeed').length > 0){
      var t = document.getElementById('instafeed');
      var tn = t.getAttribute('data-tagname');
      var feed = new Instafeed({
      get: 'tagged',    // tagged (used with tagName)/popular/location(used with locationId)
      tagName:tn,
      sortBy:'most-recent',  //none(default)/most-recent/least-recent/most-liked/least-liked/most-commented/least-commented/random
      limit:8,     // max 60 (default)
      resolution:'thumbnail',      // thumbnail(default 150px)/low_resolution (306px)/high_resolution (612px)
      clientId:'dd406b0991a94edb98ed8a795676532e',  // Your API client id from Instagram. Required.
      template:'<a class="animation" href="{{link}}" target="_blank" rel="nofollow"><img src="{{image}}" /></a>'
      });
    feed.run();
  };
});

To customise how your Instagram display sorting edit at sortBy:'most-recent', . Other display sorting settings is as follows (use one):-

• least-recent
• most-liked
• least-liked
• most-commented
• least-commented
• random

To customise the amount of Instagram images to display change/edit at limit:8, (without quotes). Reminder the maximum images that can be displayed is 60.

If you desire a larger preview for your Instagram feed images change resolution:'thumbnail', to one of the below settings:-

• low_resolution
• high_resolution

Higher resolution images means the higher bytes to download & render/display a webpage. Use wisely.

Currently this theme is using its Public client id with Instagram. You can change to you own Instagram client Id at Instagram Website under Instagram Developer section while you are logged-in to your account.

Once you have set-up your own client Id at Instagram website, change the settings here clientId:'dd406b0991a94edb98ed8a795676532e', within the quotes.

Have a plug-in you want for you theme? Shout out at comment below.