Cara Menambah Widget Instagram di Blogger Update (2019) - Instagram adalah platform media sosial berbasis gambar yang rajin menyajikan fitur-fitur baru, mulai dari fitur feed dan cerita. Kini Instagram memiliki lebih dari 1 miliar pengguna aktif di dunia sehingga popularitasnya mampu mengalahkan media sosial yang sudah ada, seperti Twitter dan media sosial lainnya.

Sebagai media sosial paling populer, ada kalanya orang yang mengikuti blog Anda ingin mengetahui postingan terbaru dari Instagram Anda tanpa harus masuk ke Instagram. Yaitu dengan menambahkan widget Instagram di Blogger. Itu akan memudahkan para pengikut blog untuk mengetahui posting terbaru dari Instagram melalui situs Anda. Bagi yang penasaran dengan caranya, silahkan ikuti tips berikut ini.

Sebelum menambahkan widget ini, pastikan bahwa blog Anda telah menginstal FontAwesome. Jika sudah, Lalu tambahkan kode ini sebelum </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

<script type='text/javascript'>//<![CDATA[//CSS Readyfunction 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>

Pertama buka Blogger > Klik Menu “Tema” dan klik tombol “Edit HTML” > Tambahkan kode CSS dibawah ini sebelumnya </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>


Kemudian tambahkan kode dibawah ini sebelum </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>

Kemudian tambahkan markup widget ini di mana saja di antara tag <body> dan </ body> ,misalnya dalam demo blog saya menambahkannya sebelum 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>

Ubah kode yang ditandai dengan mengakses token akun Instagram Anda. Kemudian klik Simpan tema.

Cara Mendapatkan Akses ke Token Akun Instagram.

Untuk mendapatkan kode akses token Instagram Anda, pastikan browser telah masuk ke Facebook dan telah mengakses situs Instagram. Jika demikian, silakan kunjungi situs ini http://instagram.pixelunion.net. Klik tombol “Hasilkan Token Akses


Jika setelah tombol klik “Hasilkan Token Akses” dan halaman berikutnya tidak muncul, maka Anda harus mengaktifkan VPN di browser Anda.

Setelah mengaktifkan VPN, klik tombol kembali. Hasilkan Token Akses dan salin kode yang Anda dapatkan dan ganti kode token yang telah saya tandai di atas atau juga melalui tata letak widget Instagram dengan kode akses token Instagram Anda.


Selesai, lihat hasilnya di blog Anda.