How To Add An Instagram Feed Section In Shopify Without App and Instagram API
I’ve written some articles to guide you on how to add an Instagram feed to your Shopify store both using the Shopify app and without the app. But the guidelines for the case without an app, it’s not possible now. Because Facebook has some updates. So this way is no longer available.
If you still don’t want to use the Shopify app. I have got great news for you. We were worked and found another solution to help you still can add an Instagram feed to your Shopify store without the app or Instagram API.
Please follow the below steps to know how to do that.
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Sections directory, click Add a new section with the name hura-instagram-feed
- Copy the below code for this file content.123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194<div id="huratips-instagram-feed-section" style="position:relative;">{%- if section.settings.title != blank -%}<div class="huratips-custom-title"><h2>{{section.settings.title}}</h2></div>{%- endif -%}<div id="hura-instagram-feed" class="instagram_feed"></div></div><script>HuraTips_InstagramFeed = function($){var defaults={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},image_sizes={150:0,240:1,320:2,480:3,640:4},escape_map={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};function escape_string(e){return e.replace(/[&<>"'`=\/]/g,function(e){return escape_map[e]})}function parse_caption(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 get_cache(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 set_cache(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()))}function parse_response(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}}function request_data(e,a,t,i,r,n){var o;r&&n&&(o="https://images"+~~(3333*Math.random())+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url="+e),$.get(o||e,function(e){var t=parse_response(a,e);i(!1!==t&&t)}).fail(function(o){t>1?(console.warn("Instagram Feed: Request failed, "+(t-1)+" tries left. Retrying..."),request_data(e,a,t-1,i,r,!n)):i(!1,o)})}function get_data(e,a){var t=get_cache(e,!1);if(!1!==t)a(t);else{var i;switch(e.type){case"username":i=e.host+e.id+"/";break;case"tag":i=e.host+"explore/tags/"+e.id+"/";break;case"location":i=e.host+"explore/locations/"+e.id+"/";break;case"userid":i=e.host+'graphql/query/?query_id=17888483320059182&variables={"id":"'+e.id+'","first":'+e.items+',"after":null}'}request_data(i,e.type,e.max_tries,function(t,i){!1!==t?(set_cache(e,t),a(t)):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!==(t=get_cache(e,!0))?a(t):e.on_error("Instagram Feed: Unable to fetch the given user/tag. Instagram responded with the status code: "+i.status,5)},e.host===defaults.host&&"userid"!=e.type,!1)}}function render(e,a){var t,i="";e.styling?(t={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*e.margin*e.items_per_row)/e.items_per_row+"%; margin:"+e.margin+'%;position:relative; display: inline-block; height: 100%;"'},e.display_captions&&(i+="<style>#hura-instagram-feed 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>")):t={profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:"",gallery_image_link:""};if(e.display_profile&&"userid"!==e.type&&(i+='<div class="instagram_profile"'+t.profile_container+">",i+='<img class="instagram_profile_image" src="//api.allorigins.win/raw?url='+encodeURIComponent(a.profile_pic_url)+'" alt="'+("tag"==e.type?a.name+" tag pic":a.username+" profile pic")+'"'+t.profile_image+(e.lazy_load?' loading="lazy"':"")+" />","tag"==e.type?i+='<p class="instagram_tag"'+t.profile_name+'><a href="//www.instagram.com/explore/tags/'+e.tag+'/" rel="noopener" target="_blank">#'+e.tag+"</a></p>":"username"==e.type?(i+="<p class='instagram_username'"+t.profile_name+">@"+a.full_name+" (<a href='//www.instagram.com/"+e.username+"/' rel='noopener' target='_blank'>@"+e.username+"</a>)</p>",e.display_biography&&(i+="<p class='instagram_biography'"+t.profile_biography+">"+a.biography+"</p>")):"location"==e.type&&(i+="<p class='instagram_location'"+t.profile_name+"><a href='//www.instagram.com/explore/locations/"+e.location+"/' rel='noopener' target='_blank'>"+a.name+"</a></p>"),i+="</div>"),e.display_gallery){if(void 0!==a.is_private&&!0===a.is_private)i+='<p class="instagram_private"><strong>This profile is private</strong></p>';else{var r=void 0!==image_sizes[e.image_size]?image_sizes[e.image_size]:image_sizes[640],n=(a.edge_owner_to_timeline_media||a.edge_hashtag_to_media||a.edge_location_to_media).edges,o=n.length>e.items?e.items:n.length;i+="<div class='instagram_gallery'>";for(var s=0;s<o;s++){var l,d,c="https://www.instagram.com/p/"+n[s].node.shortcode;switch(!1===(_=parse_caption(n[s],a))&&(_=("userid"==e.type?"":e.id)+" image"),_=escape_string(_),n[s].node.__typename){case"GraphSidecar":d="sidecar",l=n[s].node.thumbnail_resources[r].src;break;case"GraphVideo":d="video",l=n[s].node.thumbnail_src;break;default:d="image",l=n[s].node.thumbnail_resources[r].src}i+='<a href="'+c+'"'+(e.display_captions?' data-caption="'+_+'"':"")+' class="instagram-'+d+'" rel="noopener" target="_blank"'+t.gallery_image_link+">",i+="<img"+(e.lazy_load?' loading="lazy"':"")+' src="//api.allorigins.win/raw?url='+encodeURIComponent(l)+'" alt="'+_+'"'+t.gallery_image+" />",i+="</a>"}i+="</div>"}i+='<p class="hura-credit" style="text-align:right;font-size:50%;margin-bottom:20px;font-style:italic;">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p>'}if(e.display_igtv&&void 0!==a.edge_felix_video_timeline){var g=a.edge_felix_video_timeline.edges;o=g.length>e.items?e.items:g.length;if(g.length>0){i+='<div class="instagram_igtv">';for(s=0;s<o;s++){var _;c="//www.instagram.com/p/"+g[s].node.shortcode;!1===(_=parse_caption(g[s],a))&&(_=("userid"==e.type?"":e.id)+" image"),_=escape_string(_),i+='<a href="'+c+'"'+(e.display_captions?' data-caption="'+_+'"':"")+' rel="noopener" target="_blank"'+t.gallery_image_link+">",i+="<img"+(e.lazy_load?' loading="lazy"':"")+' src="'+g[s].node.thumbnail_src+'" alt="'+_+'"'+t.gallery_image+" />",i+="</a>"}i+="</div>"}}$(e.container).html(i)}$.instagramFeed=function(e){var a=$.fn.extend({},defaults,e);return""==a.username&&""==a.tag&&""==a.user_id&&""==a.location?(a.on_error("Instagram Feed: Error, no username, tag or user_id defined.",1),!1):(void 0!==e.display_profile&&e.display_profile&&""!=a.user_id&&console.warn("Instagram Feed: 'display_profile' is not available using 'user_id' (GraphQL API)"),void 0===e.display_biography||!e.display_biography||""==a.tag&&""==a.location&&""==a.user_id||console.warn("Instagram Feed: 'display_biography' is not available unless you are loading an user ('username' parameter)"),void 0!==a.get_data&&console.warn("Instagram Feed: options.get_data is deprecated, options.callback is always called if defined"),null==a.callback&&""==a.container?(a.on_error("Instagram Feed: Error, neither container found nor callback defined.",2),!1):(""!=a.username?(a.type="username",a.id=a.username):""!=a.tag?(a.type="tag",a.id=a.tag):""!=a.location?(a.type="location",a.id=a.location):(a.type="userid",a.id=a.user_id),a.cache_data_key="instagramFeed_"+a.type+"_"+a.id,a.cache_time_key=a.cache_data_key+"_time",get_data(a,function(e){""!=a.container&&render(a,e),null!=a.callback&&a.callback(e)}),!0))};$.instagramFeed({'username': '{{section.settings.username}}','container': "#hura-instagram-feed",'host': 'https://images' + ~~(Math.random() * 3333) + '-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/','display_profile': {{section.settings.display_profile}},'display_biography': {{section.settings.display_biography}},'display_gallery': {{section.settings.display_gallery}},'display_captions': {{section.settings.display_captions}},'max_tries': {{section.settings.numbers_of_media_display}},'callback': null,'styling': true,'items': {{section.settings.numbers_of_media_display}},'items_per_row': {{section.settings.items_per_row}},'margin': 1,'lazy_load': true,});}var jqHuraScript=document.createElement("script");jqHuraScript.setAttribute("src","https://code.jquery.com/jquery-1.12.4.min.js"),jqHuraScript.setAttribute("type","text/javascript"),jqHuraScript.readyState?jqHuraScript.onreadystatechange=function(){"loaded"!=this.readyState&&"complete"!=this.readyState||HuraTips_InstagramFeed(jQuery.noConflict(!0))}:jqHuraScript.onload=function(){HuraTips_InstagramFeed(jQuery.noConflict(!0))};var d=document.getElementsByTagName("head")[0]||document.documentElement;d.appendChild(jqHuraScript);</script>{% schema %}{"name": "Instagram Feed","settings": [{"type": "header","content": "Created by HuraTips.Com"},{"type": "text","id": "title","label": "Title","default": "Instagram Feed"},{"type": "text","id": "username","label": "Instagram Username","default": "huynhmaianhkiet"},{"type": "checkbox","id": "display_profile","label": "Display profile","default": true},{"type": "checkbox","id": "display_biography","label": "Display biography","default": true},{"type": "checkbox","id": "display_gallery","label": "Display gallery","default": true},{"type": "checkbox","id": "display_captions","label": "Display captions","default": true},{"type": "select","id": "numbers_of_media_display","label": "Numbers of Media Display","default": "12","options": [{"value": "1","label": "1"},{"value": "2","label": "2"},{"value": "3","label": "3"},{"value": "4","label": "4"},{"value": "5","label": "5"},{"value": "6","label": "6"},{"value": "7","label": "7"},{"value": "8","label": "8"},{"value": "9","label": "9"},{"value": "10","label": "10"},{"value": "11","label": "11"},{"value": "12","label": "12"}]},{"type": "select","id": "items_per_row","label": "Items per row","default": "4","options": [{"value": "1","label": "1"},{"value": "2","label": "2"},{"value": "3","label": "3"},{"value": "4","label": "4"},{"value": "5","label": "5"},{"value": "6","label": "6"},{"value": "7","label": "7"},{"value": "8","label": "8"},{"value": "9","label": "9"},{"value": "10","label": "10"},{"value": "11","label": "11"},{"value": "12","label": "12"}]}],"presets": [{"name": "Instagram Feed","category": "Custom","settings": {}}]}{% endschema %}
- Click Save
To add the Instagram Feed section on the homepage, you must go to Customize theme. Navigate to the theme editor, click Add section and find to Instagram Feed. And now you can configure for this Instagram Feed section
Note: It’s only working with the public Instagram accounts.
I hope it’s useful to you.
