Beranda
Blogger

Cara Terbaru Menampilkan Feed Instagram di Blogger

tutorial lengkap cara menampilkan feed Instagram di Blogger dengan menggunakan RSS Feed Instagram. Semoga dengan tutorial ini, tampilan blog kamu jadi
Cara Terbaru Menampilkan Feed Instagram di Blogger

Mungkin sebagian dari kalian udah pada tahu kalau feed Instagram itu bisa jadi nilai plus buat blog atau website. Bayangin aja, setiap update foto atau video keren di Instagram bisa langsung muncul di blog, bikin pengunjung makin betah berlama-lama di situs kamu. Di WordPress, biasanya ada plugin-plugin khusus yang membantu hal ini. Tapi gimana kalau blog kamu pakai Blogger? Tenang, meskipun Blogger nggak secanggih WordPress dalam hal plugin, kamu tetap bisa menampilkan feed Instagram dengan beberapa langkah sederhana.

Metodenya pakai URL RSS Feed Instagram. Caranya juga nggak sulit, cukup salin beberapa kode dan tempel di tempat yang tepat di Blogger. Di tutorial ini, saya juga akan share sedikit tips biar tampilannya makin kece. Tapi sebelum itu, pastikan kamu sudah punya URL RSS Feed Instagram kamu, ya. Kalau belum, bisa cek artikel saya sebelumnya untuk tahu cara mendapatkannya.

Daftar Isi

Kenapa Harus Menampilkan Feed Instagram?

Sebelum kita masuk ke langkah-langkah teknisnya, ada baiknya kita bahas dulu manfaat dan kenapa sih kita perlu menampilkan feed Instagram di blog:

  1. Menambah Daya Tarik Visual
    Foto dan video Instagram punya daya tarik visual yang tinggi. Dengan menampilkan feed langsung dari Instagram, blog kamu jadi terlihat lebih hidup dan menarik. Pengunjung bisa melihat update terbaru kamu tanpa harus keluar dari blog.

  2. Meningkatkan Interaksi Pengunjung
    Ketika feed Instagram sudah terintegrasi, pengunjung bisa klik langsung untuk melihat akun Instagram kamu. Siapa tahu, mereka jadi follow dan makin sering berkunjung ke blog kamu karena tertarik dengan konten visualnya.

  3. Konten Selalu Terupdate
    Jika kamu aktif di Instagram, feed yang muncul di blog otomatis akan menampilkan postingan terbaru. Jadi, blog kamu juga terlihat selalu up-to-date, tanpa kamu harus repot-repot mengubah manual setiap kali update.

  4. Solusi Simpel Tanpa Ribet API Resmi
    Dibandingkan harus mendaftar API resmi Instagram yang kadang bikin pusing, metode RSS Feed ini lebih simpel dan cepat. Cukup salin dan tempel beberapa kode, dan voila! Feed Instagram kamu langsung muncul di blog.

Langkah-Langkah Menampilkan Feed Instagram di Blogger

Sekarang, mari kita langsung ke langkah-langkahnya. Saya akan jelaskan secara rinci supaya kalian nggak bingung. Jangan lupa untuk ikuti tiap langkah dan pastikan semua kode tertempel dengan benar di tempatnya, ya!

Langkah 1: Masuk ke Dasbor Blogger

  1. Login ke Akun Blogger
    Buka browser, masuk ke akun Blogger kamu, dan pilih blog yang pengen kamu tambahkan feed Instagram-nya.

  2. Pilih Menu “Tata Letak”
    Setelah blog kamu terbuka, klik menu Tata Letak yang ada di dashboard. Di sini, kamu bisa menambahkan berbagai gadget yang nantinya akan menampilkan feed Instagram.

  3. Klik “Tambahkan Gadget”
    Cari tombol Tambahkan Gadget di area yang kamu inginkan. Biasanya, di sidebar atau di area lain sesuai desain blog kamu. Lalu, pilih gadget HTML/JavaScript.

  4. Tempelkan Kode HTML
    Setelah jendela HTML/JavaScript muncul, salin dan tempel kode di bawah ini, lalu klik Simpan:

    <div class="insta-feed"></div>

Langkah 2: Menambahkan Kode CSS

Setelah menambahkan gadget, saatnya kita mengatur tampilan feed Instagram dengan menambahkan beberapa kode CSS ke dalam template blog kamu. Langkah-langkahnya seperti ini:

  1. Buka Menu “Tema”
    Kembali ke dashboard Blogger, pilih menu Tema, lalu klik Edit HTML untuk membuka editor kode template blog.

  2. Cari Tag Penutup CSS
    Cari tag </style> atau letakkan kode sebelum tag ]]></b:skin>—tempat ini biasanya di bagian atas kode CSS dalam template.

  3. Tempelkan Kode CSS Berikut
    Salin dan tempel kode di bawah ini:

    /* CSS untuk Feed Instagram dengan Class yang sudah diubah */
.insta-feed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}
.insta-feed > * {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.insta-pic {
  position: relative;
}
.insta-pic:after,
.insta-user {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.insta-pic:hover .insta-user,
.insta-pic:hover:after {
  opacity: 1;
  visibility: visible;
}
.insta-pic:after {
  content: '';
  background-color: rgb(0 0 0 / 45%);
  width: 100%;
  height: 100%;
}
.insta-user {
  color: #af2817;
  font-size: 5px;
  background-color: #f7efee;
  padding: 2px 10px;
  border-radius: 50px;
  z-index: 2;
}
.insta-feed .insta-pic img {
  width: 100%;
  border-radius: 5px;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 576px) {
  .insta-user {
    font-size: 8px;
  }
}

    Penjelasan singkatnya, kode di atas mengatur tampilan grid untuk feed Instagram. Dengan menggunakan flexbox, setiap postingan akan tampil rapi dalam baris dan kolom. Nama pengguna (class insta-user) dan efek overlay pun sudah diatur supaya tampil menarik ketika foto dihover.

Langkah 3: Menambahkan Kode JavaScript

Bagian berikutnya adalah menambahkan kode JavaScript untuk memproses RSS Feed Instagram. Kode ini akan mengambil data dari RSS Feed, memproses, dan menampilkannya di area yang sudah kita siapkan tadi.

  1. Cari Tag Penutup Body
    Masih di editor HTML, cari tag </body> atau letakkan kode tepat sebelum penutup tag </body>.

  2. Tempelkan Kode JavaScript Berikut
    Salin dan tempel kode berikut ini:

    <script type="text/javascript">
/*<![CDATA[*/
/* JS Widget RSS Post Instagram dengan Class yang sudah diubah */
document.addEventListener("DOMContentLoaded", function() {
  let rssUrl = "YOUR_RSS_IG", 
      userIg = "YOUR_USER_IG", 
      t = document.querySelector(".insta-feed"), 
      r = "rssFeedCache", 
      s = "rssFeedCacheExpiry";
  
  async function fetchRSS() {
    let currentTime = new Date().getTime(),
        cacheExpiry = localStorage.getItem(s);
    if (cacheExpiry && currentTime < cacheExpiry) {
      let cachedItems = JSON.parse(localStorage.getItem(r));
      processFeed(cachedItems);
    } else {
      try {
        let response = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`);
        if (!response.ok) throw Error("Network response was not ok");
        let data = await response.json();
        if ("ok" !== data.status) throw Error("Failed to fetch RSS feed");
        localStorage.setItem(r, JSON.stringify(data.items));
        localStorage.setItem(s, currentTime + 3600000);
        processFeed(data.items);
      } catch (error) {
        console.error("Fetch error:", error);
        t.innerHTML = `<p>Error fetching RSS feed: ${error.message}</p>`;
      }
    }
  }
  
  function processFeed(items) {
    // Mengacak dan memilih maksimal 9 postingan
    let selectedItems = (function getRandomItems(arr, count) {
      let shuffled = arr.sort(() => 0.5 - Math.random());
      return shuffled.slice(0, count);
    })(items, 9), htmlOutput = "";
    
    selectedItems.forEach((item, index) => {
      let parser = new DOMParser(),
          doc = parser.parseFromString(item.description, "text/html"),
          imgElem = doc.querySelector("img"),
          imgHtml = imgElem ? imgElem.outerHTML : "",
          postHtml = `<div class="insta-pic">${imgHtml}<a class="insta-user" href="https://www.instagram.com/${userIg}/" target="_blank">@${userIg}</a></div>`;
      
      // Membuat kolom setiap 3 postingan
      if (index % 3 === 0) {
        if (index !== 0) {
          htmlOutput += "</div>";
        }
        htmlOutput += `<div class="insta-column-${Math.floor(index / 3) + 1}">`;
      }
      htmlOutput += postHtml;
      if (index === selectedItems.length - 1) {
        htmlOutput += "</div>";
      }
    });
    t.innerHTML = htmlOutput;
  }
  
  fetchRSS();
});
/*]]>*/
</script>
    Info!

    Penting: Jangan lupa untuk mengganti kode YOUR_RSS_IG dengan URL RSS Feed Instagram kamu, dan YOUR_USER_IG dengan username Instagram kamu. Kode ini akan mengambil data dari API rss2json, lalu mengacak dan memilih maksimal 9 postingan untuk ditampilkan.

Penutup

Oke, teman-teman, itu dia tutorial lengkap cara menampilkan feed Instagram di Blogger dengan menggunakan RSS Feed Instagram. Semoga dengan tutorial ini, tampilan blog kamu jadi lebih hidup dan menarik karena bisa menampilkan postingan Instagram secara otomatis. Metode ini cukup sederhana dan nggak ribet, apalagi kalau dibandingkan harus repot-repot menggunakan API resmi Instagram yang kadang bikin pusing.

Coba deh ikuti langkah-langkah di atas dengan teliti, dan jangan lupa untuk cek kembali URL RSS Feed dan username Instagram kamu supaya tampilannya pas. Kalau ada masalah atau pertanyaan, tinggal tulis komentar di bawah ya, saya akan bantu semampu saya.

Selamat mencoba dan semoga blog kamu makin keren dengan tambahan feed Instagram ini. Sampai jumpa di tutorial selanjutnya, dan tetap semangat berkreasi!

Blogger Enthusiast.

Anda mungkin menyukai postingan ini