Cara Memasang Widget Instagram di Blogger dengan SnapWidget

---

Instagram masih menjadi salah satu tempat paling praktis untuk menampilkan foto, video pendek dan aktivitas visual sebuah brand atau blog. Kalau saya ingin membawa sebagian tampilan itu ke Blogger, cara yang paling sederhana adalah memakai widget pihak ketiga yang memang dibuat untuk menampilkan feed Instagram secara otomatis.

Untuk tutorial ini saya memakai SnapWidget. Layanan ini masih menyediakan widget Instagram yang bisa dipasang pada website dan blog, termasuk Blogger. Model widget yang tersedia dapat berubah dari waktu ke waktu, jadi nama paket atau tampilan dashboard yang terlihat di akun saya bisa berbeda dengan yang muncul di akun pembaca.

Hal pentingnya bukan menghafal posisi menu, tetapi memahami alurnya: buat widget di SnapWidget, hubungkan akun Instagram, atur layout responsive, ambil kode embed, lalu tempelkan kodenya ke Blogger.

Instagram FeedMenampilkan foto dan video dari akun Instagram.

ResponsiveLebar widget mengikuti area artikel atau sidebar.

Auto UpdateKonten widget dapat mengikuti posting terbaru sesuai layanan yang digunakan.

Blogger ReadyKode embed dapat ditempel melalui HTML view atau gadget HTML/JavaScript.

Informasi Singkat

---

SnapWidget saat ini menyediakan beberapa model widget Instagram. Halaman produk resminya menampilkan Instagram Feed dan Instagram Grid, sementara fitur tertentu seperti link langsung ke Instagram, carousel post, custom CSS atau hashtag dapat bergantung pada paket yang digunakan.

Sumber: SnapWidget Instagram Widget dan SnapWidget Pricing.

Preview Widget Instagram di Blogger

Di bawah ini saya tetap menampilkan contoh embed SnapWidget. Jika widget demo tidak memuat konten, biasanya penyebabnya ada pada konfigurasi widget, otorisasi akun, atau perubahan layanan di sisi SnapWidget, bukan pada HTML Blogger.

@codeflaregramLIVE EMBED

Cara Membuat Widget Instagram di SnapWidget

Saya mulai dari situs SnapWidget lalu memilih widget Instagram yang sesuai. Saat ini SnapWidget menampilkan beberapa tipe widget, termasuk feed dan grid. Jika tujuan saya hanya menampilkan konten Instagram secara sederhana, saya memilih layout yang paling ringan dan responsive.

01

Buka SnapWidget

Kunjungi SnapWidget, kemudian buat akun atau login.

02

Pilih widget Instagram

Pilih model feed atau grid sesuai kebutuhan. Nama widget dapat berbeda jika SnapWidget mengubah produk atau paketnya.

03

Hubungkan akun Instagram

Ikuti proses otorisasi yang muncul pada dashboard. Gunakan akun yang memang ingin ditampilkan pada widget.

04

Atur layout

Sesuaikan jumlah kolom, ukuran thumbnail, spacing dan opsi responsive yang tersedia.

05

Ambil kode embed

Setelah tampilan sesuai, salin kode widget yang diberikan SnapWidget.

Catatan tampilan dashboard
Screenshot di atas saya gunakan sebagai ilustrasi alur. Antarmuka SnapWidget dapat berubah, jadi fokus pada fungsi menu seperti memilih widget, menghubungkan akun, mengatur layout dan mengambil kode embed.

Cara Memasang Widget Instagram di Blogger

SnapWidget juga memiliki panduan khusus untuk Blogger. Untuk posting atau halaman statis, kode widget ditempel melalui HTML View. Untuk sidebar atau area tata letak, saya bisa menggunakan gadget HTML/JavaScript.

Buka dashboard BloggerPilih blog yang akan dipasangi widget.

Pilih lokasi widgetGunakan posting/halaman jika ingin widget berada di konten, atau Tata Letak untuk sidebar/footer.

Pilih HTML View atau HTML/JavaScriptJangan menempel kode embed pada mode Compose karena struktur HTML bisa berubah.

Tempel kode SnapWidgetPastikan iframe tidak diberi lebar tetap yang merusak tampilan mobile.

Simpan lalu ujiCek desktop dan mobile, lalu pastikan widget tidak menambah horizontal scroll.

Panduan resmi SnapWidget untuk Blogger juga menyebut bahwa pemasangan widget pada halaman atau posting dilakukan melalui HTML View. Saya mengikuti pola tersebut supaya kode iframe dan script tidak diubah oleh editor visual.

Sumber: SnapWidget Help - Blogger.

Contoh Kode Widget Instagram Responsive

Kode dari SnapWidget sebaiknya tetap memakai URL embed yang dibuat dari akun sendiri. Saya hanya menambahkan wrapper dan header lokal supaya tampilannya lebih rapi di Blogger.

<div class="cfInstagramBox">
<div class="cfInstagramHead">
<a href="https://www.instagram.com/USERNAME/" target="_blank" rel="noopener">
<i class="fa-brands fa-instagram"></i> @USERNAME
</a>
</div>

<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="URL_EMBED_SNAPWIDGET" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" title="Instagram feed"></iframe>
</div>

<style>
.cfInstagramBox{overflow:hidden;border:1px solid rgba(0,131,218,.16);border-radius:7px}
.cfInstagramHead{padding:9px 11px;background:#0083da}
.cfInstagramHead a{display:flex;align-items:center;gap:7px;color:#fff!important;text-decoration:none!important;font-size:15px}
.cfInstagramBox iframe{display:block;width:100%;border:0}
</style>

Widget Instagram Tidak Muncul? Cek Ini

Kode embed salah atau belum aktifSalin ulang kode dari dashboard SnapWidget dan pastikan widget sudah disimpan.

Otorisasi akun berubahLogin kembali ke SnapWidget jika koneksi Instagram meminta otorisasi ulang.

Ditempel pada mode ComposeGunakan HTML View supaya iframe dan script tidak diubah oleh editor Blogger.

Lebar iframe tidak responsivePastikan iframe menggunakan width 100% dan tidak memakai width pixel yang kaku.

Script diblokir browserExtension privacy, ad blocker atau kebijakan browser tertentu dapat memblokir script pihak ketiga.

Apakah Widget Instagram Membantu SEO?

Widget Instagram bukan fitur yang otomatis membuat artikel naik ke halaman pertama Google. Saya menggunakannya sebagai elemen visual dan jalur tambahan menuju akun sosial. Untuk SEO, konten utama tetap harus menjawab kebutuhan pembaca dengan jelas, cepat dimuat dan nyaman digunakan di mobile.

Karena widget berasal dari layanan pihak ketiga, saya juga memperhatikan performa. Jika halaman sudah berat, terlalu banyak embed sosial dapat menambah request eksternal. Saya biasanya memasang widget hanya pada halaman yang memang membutuhkan feed Instagram.

Jaga performaJangan memasang banyak embed di satu halaman jika tidak diperlukan.

Uji mobilePastikan iframe tidak membuat halaman melebar ke samping.

Alt pada screenshotGambar tutorial tetap diberi alt yang menjelaskan isinya.

Link yang jelasGunakan link Instagram dan sumber resmi dengan tujuan yang mudah dipahami.

Pilih Instagram Feed atau Grid?

Untuk sidebar yang sempit saya lebih suka feed yang sederhana. Untuk halaman khusus portofolio, grid lebih cocok karena beberapa gambar bisa terlihat sekaligus. SnapWidget saat ini menampilkan Instagram Feed sebagai salah satu widget yang tersedia, sedangkan fitur grid dan fitur tambahan tertentu dapat masuk ke paket berbayar.

FEEDCocok untuk sidebar

Tampilan linear, mudah dibaca dan tidak terlalu padat.

GRIDCocok untuk galeri

Lebih visual, tetapi cek paket dan fitur yang tersedia pada akun SnapWidget.

Ringkasnya

Cara paling praktis untuk menampilkan feed Instagram di Blogger adalah memakai layanan embed yang memang masih aktif dan mendukung Blogger. Saya memilih SnapWidget karena alurnya sederhana: buat widget, hubungkan akun Instagram, atur tampilannya, lalu tempel kode embed pada HTML View atau gadget HTML/JavaScript.

Yang perlu diperhatikan hanya tiga hal: gunakan kode embed milik akun sendiri, buat iframe responsive, dan jangan memasang widget sosial terlalu banyak pada halaman yang sama. Dengan begitu tampilan Instagram tetap menarik tanpa membuat artikel kehilangan fokus.