[Tutorial] Cara Membuat dan Memasang Tombol Feed Instagram Di Blog

Untuk tutorial yang akan kami berikan kali ini adalah, membuat instagram feed. Tombol feed instagram ini bisa sobat pasang di blog maupun di website.

Mungkin tutorial ini tergolong sangat mudah untuk para mastah-mastah koding. Namun bagi saya ini lumayan rumit, kenapa rumit? Karena saya sendiri seorang pemula (newbie), jadi ya begitulah..

Siapa sih yang tidak tahu dengan sosial media yang sangat terkenal di seluruh dunia ini. Hampir semua kalangan memilih untuk memasang istagram di ponsel mereka. Banyak juga kegunaan nya, bukan hanya untuk sekedar sharing, posting, akan tetapi bisa untuk beriklan dan lain sebagai nya.

Live Demo
Oke mungkin kita langsung saja masuk ke tahap cara membuatnya.

Cara Membuat dan Memasang Tombol Feed Instagram di Blog

Untuk pemasangan di blog sobat, sobat langsung saja ke menu tema lalu, klik edit html. Setelah itu sobat copas css berikut ini:

@import url('https://www.seotutorial.eu.org/fontme/fontme.css');

body {
  font-family: 'Inter', sans-serif;
  justify-content: center;
  align-items: center;
  background: #000;
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.button {
  transition: all .2s ease-in-out;
  -webkit-appearance: none;
  letter-spacing: -0.5px;
  text-decoration: none;
  border-radius: 100px;
  font-family: inherit;
  align-items: center;
  position: relative;
  padding: 18px 42px;
  font-weight: 500;
  text-align: left;
  background: #06f;
  appearance: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  outline: none;
  border: none;
  color: #fff;
}

.button-icon {
  margin-right: 16px;
  height: 30px;
  width: 30px;
  top: 0;
}

.button-text {
  flex-direction: column;
  font-size: 16px;
  display: flex;
}

.button-numbers {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.6;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button:before {
  animation: pulse 2s ease infinite;
  border-radius: 100px;
  position: absolute;
  background: #06f;
  content: "";
  z-index: -1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { opacity: 0.2; }
  100% { transform: scale(1.2, 1.4); opacity: 0; }
}

.background {
  pointer-events: none;
  overflow: hidden;
  position: fixed;
  height: 100vh;
  opacity: 0.2;
  border: none;
  z-index: -1;
  width: 100%;
  left: 0;
  top: 0;
}

Jika sudah, sobat copas lagi html di bawah ini dan letakan di mana saja (bebas, sesuai keinginan masing-masing).

<a href="https://www.instagram.com/virm90" target="_blank" class="button">
  <img class="button-icon" src="https://tr.af/images/icon-insta.svg" alt="instagram">
  <span class="button-text">
    @virm90
    <span class="button-numbers">
      <span id="button-count"></span>
      followers
    </span> 
  </span>
</a>

Sudah? Lanjut ke langkah terakhir yaitu, copas kode javascript berikut:

$(function(){
  $.get('https://api.instagram.com/v1/users/self/?access_token=27019167.1677ed0.27958a214ce141dfaaf18ddb103e33e7',
        function(data) {
    $("#button-count").html((kFormatter(data.data.counts.followed_by)));
  }
       )
  function kFormatter(num) {
    return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
  }

});

Nah silahkan langsung saja sobat simpan dan lihat hasil nya seperti apa.

Mungkin saya rasa cukup sekian saja untuk postingan kami pada hari ini, semoga bermanfaat untuk sobat semua. Apabila menurut sobat tutorial ini berguna, silahkan di share ke teman-teman lain nya.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini