Cara Menambahkan Widget Instagram di Blogger
Snippet Tips Blogger Widget
Kini Instagram telah memiliki pengguna aktif lebih dari 1 miliar di dunia sehingga popularitasnya mampu mengalahkan media sosial yang sudah hadir duluan di dunia, seperti Twitter dan media sosial lainnya.
Sebagai media sosial paling populer saat 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 penasaran 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 kode 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 menu Tema dan klik tombol Edit HTML > Tambahkan kode 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 kode 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="https://twitter.com/'+e[s].replace("@","").toLowerCase()+'" target="_blank">'+e[s]+"</a>";else if("#"==e[s][0]){a='<a href="https://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 dimanapun di dalam tag <body> dan </body>, contohnya 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'>8306057439.1677ed0.57fd28e607fd45ea8d4c72096772412c</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 kode yang ditandai dengan akses token akun Instagram Anda. Kemudian klik Simpan tema.
Cara Mendapatkan Akses Token Akun Instagram
Untuk mendapatkan kode akses token Instagram Anda pastikan di browser sudah login ke Facebook dan sudah mengakses situs Instagram. Jika sudah, silakan kunjungi situs ini https://jetseotools.com/instagram-access-token/. Klik tombol Generate Instagram Access Token
Jika setelah klik tombol Generate Access Token halaman berikutnya tidak muncul, maka Anda harus mengaktifkan VPN di browser Anda. Untuk caranya ada di artikel ini Cara Membuka Situs yang Diblokir dengan Ultrasurf.
Setelah mengaktifkan VPN, klik kembali tombol Generate Access Token kemudian salin kode yang Anda dapatkan dan ganti kode token yang tadi saya tandai di atas atau juga bisa lewat Tata letak widget Instagram dengan kode akses token Instagram Anda.
Selesai, lihat hasilnya di blog Anda.
Demikian tips dari Namina tentang Cara Menambahkan Widget Instagram di Blogger. Semoga bermanfaat.