How to

How To Add An Instagram Widget In Blogger

Instagram is an image-based social media platform that is diligent in presenting new features, from the features for feeds and stories.

How To Add An Instagram Widget In Blogger

Now Instagram has more than 1 billion active users in the world so that its popularity is able to beat social media that is already present in the world, such as Twitter and other social media.

As the most popular social media, there are times when people who follow your blog want to know the latest posts from your Instagram without having to log in to Instagram. That is by adding an Instagram widget in your Blogger that will make it easier for blog followers to find out the latest posts from Instagram through your site. For those who are curious, please follow the following tips.

Before adding this widget, make sure that your blog has Fontawesome installed. If not, add this code before </head> or &lt;/head&gt;&lt;!–<head/>–&gt;


<script type='text/javascript'>
//<![CDATA[

//CSS Ready

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

//]]>

</script>
First open Blogger > Click the Theme menu and click the Edit HTML button > Add this CSS code before </head>or&lt;/head&gt;&lt;!--<head/>--&gt;
<style type='text/css'>
/* Instagram Widget */
.instagram-widget{height:100%;background:#ccc;overflow:hidden;min-height:250px;transition:all .3s ease}
.instagram-widget .widget{margin-bottom:0!important}
#insta .title{background:#4776e6;padding:20px;text-align:center;color:#fff;font-size:18px;display:inline-block;position:absolute;border-radius:20pc;top:100px;left:43%;z-index:1}
.instagram-logo{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;text-align:center;color:#fff;left:50%;position:absolute;margin-left:-26px;z-index:1;font-size:30px;margin-top:100px;background:#fff;background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);box-shadow:0 5px 15px rgba(0,0,0,0.15)}
body.boxed-layout .instagram-logo{margin-top:72px}
ul.il-instagram-lite{padding:0;margin:0}
li.il-item{float:left;list-style:none;padding:0;width:16.6666666%;height:250px;overflow:hidden;position:relative;font-size:14px}
body.boxed-layout li.il-item{height:200px}
body.boxed-layout .instagram-widget{min-height:200px}
li.il-item:before{content:&quot;&quot;;font-family:Fontawesome;display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.1)}
li.il-item img{height:100%;width:100%;overflow:hidden;object-fit:cover;transition:all .3s ease}
.il-photo__meta{position:absolute;bottom:-65px;text-align:center;left:0;right:0;padding:20px;transition:all .3s ease;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.34),rgba(0,0,0,0.55),rgba(0,0,0,0.68))}
.il-photo__likes{width:43%;color:#fff;float:left;text-align:right}
.il-photo__comments{width:43%;color:#fff;float:right;text-align:left}
li.il-item:hover .il-photo__meta{bottom:0;transition:all .3s ease}
.il-photo__meta a{color:#fff}
.il-photo__likes:before{content:&quot;f08a&quot;;font-family:Fontawesome;margin-right:5px}
.il-photo__comments:before{content:&quot;f0e5&quot;;font-family:Fontawesome;margin-right:5px}
@media screen and (max-width: 768px) {
li.il-item{float:left;list-style:none;padding:0;width:50%;height:150px}
.instagram-widget{background:#fff;overflow:hidden;height:100%}
.instagram-logo{margin-top:200px}}
</style>

Then add this code before </body>or&lt;!--</body>--&gt;&lt;/body&gt;
<script type='text/javascript'>
//<![CDATA[

// Instagram Widget

!function(t){t.fn.instagramLite=function(e){if(!this.length)return this;plugin=this,plugin.defaults={accessToken:null,limit:null,list:!0,videos:!1,urls:!1,captions:!1,date:!1,likes:!1,comments_count:!1,error:function(){},success:function(){}};var i=t.extend({},plugin.defaults,e),s=t(this),a=function(t){for(var e=t.split(" "),i="",s=0;s<e.length;s++){var a;if("@"==e[s][0])a='<a href="http://twitter.com/'+e[s].replace("@","").toLowerCase()+'" target="_blank">'+e[s]+"</a>";else if("#"==e[s][0]){a='<a href="http://twitter.com/hashtag/'+e[s].replace("#","").toLowerCase()+'" target="_blank">'+e[s]+"</a>"}else a=e[s];i+=a+" "}return i};!function(){if(i.accessToken){var e="https://api.instagram.com/v1/users/self/media/recent/?access_token="+i.accessToken+"&count="+i.limit;t.ajax({type:"GET",url:e,dataType:"jsonp",success:function(t){200===t.meta.code&&t.data.length?(function(t){for(var e=0;e<t.length;e++){var o,n,l=t[e];if("image"===l.type||!i.videos){if(o='<img class="il-photo__img" src="'+l.images.standard_resolution.url+'" alt="Instagram Image" data-filter="'+l.filter+'" />',i.urls&&(o='<a href="'+l.link+'" target="_blank">'+o+"</a>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+='<a href="'+l.link+'" target="_blank"><div class="il-photo__meta">'),i.captions&&l.caption&&(o+='<div class="il-photo__caption" data-caption-id="'+l.caption.id+'">'+a(l.caption.text)+"</div></a>"),i.date){var r=new Date(1e3*l.created_time),c=r.getDate(),d=r.getMonth()+1,u=r.getFullYear();r.getHours(),r.getMinutes(),r.getSeconds(),o+='<div class="il-photo__date">'+(r=d+"/"+c+"/"+u)+"</div>"}i.likes&&(o+='<div class="il-photo__likes">'+l.likes.count+"</div>"),i.comments_count&&l.comments&&(o+='<div class="il-photo__comments">'+l.comments.count+"</div>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+="</div>")}"video"===l.type&&i.videos&&l.videos&&(l.videos.standard_resolution?n=l.videos.standard_resolution.url:l.videos.low_resolution?n=l.videos.low_resolution.url:l.videos.low_bandwidth&&(n=l.videos.low_bandwidth.url),o='<video poster="'+l.images.standard_resolution.url+'" controls>',o+='<source src="'+n+'" type="video/mp4;"></source>',o+="</video>"),i.list&&o&&(o='<li class="il-item" data-instagram-id="'+l.id+'">'+o+"</li>"),""!==o&&s.append(o)}}(t.data),i.success.call(this)):i.error.call(this)},error:function(){i.error.call(this)}})}}()}}(jQuery);

// Activate Instagram

$(function(){$(".il-instagram-lite").instagramLite({accessToken:instaCode,urls:!0,limit:6,captions:!1,likes:!0,comments_count:!0,success:function(){console.log("The request was successful!")},error:function(e,s){console.log("There was an error with the request")}})});

//]]>

</script>

Then add this widget markup anywhere inside the tag <body>and </body>, for example in the blog demo I added it before the footer
<div class='instagram-widget'>
<b:section class='insta' id='insta' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML120' locked='true' title='Instagram Widget' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>8306057439.1677ed0.57fd28e607fd45ea8d4c72096772412c</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<script type='text/javascript'>
var instaCode = &#39;<data:content/>&#39; ;

</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML121' locked='true' title='hide Instagram Widget' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'/>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:content == &quot;hide&quot;'>
<style>
.instagram-widget {

display: none;

}

</style>
</b:if>
</b:includable>
</b:widget>
</b:section>
<ul class='il-instagram-lite'/>
<span class='instagram-logo'>
<i aria-hidden='true' class='fa fa-instagram'/>
</span>
</div>

Change the code marked by accessing your Instagram account token. Then click Save theme.

How to Get Access to Instagram Account Tokens


To get your Instagram token access code, make sure the browser has logged in to Facebook and has accessed the Instagram site. If so, please visit this site http://instagram.pixelunion.netClick the Generate Access Token button

If after a button click Generate Access Token next page does not appear, then you must enable the VPN in your browser. For how in this article How To Open Blocked Sites with Psiphon3 . 

After enabling VPN, click the back button Generate Access Token and copy the code that you get and replace the token code that I had circled above or also via Instagram widget layout with your Instagram token access code.

Finish, see the results on your blog.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close