Cara Memasang Widget Galeri Foto Instagram di Blog

Instagram merupakan media sosial yang sangat menarik di sini Anda dapat membagikan foto, video dan story Anda sehingga instagram menjadi sosial media yang paling banyak diminati di beberapa tahun belakangan ini.

Banyak fitur-fitur baru dari Instagram yang sangat menarik, sehingga membuat penggunanya lebih merasa nyaman dan asik ketika menggunakan sosial media yang satu ini.

Sebagai seorang blogger saya menemukan satu hal yang menarik yaitu sekarang kita dapat menambahkan widget galeri foto ke blogger.

Dengan begitu kita bisa menampilkan foto-foto yang ada di instagram ke blog atau website Anda.

Apabila website atau blog kita memiliki trafik yang cukup banyak tentu hal ini bisa menambah jumlah followers instagram Anda.

Apalagi jika foto atau video yang Anda bagikan sangat berkaitan dengan website atau blog milik Anda, ini akan menjadi nilai positif untuk blog dan akun instagram Anda.

Baca juga: 4 Cara Menghapus Akun Instagram Permanen dan Sementara

Selain untuk menambah jumlah followers, dengan memasang widget instagram ini di blog Anda juga bisa menambah jumlah like pada foto Anda atau jumlah views pada video yang Anda bagikan di instagram.

Jika Anda tertarik ingin menampilkan foto-foto dan video Anda yang ada di instagram ke blog atau website silahkan ikuti langkah-langkahnya di bawah ini.

Cara Memasang Widget Instagram di Blog

Sebelum memasang widget instagram di blog, pastikan blog Anda sudah menggunakan fitur Font Awesome. Jika belum, silahkan tambahkan kode ini di atas kode </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>

Apabila blog Anda sudah menggunakan Font Awesome sebelumnya maka Anda bisa langsung ke tahap selanjutnya.

1. Masuk ke Blogger
2. Lalu klik Tema > Edit HTML
3. Tambahkan kode css ini, lalu simpan di atas kode </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:&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>

4. Kemudian tambahkan kode javascript ini di atas kode </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="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>

5. Lalu tambahkan kode markup ini dan simpan dibagian tag <body> sampai </body> Anda bisa menambahkannnya di atas kode footer atau di bawah kode 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'>6285364919.1677ed0.45cfb2a51eb94c0bae00b42fe30fffff</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>

6. Silahkan ganti kode akses token di atas dengan menggunakan kode milik Anda
7. Jika sudah klik Simpan tema

Cara Menadapatkan Akses Token Akun Instagram

Untuk menadapatkan kode akses token akun Instagram, silahkan login ke Facebook dan Instagram pada browser yang Anda gunakan.

Setelah itu buka situs berikut ini:

http://instagram.pixelunion.net/

Kemudian klik Generate Access Token

Jika muncul pesan seperti gambar di bawah ini, silahkan klik Authorize.

Silahkan salin kode token milik Anda dan gunakan untuk mambahkan widget instagram di blog Anda.

Kesimpulan

Sekarang Anda bisa menampilkan foto maupun video yang Anda posting di instagram ke dalam blog atau website Anda dengan menggunakan cara ini.

Menambahkan atau memasang widget instagram di blog bisa menambah jumlah followers dan like pada akun instagram Anda.

Itulah artikel mengenai cara memasang widget galeri foto instagram di blog, selamat mencoba. Semoga bermanfaat.

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini