How to Add Instagram Widgets on Blogger


How to Add Instagram Widgets on Blogger


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

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

As the most popular social media right now there are times when people who follow your blog want to know the latest posts from your Instagram without having to log into Instagram. Namely with How to Add Instagram Widgets on Blogger. You 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.
How to Add an Instagram Widget on Blogger

Before adding this widget, make sure you have Fontawesome installed on your blog. 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>


Next 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 in the <body> and </body> tags , for example in the demo blog I add 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'>1456802197.1677ed0.6b8580776ddf4d4486b8259d82998273c</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 with access to your Instagram account token. Then click Save theme.

How to get Instagram account access tokens

To get your Instagram token access code, make sure the browser is logged in to Facebook and has accessed the Instagram site. If so, please visit this site http://instagram.pixelunion.net . Click the Generate Access Token button
If after clicking the Generate Access Token button the next page does not appear, then you must activate VPN in your browser. Get a Free Premium ExpressVP Account License Key here

After activating VPN , click the Generate Access Token button again then copy the code you got and replace the token code that I marked above or can also pass through the Instagram widget layout with your Instagram token access code.
Done, see the results on your blog.

For the demo, see the Blog Footer below

Those are my tips on How to Add Instagram Widgets on Blogger . May be useful
How to Add Instagram Widgets on Blogger How to Add Instagram Widgets on Blogger Reviewed by bloghint on December 11, 2019 Rating: 5

No comments:

Powered by Blogger.