Cara Menambahkan Widget Instagram di Blogger

Instagram merupakan salah satu platform media sosial berbasis gambar yang cukup rajin menghadirkan fitur-fitur baru, dari mulai fitur-fitur untuk feed maupun untuk stories-nya.

Cara Menambahkan Widget Instagram di Blogger

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 &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>

Pertama buka Blogger > Klik menu Tema dan klik tombol Edit HTML > Tambahkan kode CSS ini sebelum </head> atau &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>

Selanjutnya tambahkan kode ini sebelum </body> atau &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 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 = &#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>

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 http://instagram.pixelunion.net. Klik tombol Generate Access Token

Cara Menambahkan Widget Instagram di Blogger

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.

Cara Menambahkan Widget Instagram di Blogger

Selesai, lihat hasilnya di blog Anda.


Demikian tips dari Namina tentang Cara Menambahkan Widget Instagram di Blogger. Semoga bermanfaat.

Related Posts

Load comments

Comments