Updating the Instagram widget

The old Instagram API will be shut down on June, 2020 so the old Instagram widget will stop working. All themes on the shop were updated in February 25, 2020.
If you bought a theme before the shop's name change, you will need to update your widget.
To get the new one, follow these steps below:



IMPORTANT:
Before make any changes on your theme, make sure you have a backup of it.
To get yours, go to Theme > Backup/Restore > Download Theme


Adding the css

1. Go to Theme > Customize > Advanced > Add Css and paste the following code:
.instagram_gallery {
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
}

.instagram_gallery a {
  width: 20%;
}

.instagram_gallery img:hover {
  opacity: .8;
}

@media screen and (max-width: 50em) {
  .instagram_gallery {
    flex-wrap: wrap;
  }

  .instagram_gallery a {
    width: 50%;
  }

  .instagram_gallery a:last-of-type {
    display: none;
  }
}
2. Save the changes.



Adding the jquery code

1. Go to Theme > Edit html
2. Click anywhere inside the code to enable the search bar
3. Use ctrl + F or command + F to search for </head>
4. Above </head>, paste the following code:
<script>//<![CDATA[
/*
jquery.instagramFeed
@version 1.2.1
@author Javier Sanahuja Liebana <bannss1@gmail.com>
@contributor csanahuja <csanahuja@gmail.com>
github.com/jsanahuja/jquery.instagramFeed
*/
(function(k){var l={host:"https://www.instagram.com/",username:"",tag:"",container:"",display_profile:!0,display_biography:!0,display_gallery:!0,display_igtv:!1,get_data:!1,callback:null,styling:!0,items:8,items_per_row:4,margin:.5,image_size:640},m={150:0,240:1,320:2,480:3,640:4};k.instagramFeed=function(n){var a=k.fn.extend({},l,n);if(""==a.username&&""==a.tag)return console.error("Instagram Feed: Error, no username or tag found."),!1;"undefined"!==typeof a.get_raw_json&&(console.warn("Instagram Feed: get_raw_json is deprecated. See use get_data instead"),
a.get_data=a.get_raw_json);if(!a.get_data&&""==a.container)return console.error("Instagram Feed: Error, no container found."),!1;if(a.get_data&&null==a.callback)return console.error("Instagram Feed: Error, no callback defined to get the raw json"),!1;var h=""==a.username;k.get(h?a.host+"explore/tags/"+a.tag:a.host+a.username,function(b){b=b.split("window._sharedData = ")[1].split("\x3c/script>")[0];b=JSON.parse(b.substr(0,b.length-1));b=b.entry_data.ProfilePage||b.entry_data.TagPage;b=b[0].graphql.user||
b[0].graphql.hashtag;if(a.get_data)a.callback(b);else{var c="",f="",g="",e="",p="";a.styling&&(c=" style='text-align:center;'",f=" style='border-radius:10em;width:15%;max-width:125px;min-width:50px;'",g=" style='font-size:1.2em;'",e=" style='font-size:1em;'",p=" style='margin:"+a.margin+"% "+a.margin+"%;width:"+(100-2*a.margin*a.items_per_row)/a.items_per_row+"%;float:left;'");var d="";a.display_profile&&(d=d+("<div class='instagram_profile'"+c+">")+("<img class='instagram_profile_image' src='"+b.profile_pic_url+
"' alt='"+(h?b.name+" tag pic":b.username+" profile pic")+"'"+f+" />"),d=h?d+("<p class='instagram_tag'"+g+"><a href='https://www.instagram.com/explore/tags/"+a.tag+"' rel='noopener' target='_blank'>#"+a.tag+"</a></p>"):d+("<p class='instagram_username'"+g+">@"+b.full_name+" (<a href='https://www.instagram.com/"+a.username+"' rel='noopener' target='_blank'>@"+a.username+"</a>)</p>"),!h&&a.display_biography&&(d+="<p class='instagram_biography'"+e+">"+b.biography+"</p>"),d+="</div>");g="undefined"!==
typeof m[a.image_size]?m[a.image_size]:m[640];if(a.display_gallery)if("undefined"!==typeof b.is_private&&!0===b.is_private)d+="<p class='instagram_private'><strong>This profile is private</strong></p>";else{e=(b.edge_owner_to_timeline_media||b.edge_hashtag_to_media).edges;f=e.length>a.items?a.items:e.length;d+="<div class='instagram_gallery'>";for(c=0;c<f;c++){var l="https://www.instagram.com/p/"+e[c].node.shortcode;switch(e[c].node.__typename){case "GraphSidecar":var q="sidecar";var r=e[c].node.thumbnail_resources[g].src;
break;case "GraphVideo":q="video";r=e[c].node.thumbnail_src;break;default:q="image",r=e[c].node.thumbnail_resources[g].src}var n="undefined"!==typeof e[c].node.edge_media_to_caption.edges[0]?e[c].node.edge_media_to_caption.edges[0].node.text:"undefined"!==typeof e[c].node.accessibility_caption?e[c].node.accessibility_caption:(h?b.name:b.username)+" image "+c;d+="<a href='"+l+"' class='instagram-"+q+"' rel='noopener' target='_blank'>";d+="<img src='"+r+"' alt='"+n+"'"+p+" />";d+="</a>"}d+="</div>"}if(a.display_igtv&&
"undefined"!==typeof b.edge_felix_video_timeline&&(b=b.edge_felix_video_timeline.edges,f=b.length>a.items?a.items:b.length,0<b.length)){d+="<div class='instagram_igtv'>";for(c=0;c<f;c++)d+="<a href='https://www.instagram.com/p/"+b[c].node.shortcode+"' rel='noopener' target='_blank'>",d+="<img src='"+b[c].node.thumbnail_src+"' alt='"+a.username+" instagram image "+c+"'"+p+" />",d+="</a>";d+="</div>"}k(a.container).html(d)}}).fail(function(a){console.error("Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: ",
a.status)});return!0}})(jQuery);
//]]></script>
5. Save the changes.



Setting your instagram username

1. Go to Layout > open the instagram widget or other HTML/Javascript widget and paste the following code:
<script>//<![CDATA[
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'your-username',
'container': "#instagram-feed1",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_igtv': false,
'callback': null,
'styling': false,
'items': 5,
'margin': 0
});
});
})(jQuery);
//]]></script>
<div id='instagram-feed1'/>
2. Replace the blue text with your username.
    Be careful to not delete any quotation marks.
    Don't use @ on your username.
3. Save the widget.



Requesting an updated copy of the theme


You can also get a copy of the updated theme, just email me at lovelogicdesignstudio@gmail.com with your order information. This will not be charged.




Third-parties alternatives you can use


Contact Form