Updating the Instagram widget

The Instagram widget is constantly updated to keep up with the changes that are being made on the Instagram platform, and in this way, keep working.
If your photos have disappeared from your theme, read on to learn how to update your widget:

IMPORTANT:
Before making any changes to your theme, make sure you have a backup of it.

Adding the css

1. Go to Theme > Customize > Advanced > General > scroll down until 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 > arrow next to the Customize button > 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 3.0.4
 *
 * https://github.com/jsanahuja/jquery.instagramFeed
 *
 */
!function(e){var a={host:"https://www.instagram.com/",username:"",tag:"",user_id:"",location:"",container:"",display_profile:!0,display_biography:!0,display_gallery:!0,display_captions:!1,display_igtv:!1,max_tries:8,callback:null,styling:!0,items:8,items_per_row:4,margin:.5,image_size:640,lazy_load:!1,cache_time:360,on_error:console.error},t={150:0,240:1,320:2,480:3,640:4},i={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};function r(e){return e.replace(/[&<>"'`=\/]/g,function(e){return i[e]})}function o(e,a){return void 0!==e.node.edge_media_to_caption.edges[0]&&void 0!==e.node.edge_media_to_caption.edges[0].node&&void 0!==e.node.edge_media_to_caption.edges[0].node.text&&null!==e.node.edge_media_to_caption.edges[0].node.text?e.node.edge_media_to_caption.edges[0].node.text:void 0!==e.node.title&&null!==e.node.title&&0!=e.node.title.length?e.node.title:void 0!==e.node.accessibility_caption&&null!==e.node.accessibility_caption&&0!=e.node.accessibility_caption.length&&e.node.accessibility_caption}function n(e,a){var t=a||!1;if(!a&&e.cache_time>0){var i=localStorage.getItem(e.cache_time_key);null!==i&&parseInt(i)+6e4*e.cache_time>(new Date).getTime()&&(t=!0)}if(t){var r=localStorage.getItem(e.cache_data_key);if(null!==r)return JSON.parse(r)}return!1}function s(a,t,i,r,o,n){var l;o&&n&&(l="https://images"+~~(3333*Math.random())+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url="+a),e.get(l||a,function(e){var a=function(e,a){switch(e){case"username":case"tag":case"location":try{a=a.split("window._sharedData = ")[1].split("<\/script>")[0]}catch(e){return!1}return void 0!==(a=(a=JSON.parse(a.substr(0,a.length-1))).entry_data.ProfilePage||a.entry_data.TagPage||a.entry_data.LocationsPage)&&(a[0].graphql.user||a[0].graphql.hashtag||a[0].graphql.location);case"userid":return void 0!==a.data.user&&a.data.user}}(t,e);r(!1!==a&&a)}).fail(function(e){i>1?(console.warn("Instagram Feed: Request failed, "+(i-1)+" tries left. Retrying..."),s(a,t,i-1,r,o,!n)):r(!1,e)})}function l(e,t){var i=n(e,!1);if(!1!==i)t(i);else{var r;switch(e.type){case"username":r=e.host+e.id+"/";break;case"tag":r=e.host+"explore/tags/"+e.id+"/";break;case"location":r=e.host+"explore/locations/"+e.id+"/";break;case"userid":r=e.host+'graphql/query/?query_id=17888483320059182&variables={"id":"'+e.id+'","first":'+e.items+',"after":null}'}s(r,e.type,e.max_tries,function(a,i){!1!==a?(!function(e,a){var t=localStorage.getItem(e.cache_time_key);0!=e.cache_time&&(null===t||parseInt(t)+6e4*e.cache_time>(new Date).getTime())&&(localStorage.setItem(e.cache_data_key,JSON.stringify(a)),localStorage.setItem(e.cache_time_key,(new Date).getTime()))}(e,a),t(a)):void 0===i?e.on_error("Instagram Feed: It looks like the profile you are trying to fetch is age restricted. See https://github.com/jsanahuja/InstagramFeed/issues/26",3):!1!==(a=n(e,!0))?t(a):e.on_error("Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: "+i.status,5)},e.host===a.host&&"userid"!=e.type,!1)}}e.instagramFeed=function(i){var n=e.fn.extend({},a,i);return""==n.username&&""==n.tag&&""==n.user_id&&""==n.location?(n.on_error("Instagram Feed: Error, no username, tag or user_id defined.",1),!1):(void 0!==i.display_profile&&i.display_profile&&""!=n.user_id&&console.warn("Instagram Feed: 'display_profile' is not available using 'user_id' (GraphQL API)"),void 0===i.display_biography||!i.display_biography||""==n.tag&&""==n.location&&""==n.user_id||console.warn("Instagram Feed: 'display_biography' is not available unless you are loading an user ('username' parameter)"),void 0!==n.get_data&&console.warn("Instagram Feed: options.get_data is deprecated, options.callback is always called if defined"),null==n.callback&&""==n.container?(n.on_error("Instagram Feed: Error, neither container found nor callback defined.",2),!1):(""!=n.username?(n.type="username",n.id=n.username):""!=n.tag?(n.type="tag",n.id=n.tag):""!=n.location?(n.type="location",n.id=n.location):(n.type="userid",n.id=n.user_id),n.cache_data_key="instagramFeed_"+n.type+"_"+n.id,n.cache_time_key=n.cache_data_key+"_time",l(n,function(a){""!=n.container&&function(a,i){var n,s="";if(a.styling?(n={profile_container:' style="text-align:center;"',profile_image:' style="border-radius:10em;width:15%;max-width:125px;min-width:50px;"',profile_name:' style="font-size:1.2em;"',profile_biography:' style="font-size:1em;"',gallery_image:' style="width:100%;"',gallery_image_link:' style="width:'+(100-2*a.margin*a.items_per_row)/a.items_per_row+"%; margin:"+a.margin+'%;position:relative; display: inline-block; height: 100%;"'},a.display_captions&&(s+="<style>                    a[data-caption]:hover::after {                        content: attr(data-caption);                        text-align: center;                        font-size: 0.8rem;                        color: black;                        position: absolute;                        left: 0;                        right: 0;                        bottom: 0;                        padding: 1%;                        max-height: 100%;                        overflow-y: auto;                        overflow-x: hidden;                        background-color: hsla(0, 100%, 100%, 0.8);                    }                </style>")):n={profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:"",gallery_image_link:""},a.display_profile&&"userid"!==a.type&&(s+='<div class="instagram_profile"'+n.profile_container+">",s+='<img class="instagram_profile_image" src="'+i.profile_pic_url+'" alt="'+("tag"==a.type?i.name+" tag pic":i.username+" profile pic")+'"'+n.profile_image+(a.lazy_load?' loading="lazy"':"")+" />","tag"==a.type?s+='<p class="instagram_tag"'+n.profile_name+'><a href="https://www.instagram.com/explore/tags/'+a.tag+'/" rel="noopener" target="_blank">#'+a.tag+"</a></p>":"username"==a.type?(s+="<p class='instagram_username'"+n.profile_name+">@"+i.full_name+" (<a href='https://www.instagram.com/"+a.username+"/' rel='noopener' target='_blank'>@"+a.username+"</a>)</p>",a.display_biography&&(s+="<p class='instagram_biography'"+n.profile_biography+">"+i.biography+"</p>")):"location"==a.type&&(s+="<p class='instagram_location'"+n.profile_name+"><a href='https://www.instagram.com/explore/locations/"+a.location+"/' rel='noopener' target='_blank'>"+i.name+"</a></p>"),s+="</div>"),a.display_gallery)if(void 0!==i.is_private&&!0===i.is_private)s+='<p class="instagram_private"><strong>This profile is private</strong></p>';else{var l=void 0!==t[a.image_size]?t[a.image_size]:t[640],d=(i.edge_owner_to_timeline_media||i.edge_hashtag_to_media||i.edge_location_to_media).edges,c=d.length>a.items?a.items:d.length;s+="<div class='instagram_gallery'>";for(var g=0;g<c;g++){var _,p,m="https://www.instagram.com/p/"+d[g].node.shortcode;switch(!1===(u=o(d[g]))&&(u=("userid"==a.type?"":a.id)+" image"),u=r(u),d[g].node.__typename){case"GraphSidecar":p="sidecar",_=d[g].node.thumbnail_resources[l].src;break;case"GraphVideo":p="video",_=d[g].node.thumbnail_src;break;default:p="image",_=d[g].node.thumbnail_resources[l].src}s+='<a href="'+m+'"'+(a.display_captions?' data-caption="'+u+'"':"")+' class="instagram-'+p+'" rel="noopener" target="_blank"'+n.gallery_image_link+">",s+="<img"+(a.lazy_load?' loading="lazy"':"")+' src="'+_+'" alt="'+u+'"'+n.gallery_image+" />",s+="</a>"}s+="</div>"}if(a.display_igtv&&void 0!==i.edge_felix_video_timeline){var y=i.edge_felix_video_timeline.edges;if(c=y.length>a.items?a.items:y.length,y.length>0){for(s+='<div class="instagram_igtv">',g=0;g<c;g++){var u;m="https://www.instagram.com/p/"+y[g].node.shortcode,!1===(u=o(y[g]))&&(u=("userid"==a.type?"":a.id)+" image"),u=r(u),s+='<a href="'+m+'"'+(a.display_captions?' data-caption="'+u+'"':"")+' rel="noopener" target="_blank"'+n.gallery_image_link+">",s+="<img"+(a.lazy_load?' loading="lazy"':"")+' src="'+y[g].node.thumbnail_src+'" alt="'+u+'"'+n.gallery_image+" />",s+="</a>"}s+="</div>"}}e(a.container).html(s)}(n,a),null!=n.callback&&n.callback(a)}),!0))}}(jQuery);
//]]></script>



Setting your instagram username

1. Go to Layout > open the instagram widget or other HTML/Javascript widget and paste the following code:

<div id='instagram-feed1'/>
<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>
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 alternative you can use

Snapwidget




Troubleshooting


You did update your widget and still not seeing the photos? Read the following article to know what it's happening:
Instagram widget not showing the photos

Contact Form