Wednesday, December 23, 2020

How to add Instagram Feed Widget to Blogger (Free & Without Authentication)



Last Update:

Adding Instagram Feed Widget to Blogger is now very easy! It doesn't need any authentication even you don't need to create any paid or free account in 3rd Party websites or apps. Another information - it is completely major devices responsive. 

Instagram Feed Widget Blogger

If you know how to edit your Blogger XML File, then you can add it yourself, otherwise, I have the best solution - You can update it with HTML Widget. 

3 Steps to add Instagram Feed Widget to Blogger [ Using XML File - Recommended]

Note: Backup your Theme file before updating on it. 

  1. Go to Blogger DashboardThemeEdit HTML
  2. Paste the following code where you want to show the Instagram Feed Widget. 
    <div class="insta-wrapper">
    <div class="insta-btn">
    <a href="#">Follow @instagram</a>
    </div>
    <div id="instagram-feed"></div>
    </div>
  3. Search for </body> tag and paste the following code and Save your Theme.

    <style>.insta-btn a{background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);color:#fff;padding:8px 13px;border-radius:4px}.instagram_gallery a img{width:100%}@media (min-width:992px){.insta-wrapper{display:block;overflow:hidden;position:relative}.instagram_gallery a{width:20%;display:block;float:left;opacity:.7;transition:.3s}.instagram_gallery a:hover{opacity:1}.insta-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}}@media (max-width:991px){.instagram_gallery a{width:33.33%;display:block;float:left}.insta-btn{text-align:center;padding:1rem 0}.insta-wrapper{display:block;position:relative;margin-top:2rem}}</style>
    <script>
    !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.InstagramFeed=t()}(this,function(){var t={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},_={150:0,240:1,320:2,480:3,640:4},m={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};return function(e){this.options=Object.assign({},t),this.options=Object.assign(this.options,e),this.is_tag=""==this.options.username,this.valid=!0,""==this.options.username&&""==this.options.tag?(console.error("InstagramFeed: Error, no username or tag defined."),this.valid=!1):this.options.get_data||""!=this.options.container?this.options.get_data&&"function"!=typeof this.options.callback&&(console.error("InstagramFeed: Error, invalid or undefined callback for get_data"),this.valid=!1):(console.error("InstagramFeed: Error, no container found."),this.valid=!1),this.get=function(i){var s=this.is_tag?this.options.host+"explore/tags/"+this.options.tag:this.options.host+this.options.username,a=new XMLHttpRequest,o=this;a.onload=function(e){var t;4===a.readyState&&(200===a.status?(t=a.responseText.split("window._sharedData = ")[1].split("<\/script>")[0],null===(t=(t=JSON.parse(t.substr(0,t.length-1))).entry_data.ProfilePage||t.entry_data.TagPage||null)?(console.log(s),console.error("InstagramFeed: Request error. No data retrieved: "+a.statusText)):(t=t[0].graphql.user||t[0].graphql.hashtag,i(t,o))):console.error("InstagramFeed: Request error. Response: "+a.statusText))},a.open("GET",s,!0),a.send()},this.parse_caption=function(e,t){return void 0!==e.node.edge_media_to_caption.edges[0]&&0!=e.node.edge_media_to_caption.edges[0].node.text.length?e.node.edge_media_to_caption.edges[0].node.text:void 0!==e.node.title&&0!=e.node.title.length?e.node.title:void 0!==e.node.accessibility_caption&&0!=e.node.accessibility_caption.length?e.node.accessibility_caption:(this.is_tag?t.name:t.username)+" image "},this.display=function(e){var t,i;i=this.options.styling?(t=(100-2*this.options.margin*this.options.items_per_row)/this.options.items_per_row,{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='margin:"+this.options.margin+"% "+this.options.margin+"%;width:"+t+"%;float:left;'"}):{profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:""};var s="";if(this.options.display_profile&&(s+="<div class='instagram_profile'"+i.profile_container+">",s+="<img class='instagram_profile_image' src='"+e.profile_pic_url+"' alt='"+(this.is_tag?e.name+" tag pic":e.username+" profile pic")+" profile pic'"+i.profile_image+" />",this.is_tag?s+="<p class='instagram_tag'"+i.profile_name+"><a href='https://www.instagram.com/explore/tags/"+this.options.tag+"' rel='noopener' target='_blank'>#"+this.options.tag+"</a></p>":s+="<p class='instagram_username'"+i.profile_name+">@"+e.full_name+" (<a href='https://www.instagram.com/"+this.options.username+"' rel='noopener' target='_blank'>@"+this.options.username+"</a>)</p>",!this.is_tag&&this.options.display_biography&&(s+="<p class='instagram_biography'"+i.profile_biography+">"+e.biography+"</p>"),s+="</div>"),this.options.display_gallery){var a=void 0!==_[this.options.image_size]?_[this.options.image_size]:_[640];if(void 0!==e.is_private&&!0===e.is_private)s+="<p class='instagram_private'><strong>This profile is private</strong></p>";else{var o=(e.edge_owner_to_timeline_media||e.edge_hashtag_to_media).edges,n=o.length>this.options.items?this.options.items:o.length;s+="<div class='instagram_gallery'>";for(var r=0;r<n;r++){var l,p,g="https://www.instagram.com/p/"+o[r].node.shortcode,d=this.parse_caption(o[r],e).replace(/[&<>"'`=\/]/g,function(e){return m[e]});switch(o[r].node.__typename){case"GraphSidecar":p="sidecar",l=o[r].node.thumbnail_resources[a].src;break;case"GraphVideo":p="video",l=o[r].node.thumbnail_src;break;default:p="image",l=o[r].node.thumbnail_resources[a].src}this.is_tag&&(e.username=""),s+="<a href='"+g+"' class='instagram-"+p+"' title='"+d+"' rel='noopener' target='_blank'>",s+="<img src='"+l+"' alt='"+d+"'"+i.gallery_image+" />",s+="</a>"}s+="</div>"}}if(this.options.display_igtv&&void 0!==e.edge_felix_video_timeline){var h=e.edge_felix_video_timeline.edges,n=h.length>this.options.items?this.options.items:h.length;if(0<h.length){s+="<div class='instagram_igtv'>";for(r=0;r<n;r++){s+="<a href='"+(g="https://www.instagram.com/p/"+h[r].node.shortcode)+"' rel='noopener' title='"+(d=this.parse_caption(h[r],e))+"' target='_blank'>",s+="<img src='"+h[r].node.thumbnail_src+"' alt='"+d+"'"+i.gallery_image+" />",s+="</a>"}s+="</div>"}}this.options.container.innerHTML=s},this.run=function(){this.get(function(e,t){t.options.get_data?t.options.callback(e):t.display(e)})},this.valid&&this.run()}});
    </script>

    <script>
    (function(){ new InstagramFeed({
    'username': 'instagram',
    'container': document.getElementById("instagram-feed"),
    'display_profile': false,
    'display_biography': false,
    'display_gallery': true,
    'callback': true,
    'styling': false,
    'items': 5,
    'items_per_row': 5,
    'margin': 0
    });
    })();
    </script>


Mobile Responsive Instagram Feed Widget
Responsive Instagram Feed Widget 




3 Steps to add Instagram Feed Widget to Blogger [ Using HTML Widget]

Desktop Instagram Feed Widget
Desktop Instagram Feed Widget

  1. Go to Blogger Dashboard ➝ Layout.
  2. Choose any gadget area where you want to show Instagram Feed Widget and Click on 'Add a Gadget'. 
  3. From Pop up window select HTML/Javascript Gadget ➝ Paste on it the following whole code ➝ Save. 
    <div class="insta-wrapper">
    <div class="insta-btn">
    <a href="#">Follow @instagram</a>
    </div>
    <div id="instagram-feed"></div>
    </div>
    <style>.insta-btn a{background:linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);color:#fff;padding:8px 13px;border-radius:4px}.instagram_gallery a img{width:100%}@media (min-width:992px){.insta-wrapper{display:block;overflow:hidden;position:relative}.instagram_gallery a{width:20%;display:block;float:left;opacity:.7;transition:.3s}.instagram_gallery a:hover{opacity:1}.insta-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}}@media (max-width:991px){.instagram_gallery a{width:33.33%;display:block;float:left}.insta-btn{text-align:center;padding:1rem 0}.insta-wrapper{display:block;position:relative;margin-top:2rem}}</style>
    <script>
    !function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.InstagramFeed=t()}(this,function(){var t={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},_={150:0,240:1,320:2,480:3,640:4},m={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};return function(e){this.options=Object.assign({},t),this.options=Object.assign(this.options,e),this.is_tag=""==this.options.username,this.valid=!0,""==this.options.username&&""==this.options.tag?(console.error("InstagramFeed: Error, no username or tag defined."),this.valid=!1):this.options.get_data||""!=this.options.container?this.options.get_data&&"function"!=typeof this.options.callback&&(console.error("InstagramFeed: Error, invalid or undefined callback for get_data"),this.valid=!1):(console.error("InstagramFeed: Error, no container found."),this.valid=!1),this.get=function(i){var s=this.is_tag?this.options.host+"explore/tags/"+this.options.tag:this.options.host+this.options.username,a=new XMLHttpRequest,o=this;a.onload=function(e){var t;4===a.readyState&&(200===a.status?(t=a.responseText.split("window._sharedData = ")[1].split("<\/script>")[0],null===(t=(t=JSON.parse(t.substr(0,t.length-1))).entry_data.ProfilePage||t.entry_data.TagPage||null)?(console.log(s),console.error("InstagramFeed: Request error. No data retrieved: "+a.statusText)):(t=t[0].graphql.user||t[0].graphql.hashtag,i(t,o))):console.error("InstagramFeed: Request error. Response: "+a.statusText))},a.open("GET",s,!0),a.send()},this.parse_caption=function(e,t){return void 0!==e.node.edge_media_to_caption.edges[0]&&0!=e.node.edge_media_to_caption.edges[0].node.text.length?e.node.edge_media_to_caption.edges[0].node.text:void 0!==e.node.title&&0!=e.node.title.length?e.node.title:void 0!==e.node.accessibility_caption&&0!=e.node.accessibility_caption.length?e.node.accessibility_caption:(this.is_tag?t.name:t.username)+" image "},this.display=function(e){var t,i;i=this.options.styling?(t=(100-2*this.options.margin*this.options.items_per_row)/this.options.items_per_row,{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='margin:"+this.options.margin+"% "+this.options.margin+"%;width:"+t+"%;float:left;'"}):{profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:""};var s="";if(this.options.display_profile&&(s+="<div class='instagram_profile'"+i.profile_container+">",s+="<img class='instagram_profile_image' src='"+e.profile_pic_url+"' alt='"+(this.is_tag?e.name+" tag pic":e.username+" profile pic")+" profile pic'"+i.profile_image+" />",this.is_tag?s+="<p class='instagram_tag'"+i.profile_name+"><a href='https://www.instagram.com/explore/tags/"+this.options.tag+"' rel='noopener' target='_blank'>#"+this.options.tag+"</a></p>":s+="<p class='instagram_username'"+i.profile_name+">@"+e.full_name+" (<a href='https://www.instagram.com/"+this.options.username+"' rel='noopener' target='_blank'>@"+this.options.username+"</a>)</p>",!this.is_tag&&this.options.display_biography&&(s+="<p class='instagram_biography'"+i.profile_biography+">"+e.biography+"</p>"),s+="</div>"),this.options.display_gallery){var a=void 0!==_[this.options.image_size]?_[this.options.image_size]:_[640];if(void 0!==e.is_private&&!0===e.is_private)s+="<p class='instagram_private'><strong>This profile is private</strong></p>";else{var o=(e.edge_owner_to_timeline_media||e.edge_hashtag_to_media).edges,n=o.length>this.options.items?this.options.items:o.length;s+="<div class='instagram_gallery'>";for(var r=0;r<n;r++){var l,p,g="https://www.instagram.com/p/"+o[r].node.shortcode,d=this.parse_caption(o[r],e).replace(/[&<>"'`=\/]/g,function(e){return m[e]});switch(o[r].node.__typename){case"GraphSidecar":p="sidecar",l=o[r].node.thumbnail_resources[a].src;break;case"GraphVideo":p="video",l=o[r].node.thumbnail_src;break;default:p="image",l=o[r].node.thumbnail_resources[a].src}this.is_tag&&(e.username=""),s+="<a href='"+g+"' class='instagram-"+p+"' title='"+d+"' rel='noopener' target='_blank'>",s+="<img src='"+l+"' alt='"+d+"'"+i.gallery_image+" />",s+="</a>"}s+="</div>"}}if(this.options.display_igtv&&void 0!==e.edge_felix_video_timeline){var h=e.edge_felix_video_timeline.edges,n=h.length>this.options.items?this.options.items:h.length;if(0<h.length){s+="<div class='instagram_igtv'>";for(r=0;r<n;r++){s+="<a href='"+(g="https://www.instagram.com/p/"+h[r].node.shortcode)+"' rel='noopener' title='"+(d=this.parse_caption(h[r],e))+"' target='_blank'>",s+="<img src='"+h[r].node.thumbnail_src+"' alt='"+d+"'"+i.gallery_image+" />",s+="</a>"}s+="</div>"}}this.options.container.innerHTML=s},this.run=function(){this.get(function(e,t){t.options.get_data?t.options.callback(e):t.display(e)})},this.valid&&this.run()}});
    </script>
    <script>
    (function(){ new InstagramFeed({
    'username': 'instagram',
    'container': document.getElementById("instagram-feed"),
    'display_profile': false,
    'display_biography': false,
    'display_gallery': true,
    'callback': true,
    'styling': false,
    'items': 5,
    'items_per_row': 5,
    'margin': 0
    });
    })();
    </script>

You must change the red text.

1. username: instagram to your username. 
2. #: Change it with the permalink of your instagram profile link. 


Join to BLOGGER™ Community - COMPROMATH. Ask Questions & Get Help

About me


Elliyas Ahmed
Elliyas Ahmed

Hi, I am Elliyas Ahmed, the founder of COMPROMATH. I try to share what I learn.

Work With Me - My Premium Services

Lets Start The Discussion on This Article

Put Your Valuable Comments

Welcome to comment section. Each comment is modereted. So don't try to spam.