Cara Menambahkan Widget Instagram Di Blogger
12 Mar 2019
Kini Instagram telah mempunyai pengguna aktif lebih dari 1 miliar di dunia sehingga popularitasnya bisa mengalahkan media umum yang sudah hadir duluan di dunia, ibarat Twitter dan media umum lainnya.
Sebagai media umum paling terkenal dikala ini ada kalanya bagi orang yang mengikuti blog Anda ingin mengetahui postingan-postingan terbaru dari Instagram Anda tanpa perlu login ke Instagram. Yaitu dengan Cara Menambahkan Widget Instagram di Blogger Anda yang akan mempermudah pengikut blog untuk mengetahui postingan terbaru dari Instagram lewat situs Anda. Bagi yang ingin tau silakan ikuti tips berikut ini.
Cara Menambahkan Widget Instagram di Blogger
Sebelum menambahkan widget ini, pastikan di blog Anda sudah terpasang Fontawesome. Jika belum, tambahkan instruksi ini sebelum </head> atau </head><!--<head/>-->
<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>Pertama buka Blogger > Klik hidangan Tema dan klik tombol Edit HTML > Tambahkan instruksi CSS ini sebelum </head> atau </head><!--<head/>-->
<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:"";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:"\f08a";font-family:Fontawesome;margin-right:5px} .il-photo__comments:before{content:"\f0e5";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>Selanjutnya tambahkan instruksi ini sebelum </body> atau <!--</body>--></body>
<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=" merupakan salah satu platform media umum berbasis gambar yang cukup rajin menghadirkan Cara Menambahkan Widget Instagram di Blogger " 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 dimanapun di dalam tag <body> dan </body>, misalnya dalam blog demo saya tambahkan 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'>1456802197.1677ed0.6b8580776ddf4d4486b8259d82998273c</b:widget-setting> </b:widget-settings> <b:includable id='main'> <div class='widget-content'> <script type='text/javascript'> var instaCode = '<data:content/>' ; </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 == "hide"'> <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>Ganti pada instruksi yang ditandai dengan saluran token akun Instagram Anda. Kemudian klik Simpan tema.
Cara Mendapatkan Akses Token Akun Instagram
Untuk mendapat instruksi saluran token Instagram Anda pastikan di browser sudah login ke Facebook dan sudah mengakses situs Instagram. Jika sudah, silakan kunjungi situs ini http://instagram.pixelunion.net. Klik tombol Generate Access Token
Setelah mengaktifkan VPN, klik kembali tombol Generate Access Token lalu salin instruksi yang Anda dapatkan dan ganti instruksi token yang tadi saya tandai di atas atau juga bisa lewat Tata letak widget Instagram dengan instruksi saluran token Instagram Anda.
Untuk Demo nya Lihat pada Footer Blog ini di bwah
Demikian tips dari Saya perihal Cara Menambahkan Widget Instagram di Blogger. Semoga bermanfaat.