Add a new instagram widget

Follow the instructions here.

Add a New Instagram Widget

Follow the instructions below only if you've purchased a theme before March 26, 2020 or if you've purchased one of these themes.

Add the Scripts

1. Go to Theme > Edit HTML > click anywhere on the code once (necessary) > press CTRL+F (or CMD+F on Mac) and paste this in the small search box that appears:
</head>
2. Paste this directly above it:
<script>//<![CDATA[
/*
jquery.instagramFeed
@version 1.3.2
@author Javier Sanahuja Liebana 
@contributor csanahuja
github.com/jsanahuja/jquery.instagramFeed
*/
!function(e){var a={host:"https://www.instagram.com/",username:"",tag:"",container:"",display_profile:!0,display_biography:!0,display_gallery:!0,display_igtv:!1,callback:null,styling:!0,items:8,items_per_row:4,margin:.5,image_size:640,lazy_load:!1,on_error:console.error},i={150:0,240:1,320:2,480:3,640:4},r={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};e.instagramFeed=function(t){var n=e.fn.extend({},a,t);if(""==n.username&&""==n.tag)return n.on_error("Instagram Feed: Error, no username nor tag defined.",1),!1;if(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)return n.on_error("Instagram Feed: Error, neither container found nor callback defined.",2),!1;var o=""==n.username,s=o?n.host+"explore/tags/"+n.tag+"/":n.host+n.username+"/";return e.get(s,function(a){try{a=a.split("window._sharedData = ")[1].split("<\/script>")[0]}catch(e){return void n.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)}if(void 0!==(a=(a=JSON.parse(a.substr(0,a.length-1))).entry_data.ProfilePage||a.entry_data.TagPage)){if(a=a[0].graphql.user||a[0].graphql.hashtag,""!=n.container){var t={profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:""};if(n.styling){t.profile_container=" style='text-align:center;'",t.profile_image=" style='border-radius:10em;width:15%;max-width:125px;min-width:50px;'",t.profile_name=" style='font-size:1.2em;'",t.profile_biography=" style='font-size:1em;'";var s=(100-2*n.margin*n.items_per_row)/n.items_per_row;t.gallery_image=" style='margin:"+n.margin+"% "+n.margin+"%;width:"+s+"%;float:left;'"}var l="";n.display_profile&&(l+="<div class='instagram_profile'"+t.profile_container+">",l+="<img class='instagram_profile_image' src='"+a.profile_pic_url+"' alt='"+(o?a.name+" tag pic":a.username+" profile pic")+"'"+t.profile_image+(n.lazy_load?" loading='lazy'":"")+" />",l+=o?"<p class='instagram_tag'"+t.profile_name+"><a href='https://www.instagram.com/explore/tags/"+n.tag+"' rel='noopener' target='_blank'>#"+n.tag+"</a></p>":"<p class='instagram_username'"+t.profile_name+">@"+a.full_name+" (<a href='https://www.instagram.com/"+n.username+"' rel='noopener' target='_blank'>@"+n.username+"</a>)</p>",!o&&n.display_biography&&(l+="<p class='instagram_biography'"+t.profile_biography+">"+a.biography+"</p>"),l+="</div>");var g=void 0!==i[n.image_size]?i[n.image_size]:i[640];if(n.display_gallery)if(void 0!==a.is_private&&!0===a.is_private)l+="<p class='instagram_private'><strong>This profile is private</strong></p>";else{var d=(a.edge_owner_to_timeline_media||a.edge_hashtag_to_media).edges;u=d.length>n.items?n.items:d.length,l+="<div class='instagram_gallery'>";for(var m=0;m<u;m++){var _,p,c,h="https://www.instagram.com/p/"+d[m].node.shortcode;switch(d[m].node.__typename){case"GraphSidecar":p="sidecar",_=d[m].node.thumbnail_resources[g].src;break;case"GraphVideo":p="video",_=d[m].node.thumbnail_src;break;default:p="image",_=d[m].node.thumbnail_resources[g].src}c=void 0!==d[m].node.edge_media_to_caption.edges[0]&&void 0!==d[m].node.edge_media_to_caption.edges[0].node&&void 0!==d[m].node.edge_media_to_caption.edges[0].node.text&&null!==d[m].node.edge_media_to_caption.edges[0].node.text?d[m].node.edge_media_to_caption.edges[0].node.text:void 0!==d[m].node.accessibility_caption&&null!==d[m].node.accessibility_caption?d[m].node.accessibility_caption:(o?a.name:a.username)+" image "+m,l+="<a href='"+h+"' class='instagram-"+p+"' rel='noopener' target='_blank'>",l+="<img"+(n.lazy_load?" loading='lazy'":"")+" src='"+_+"' alt='"+c.replace(/[&<>"'`=\/]/g,function(e){return r[e]})+"'"+t.gallery_image+" />",l+="</a>"}l+="</div>"}if(n.display_igtv&&void 0!==a.edge_felix_video_timeline){var f=a.edge_felix_video_timeline.edges,u=f.length>n.items?n.items:f.length;if(f.length>0){l+="<div class='instagram_igtv'>";for(m=0;m<u;m++)l+="<a href='https://www.instagram.com/p/"+f[m].node.shortcode+"' rel='noopener' target='_blank'>",l+="<img"+(n.lazy_load?" loading='lazy'":"")+" src='"+f[m].node.thumbnail_src+"' alt='"+n.username+" instagram image "+m+"'"+t.gallery_image+" />",l+="</a>";l+="</div>"}}e(n.container).html(l)}null!=n.callback&&n.callback(a)}else n.on_error("Instagram Feed: It looks like YOUR network has been temporary banned because of too many requests. See https://github.com/jsanahuja/jquery.instagramFeed/issues/25",4)}).fail(function(e){n.on_error("Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: "+e.status,5)}),!0}}(jQuery);
//]]></script>

Add the CSS

1. Go to Theme > Customize > Advanced > Add CSS and add this:
.instagram_gallery:after {
content: '';
clear: both;
display: table;
}
.instagram_gallery a {
position: relative;
display: block;
}
.instagram_gallery img {
display: block !important;
position: relative !important;
z-index: 1;
}
.instagram_gallery,
.instagram_gallery > a {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.instagram_gallery > a:hover {
opacity: 0.7;
}
@media screen and (max-width: 750px) {
.instagram_gallery img {
width: 33.33% !important;
}
}
2. Make sure to save the changes.

Add the Widget

1. Go to Layout > add the HTML/JavaScript widget to one of the footers. 2. Paste this code inside the HTML/JavaScript widget and replace add-your-username with your own:
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'add-your-username',
'container': "#instagram-feed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'display_igtv': false,
'callback': null,
'styling': true,
'items': 6,
'items_per_row': 6,
'margin': 0 
});
});
})(jQuery);
</script>
<div id="instagram-feed"></div>
3. Save the widget.