Cara Memasang Widget Instagram di Blog

Jika kamu adalah orang yang ingin membuat blog dengan niche Desain atau Photografi, blogger memang pilihan yang tepat. Karena banyak template yang tersdia gratis serta banyak jenis juga untuk promosi desain atau hasil jepretan kamu di google.

Tapi kamu pernah sempat berfikir juga kan, kalau ingin menampilkan juga gambar kamu yang ada di instagram di blogger kamu kan? Nah pada kesempatan kali ini saya mau coba berbagi cara untuk memasang widget instagram di blog. Gunanya apa? Selain untuk menampilkan gambar instagram kamu, kamu juga bisa menambah folower dari blogger kalau blogger kamu banyak pengunjungnya.

Ada beberapa langkah yang harus kamu lakukan, jika kamu berminat ikutilah langkah-langkah dibawah ini ya.
Langkah pertama kamu harus login terlebih dahulu ke Blogger
Langkah kedua kamu masuk ke menu Tata Letak lalu buat Widget baru HTML/Javascript
Langkah ketiga salin kode dibawah untuk di masukkan ke widget tadi.

<div class='media-left'>
<div class='table-cell-m'>
  <h4 class='widget-title'>Instagram</h4>
    <a class='btn btn-default' href='//instagram.com/gilang__R__' rel='me'>Follow Us</a>

  </div>
</div>

<div class='instagram-footer'>
<div class='dark-wrapper'>
 
           
      <div class='cf'/>    
      <ul id='instafeed' class='insta-slick'>   
</ul>   
</div> 

<script type='text/javascript'>//<![CDATA[   
   $(document).ready(function(){
var feed = new Instafeed({ 
 get: 'user',   
 userId: 3818481741,   
  limit:14,   
  sortBy:'random',  
  accessToken: '3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145',
   after: function () {

     var owl = $('.insta-slick');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 300,
prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>',
 nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>',
  arrows:true,
  slidesToShow: 5,
  slidesToScroll: 2,
autoplay: false,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  
  
   template: '<li><a href="{{link}}" target="_blank"><div class="zoom-out-effect left"><div class="img-box"><img src="{{image}}" /></div> <div class="info-box"><div class="info-content"><div class="insta-likes"><i class="fa fa-heart"></i>{{likes}}</div> <div class="insta-com"><i class="fa fa-comment-o"></i>{{comments}}</div>   </div></div></div></a></li>',   
 resolution: 'standard_resolution'   
 });   
 feed.run();   

 });
//]]>   
</script></div></div>

Langkah keempat kamu butuh akses token untuk menampilkan gambar yang ada di instagram tersebut, silahkan klik tombol Generate Instagram Access Token dibawah, tenang saja meskipun kamu memberi akses tersebut, IG kamu akan tetap aman, karena aplikasi tersebut adalah aplikasi dari Instagram sendiri.

Generate Instagram Access Token
Setelah mendapatkan akses tokennya, silahkan ganti kode akses token diatas dengan akses token yang kamu dapat tadi. Simpan token 3818481741.1677ed0.14b2e5f55b6842a2a898da10ef99c145 tepat di tulisan yang saya blok biru, nah untuk userId kamu gunakan nomor paling depan yang saya kasih warna merah.

Langkah terakhir Simpan kode tersebut, dan tempatkan di bagian footer, karena ini style untuk bagian footernya.

Nah saya ada beberapa style untuk kamu tempatkan di Sidebar, caranya sama seperti diatas ko.

Grid Style untuk Sidebar

<ul id='instaside'>   
</ul>   
<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',
target:'instaside',  
  userId: 15920822,   
  limit:9,
  sortBy:'random',  
 accessToken:'1531863919.1677ed0.0184dae01d2745a0be5ddea16e4fd8ef', 
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'   
 });   
 instaside.run();   

 });
//]]>   
</script>

Slider Style untuk Sidebar

<ul id='instaside'>   
</ul>   
<script type='text/javascript'>//<![CDATA[   
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',
target:'instaside',  
  userId: 381848181,   
  limit:9,
  sortBy:'random',  
 accessToken:'381848181.1677ed0.14b2e5f55b6842a2a898da10ef99cb54', 
 after: function () {
     
     var owl = $('#instaside');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 800,
 prevArrow: '<div class="slider-nav-prev"></div>',
 nextArrow: '<div class="slider-nav-next"></div>',
  arrows:true,
  slidesToShow: 1,
  slidesToScroll: 1,
 fade: true,
  cssEase: 'linear',
autoplay: true,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'
 });   
 instaside.run();   
 });
//]]>   
</script>

Untuk demo widget instagram di footer silahkan klik demo dibawah

Demo

Sekian tutorial Cara Memasang Widget Instagram di Blog, jika kamu memiliki pertanyaan silahkan berkomentar ya.