Georgia Lou Studios

Welcome to the Help Center!

Blogger Themes - New Instagram Widgets (March 2020)

Follow

Instagram recently changed their API causing many old Instagram scripts to break. If your Blogger.com theme Instagram widgets are no longer working, follow these directions to replace the old widget with new, working widgets.

This will also fix issues starting July 01, 2020. We rolled out this fix early to address the upcoming issues. Use this fix.

Step 1: Add Code

1. Log in to your Blogger.com dashboard. (Make sure you are in Classic Blogger mode, not the new beta dashboard.).

2. Click on the Layout link.

3. In any Footer widget area of your specific template, click on the Add a gadget link.

blogger-insta-1.png

4. Add an HTML/Javascript widget by clicking the blue + icon.

blogger-insta-2.png

5. The Configure HTML/JavaScript popup will open.

6. Do not give the widget a title.

7. In the Content area copy and paste ALL the code from the box directly below. Make sure you get all the code.

<style>
.playground .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground .result .post{position:relative;display:block;margin:0 0 10px;width:48.5%;overflow:hidden}.playground .result .post img{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding:0}.playground .result .post .meta{position:absolute;left:0;bottom:0;display:block;width:100%;height:100%;color:#fff;font-size:13px;text-decoration:none;background:rgba(255,255,255,.7);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:0;line-height:1.4}.playground .result .post:hover .meta{opacity:1}.playground .result .post .meta p{margin:0 0 20px;opacity:0;visibility:hidden;-webkit-transition:all .5s ease;transition:all .5s ease}.playground .result .post .meta .stats{position:absolute;width:90%;top:50%;text-align:center;color:#333;-webkit-transform:translate(0,-50%);transform:translate(-50%,-50%)}.playground .result .post .meta .stats i{margin:0 10px 0 0}.playground .result .post .meta .stats .likes{display:block;margin:0}.playground .result .post .meta .stats .comments{display:block;margin:0}.playground .result .post::after{display:block;padding-top:100%;content:''}.playground .result .post:hover .meta p{opacity:1;visibility:visible}.playground2 .result{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground2 .result .post{position:relative;display:block;margin:0;width:12.5%;overflow:hidden}.playground2 .result .post img{position:absolute;top:50%;left:0;width:100%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}.playground2 .result .post .meta{position:absolute;left:0;bottom:0;display:block;width:100%;height:100%;color:#fff;font-size:13px;text-decoration:none;background:rgba(255,255,255,.7);-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:0;line-height:1.4}.playground2 .result .post:hover .meta{opacity:1}.playground2 .result .post .meta p{margin:0 0 20px;opacity:0;visibility:hidden;-webkit-transition:all .5s ease;transition:all .5s ease}.playground2 .result .post .meta .stats{position:absolute;width:90%;top:50%;text-align:center;color:#333;-webkit-transform:translate(0,-50%);transform:translate(5%,-50%)}.playground2 .result .post .meta .stats i{margin:0 10px 0 0}.playground2 .result .post .meta .stats .likes{display:block;margin:0}.playground2 .result .post .meta .stats .comments{display:block;margin:0}.playground2 .result .post::after{display:block;padding-top:100%;content:''}.playground2 .result .post:hover .meta p{opacity:1;visibility:visible}@media only screen and (max-width:767px){#instafeed-footer .instathumb{flex-basis:25%}.playground .result .post{width:49%}.playground2 .result .post{width:25%}}
</style>
<script>
/*<![CDATA[*/
!function(e){e.fn.instastory=function(t){let s=this,n="",o=e.extend({get:"",type:"",imageSize:150,limit:6,link:!0,template:"",after:function(){}},t);if(!s.length)return console.group("Instastory.js log"),console.warn("The DOM element you tried to initiate the plugin on, does not exist"),console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/instastory.js"),console.groupEnd(),!1;if("string"==typeof t&&(o.get=t),""==o.get)return console.group("Instastory.js log"),console.warn("You failed to specify what you want"),console.log("For more info on how to use the plugin, please see: https://github.com/kasperlegarth/instastory.js"),console.groupEnd(),!1;const r=function(e){const t=o.imageSize;if("number"!=typeof t)return"raw"==t?e.display_url:e.thumbnail_resources[0].src;switch(t){case 150:return e.thumbnail_resources[0].src;case 240:return e.thumbnail_resources[1].src;case 320:return e.thumbnail_resources[2].src;case 480:return e.thumbnail_resources[3].src;case 640:return e.thumbnail_resources[4].src;default:return e.thumbnail_resources[0].src}},a=function(e){String.prototype.allReplace=function(e){let t=this;for(let s in e)t=t.replace(new RegExp(s,"g"),e[s]);return t};let t={"{{accessibility_caption}}":e.accessibility_caption,"{{caption}}":e.edge_media_to_caption.edges.length>0?e.edge_media_to_caption.edges[0].node.text:"","{{comments}}":e.edge_media_to_comment.count,"{{image}}":r(e),"{{likes}}":e.edge_liked_by.count,"{{link}}":"https://www.instagram.com/p/"+e.shortcode};return o.template.allReplace(t)};var i,c;(i=o.get).indexOf("@")>-1?(o.type="user",o.get=i.substring(i.indexOf("@")+1)):i.indexOf("#")>-1?(o.type="hashtag",o.get=i.substring(i.indexOf("#")+1)):(o.type="hashtag",o.get=i),c=o.type,n="user"==c?"https://www.instagram.com/"+o.get+"/?__a=1":"https://www.instagram.com/explore/tags/"+o.get+"/?__a=1",e.ajax({url:n,success:function(e){s.html(function(e){let t="",s={};switch(o.type){case"user":s=e.edge_owner_to_timeline_media;break;default:s=e.edge_hashtag_to_media}let n=s.edges;for(var i=0;i<o.limit;i++)if(void 0!==n[i]){let e=n[i].node,s="";""!=o.template?s=a(e):(s="<img src='"+r(e)+"' alt='"+e.accessibility_caption+"'>",o.link&&(s="<a href='https://www.instagram.com/p/"+e.shortcode+"'>"+s+"</a>")),t+=s}return t}(e.graphql[o.type])),o.after()}}).fail(function(e){switch(e.status){case 404:console.warn("The "+o.type+" do not exsists, please try another one");break;default:console.warn("An unknow error happend")}})}}(jQuery);
/*]]>*/
</script>

8. Click the Save button to save the widget.

 

Step 2: Add Instagram Widgets

Sidebar Widget

This widget is a 2 column grid widget and works best in sidebars.

1. On the Blogger.com dashboard, make sure you're in the Layout page.

2. In the sidebar widget area of your specific template, click on the Add a gadget link.

blogger-insta-3.png

4. Add an HTML/Javascript widget by clicking the blue + icon.

blogger-insta-2.png

5. The Configure HTML/JavaScript popup will open.

6. Give your widget a Title.

7. In the Content box, copy and paste the code from directly below.

<!-- Instagram Widget -->
<script type="text/javascript">
var tags=["div","a","button","article","section","strong","i","input","script"],attr=["class","src","href"];function highlight(t){t=(t=t.replace(new RegExp("<","g"),"&lt;")).replace(/"(.+?)"/g,'<span data-type="val">"$1"</span>');for(var a=0;a<tags.length;a++)t=(t=t.replace(new RegExp("&lt;"+tags[a],"g"),'&lt;<span data-type="tag">'+tags[a]+"</span>")).replace(new RegExp("&lt;/"+tags[a],"g"),'&lt;/<span data-type="tag">'+tags[a]+"</span>");for(a=0;a<attr.length;a++)t=t.replace(new RegExp(attr[a],"g"),'<span data-type="attr">'+attr[a]+"</span>");return t=t.replace(/span>>(.*)&lt;/,'span>><span data-type="plain">$1</span>&lt;')}$(document).ready(function(){$(".highlight-me").each(function(){$(this).html(highlight($(this).html()))}),$("#demo1").instastory("#coding");
let t={
get:"@instagram",
imageSize:320,
limit:6,
link:!0,
template:'<div class="post"><a target="_blank" href="{{link}}"><img src="{{image}}" alt="{{accessibility_caption}}"><span class="meta"><span class="stats"><span class="likes"><i class="fa fa-heart"></i>{{likes}}</span><span class="comments"><i class="fa fa-comment"></i>{{comments}}</span></span></a></div>'};$("#playground-result").instastory(t),setTimeout(function(){$("#playground-result .post").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>350&&(a=t.substring(0,347)+"..."),$(this).find(".meta p").text(a)})},2e3),$("#new-feed").click(function(){let a=$("#hashtag-input").val(),e=$("#limit-input").val();""!==a&&(t.get=a),""!==e&&(t.limit=e),$("#playground-result").instastory(t),setTimeout(function(){$("#playground-result .post").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>390&&(a=t.substring(0,387)+"..."),$(this).find(".meta p").text(a)})},2e3)})});
</script>
<div class="playground"><div id="playground-result" class="result"></div></div>

8. To set your Instagram profile, replace the @instagram handle with your Instagram handle. For example: @georgialoustudios. Don't edit anything around the handle, however.

9. To change the number of images in the widget, you can change limit:6, to the number of your choice. Even numbers will look best. Don't disturb the comma or other surrounding code, just change the number.

10. Click the Save button to save your widget.

 

Footer Widget

This widget is an 8 column grid widget and works best in footer or other full width areas.

1. On the Blogger.com dashboard, make sure you're in the Layout page.

2. In the full width footer widget area of your specific template, click on the Add a gadget link.

blogger-insta-4.png

4. Add an HTML/Javascript widget by clicking the blue + icon.

blogger-insta-2.png

5. The Configure HTML/JavaScript popup will open.

6. Give your widget a Title.

7. In the Content box, copy and paste the code from directly below.

<!-- Instagram Footer Widget -->
<script type="text/javascript">
var tags=["div","a","button","article","section","strong","i","input","script"],attr=["class","src","href"];function highlight(t){t=(t=t.replace(new RegExp("<","g"),"&lt;")).replace(/"(.+?)"/g,'<span data-type="val">"$1"</span>');for(var a=0;a<tags.length;a++)t=(t=t.replace(new RegExp("&lt;"+tags[a],"g"),'&lt;<span data-type="tag">'+tags[a]+"</span>")).replace(new RegExp("&lt;/"+tags[a],"g"),'&lt;/<span data-type="tag">'+tags[a]+"</span>");for(a=0;a<attr.length;a++)t=t.replace(new RegExp(attr[a],"g"),'<span data-type="attr">'+attr[a]+"</span>");return t=t.replace(/span>>(.*)&lt;/,'span>><span data-type="plain">$1</span>&lt;')}$(document).ready(function(){$(".highlight-me").each(function(){$(this).html(highlight($(this).html()))}),$("#demo1").instastory("#coding");
let t={
get:"@instagram",
imageSize:480,
limit:8,
link:!0,
template:'<div class="post"><a target="_blank" href="{{link}}"><img src="{{image}}" alt="{{accessibility_caption}}"><span class="meta"><span class="stats"><span class="likes"><i class="fa fa-heart"></i>{{likes}}</span><span class="comments"><i class="fa fa-comment"></i>{{comments}}</span></span></a></div>'};$("#playground2-result").instastory(t),setTimeout(function(){$("#playground2-result .post").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>350&&(a=t.substring(0,347)+"..."),$(this).find(".meta p").text(a)})},2e3),$("#new-feed").click(function(){let a=$("#hashtag-input").val(),e=$("#limit-input").val();""!==a&&(t.get=a),""!==e&&(t.limit=e),$("#playground2-result").instastory(t),setTimeout(function(){$("#playground2-result .post").each(function(){let t=$(this).find(".meta p").text(),a=t;t.length>390&&(a=t.substring(0,387)+"..."),$(this).find(".meta p").text(a)})},2e3)})});
</script>
<div class="playground2"><div id="playground2-result" class="result"></div></div>

8. To set your Instagram profile, replace the @instagram handle with your Instagram handle. For example: @georgialoustudios. Don't edit anything around the handle, however.

9. To change the number of images in the widget, you can change limit:8, to the number of your choice. Even numbers will look best. Don't disturb the comma or other surrounding code, just change the number.

10. Click the Save button to save your widget.

Powered by Zendesk