Cara menampilkan feed instagram di website bisa memanfaatkan plugin jika website yang dibuat menggunakan wordpress, tapi bagaimana menampilkan feed instagram di blogger?
Menampilkan feed Instagram di website dapat menjadi cara efektif untuk menarik lebih banyak pengunjung dan memberikan tambahan konten visual yang menarik untuk pembaca. Jika kamu memiliki website di Blogger dan ingin menampilkan feed Instagram, ada beberapa cara yang bisa dilakukan mulai dari menggunakan widget pihak ketiga, API Instagram atau RSS Feed Instagram.
Di artikel kali ini saya akan berbagi tutorial bagaimana menampilkan feed instagram di blogger menggunakan URL RSS Feed Instagram. Langkah untuk mendapatkan RSS feed sudah pernah saya bagikan di artikel sebelumnya.
Cara Menampilkan Konten Feed Instagram di Blogger
Setelah kamu memiliki URL Feed instagram, sekarang lanjut ketahap berikutnya menampilkannya menggunakan beberapa kode sederhana. Berikut adalah langkah-langkah yang dapat kamu ikuti untuk menampilkan feed Instagram di blog Blogger
Langkah #1: Buka Blogger dan masuk ke dasbor blog kamu.
Langkah #2: Pilih "Tata Letak" dan klik "Tambahkan Gadget". Lalu Pilih "HTML/JavaScript"
Langkah #3: Salin dan tempelkan kode berikut di dalamnya dan Klik SIMPAN.
<div class='instagram-post'></div>Langkah #3: Berikutnya, pilih menu "Tema" dan klik "EDIT HTML".
Langkah #4: Letakan kode CSS berikut sebelum </style> dan Javascript berikut sebelum </body>
.instagram-post{display:flex;flex-direction:row;justify-content:center;gap:10px}.instagram-post>*{display:flex;flex-direction:column;gap:10px}.instagram-img{position:relative}.instagram-img:after,.instagram-name{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:.3s}.instagram-img:hover .instagram-name,.instagram-img:hover:after{opacity:1;visibility:visible}.instagram-img:after{content:'';background-color:rgb(0 0 0 / 45%);width:100%;height:100%}.instagram-name{color:#af2817;font-size:5px;background-color:#f7efee;padding:2px 10px;border-radius:50px;z-index:2}.instagram-post .instagram-img img{width:100%;border-radius:5px;height:100%;object-fit:cover}@media (min-width:576px){.instagram-name{font-size:8px}}<script type='text/javascript'>/*<![CDATA[*
/* Js Widget RSS Post Instagram */
document.addEventListener("DOMContentLoaded",function(){let rssUrl="YOUR_RSS_IG",userIg="YOUR_USER_IG",t=document.querySelector(".instagram-post"),r="rssFeedCache",s="rssFeedCacheExpiry";async function n(){let e=new Date().getTime(),n=localStorage.getItem(s);if(n&&e<n){let o=JSON.parse(localStorage.getItem(r));i(o)}else try{let a=await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(rssUrl)}`);if(!a.ok)throw Error("Network response was not ok");let c=await a.json();if("ok"!==c.status)throw Error("Failed to fetch RSS feed");localStorage.setItem(r,JSON.stringify(c.items)),localStorage.setItem(s,e+36e5),i(c.items)}catch(l){console.error("Fetch error:",l),t.innerHTML=`<p>Error fetching RSS feed: ${l.message}</p>`}}function i(r){let s=function e(t,r){let s=t.sort(()=>.5-Math.random());return s.slice(0,9)}(r,9),n="";s.forEach((t,r)=>{let i=new DOMParser,o=i.parseFromString(t.description,"text/html"),a=o.querySelector("img"),c=a?a.outerHTML:"",l=`<div class="instagram-img">${c}<a class="instagram-name" href="https://www.instagram.com/${userIg}/" target="_blank">@${userIg}</a></div>`;r%3==0&&(0!==r&&(n+="</div>"),n+=`<div class="column-${Math.floor(r/3)+1}">`),n+=l,r===s.length-1&&(n+="</div>")}),t.innerHTML=n}n()});
/*]]>*/</script>Ganti kode YOUR_RSS_IG dengan rssURL kamu, dan Ganti kode YOUR_USER_IG dengan username ig kamu
Penutup
Nah itu tadi Cara Menampilkan Feed Instagram di Website. Cara ini cukup mudah di bandingkan harus membuatnya dengan API Insagram resmi. Semoga artikel ini bermanfaat, selamat mencoba.