Instagram Widget Update

1.3.20

Request the updated theme

If you want to receive the updated version of the theme, you can contact me directly on simplythestudio@gmail.com with the name of the theme you're using and your order number (it's in the email you received after you bought the template) — and I'll send you the newest version of the theme as soon as possible.


Request the widget update

If you don't want to set up the theme again, you can request to get the widget updated — by adding me as a contributor to your blog. Add my email simplythestudio@gmail.com to your blog and send me an email with your order number (it's in the email you received after you bought the theme) and your Instagram username. I'll accept your invitation and update the widget as soon as possible.


Update the widget yourself

If you don't want to wait and you feel confident about updating the widget yourself, you can easily do so — and follow this short tutorial.
Before you make and changes in the HTML code, always back-up your theme — go to "Theme", click on "Backup/Restore" and download your template.

  1. Open your Blogger Dashboard and from the left menu select "Theme".
  2. Click on "Customise".
  3. From the left menu select "Advanced", scroll to the bottom and select "Add CSS".
  4. Copy and paste the following code:

    #HTML99 {
    width: 100%;
    height: auto;
    padding: 0;}

    .instagram_gallery img {
    display: block !important;
    position: relative !important;}

    .instagram_gallery > a:hover {
    opacity: 0.7;}

    @media screen and (max-width: 750px) {
    .instagram_gallery img {width: 33.33% !important;}}

  5. Save by clicking on "Apply to Blog" and then click on "Back to Blogger".
  6. Click on the arrow in the orange button, then select "Edit HTML".
  7. Click inside the code, press CTRL + F (or CMD + F on Mac) to open a search window a search for "</head>".
  8. Paste the following code above the "</head>".

    <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>


  9. From the left menu click on "Layout".
  10. Find the "Footer"/"Instagram" section and locate the Instagram widget.
  11. Replace the content with this code:

    <script>
    (function($){
    $(window).on('load', function(){
    $.instagramFeed({
    'username': '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>

  12. Replace USERNAME with your Instagram username. Do not delete the quotation marks and do not add the "@" symbol.
  13. Save the widget!


If you have any problems while following this tutorial, you can contact me here.

Post a comment

Contact form

Name

Email *

Message *

Simply The Studio.