Anda memiliki situs HTML kustom, akun Instagram yang aktif, dan jarak antara keduanya yang seharusnya tidak sulit untuk ditutup. Sematan bawaan Instagram menawarkan kustomisasi terbatas, sedangkan Graph API membutuhkan manajemen token, pembatasan kuota, dan frontend khusus. Keduanya tidak ideal jika Anda hanya ingin aliran yang bersih dan otomatis diperbarui di situs Anda.
Instagram Feed pulls content from your account automatically and lets you configure layouts and styling in a visual editor. No API keys, no server-side logic – just a two-line snippet to copy-paste. Below is a walkthrough of all three methods so you can choose the best fit for your setup and maintenance needs.”>There’s also a no-code approach: a widget tool like the Instagram Feed pulls content from your account automatically and lets you configure layouts and styling in a visual editor. No API keys, no server-side logic – just a two-line snippet to copy-paste. Below is a walkthrough of all three methods so you can choose the best fit for your setup and maintenance needs.
- Cara mendapatkan feed Instagram yang hidup dan otomatis terbarui di halaman HTML mana pun dalam waktu kurang dari 5 menit
- Layout feed mana yang paling cocok untuk jenis situs Anda (portofolio, e-commerce, blog)
- Perbedaan utama antara widget, penyematan bawaan, dan pendekatan API
- Tips praktis untuk performa feed, penyaringan, dan optimasi seluler
Jika Anda sudah tahu apa yang Anda inginkan dan hanya butuh langkah-langkahnya, panduan cepat di bawah ini membawa Anda dari nol hingga tayang dalam kurang dari 5 menit.
Mulai Cepat: Sematkan Instagram di HTML
Inilah jalur tercepat — empat langkah, tanpa latar belakang pemrograman.
- Open the Instagram Feed editor and select a template.
- Masukkan nama pengguna Anda dan sesuaikan aliran Instagram.
- Klik “Tambahkan ke Situs” untuk menghasilkan kode sematan Anda.
- Tempelkan ke berkas HTML Anda pada <body> dan publikasikan perubahannya.
Bangun widget umpan Instagram Anda di editor interaktif di bawah ↓
Tiga Cara Menyematkan Instagram di Situs HTML
Ada lebih dari satu cara menampilkan konten Instagram di halaman HTML, dan pilihan yang tepat bergantung pada seberapa banyak kendali yang Anda perlukan serta berapa banyak postingan yang ingin Anda tampilkan.
| Metode | Tingkat Kesulitan | Kustomisasi | Pembaruan Otomatis | Terbaik untuk | Biaya |
|---|---|---|---|---|---|
| Widget Umpan Instagram Elfsight | Tanpa kode | Tinggi (tata letak, warna, filter, popup, tombol CTA) | Ya (setiap 48 jam) | Tampilan feed lengkap dengan kontrol desain | Paket gratis / paket berbayar |
| Sematkan bawaan Instagram (pos tunggal) | HTML Dasar | Tidak ada (gaya Instagram tetap) | Tidak | Menyematkan 1–3 Postingan Spesifik | Gratis |
| API oEmbed Instagram | Tingkat Pengembang | Lengkap (Anda membangun frontend) | Ya (Anda mengelola logika penyegaran) | Feed kustom dengan kendali penuh | Gratis (memerlukan akun pengembang Meta) |
Intinya: Pendekatan widget mencakup sebagian besar kasus penggunaan dengan kustomisasi tata letak dan umpan yang diperbarui otomatis — tidak diperlukan kode backend. Sematan Instagram bawaan bekerja paling baik untuk posting tunggal atau Reels, sedangkan jalur API lebih cocok untuk aplikasi kustom yang memerlukan kontrol programatik penuh namun memerlukan pemeliharaan berkelanjutan, seperti pembaruan token dan penanganan pembatasan laju.
Memilih Template yang Tepat untuk Feed Instagram Anda
Sebelum mengonfigurasi feed, tentukan peran apa yang harus dimainkan di halaman ini. Feed bukti sosial pada halaman produk memerlukan pengaturan yang berbeda dibandingkan feed portofolio visual atau feed hashtag.
| templat | Apa yang Termasuk | Tata Letak | Terbaik untuk |
|---|---|---|---|
| Widget Profil | Header profil lengkap (avatar, nama, jumlah postingan, pengikut, mengikuti, tombol Ikuti) + grid postingan dengan navigasi slider | Slider | Halaman merek, bagian “Tentang Kami”, portofolio influencer — di mana pun Anda ingin membangun identitas Instagram yang lengkap |
| Grid | “Ikuti kami di Instagram” sebagai judul header + grid multi-baris dengan tombol Muat Lebih Banyak, tanpa statistik profil | Tata Letak Grid | Halaman Instagram khusus, bagian media sosial di footer, portofolio visual — saat konten lebih penting daripada akun |
| Widget Kecil | Header terpusat dan ringkas (avatar, nama, statistik, tombol Ikuti) + grid 2×2 dengan navigasi panah | Slider (ringkas) | Sidebar, kolom konten sempit, penempatan berukuran kecil — pas untuk ruang sempit tanpa kehilangan konteks profil |
| Hashtag Showcase | Judul Tagar sebagai header + tata letak slider, tanpa informasi profil | Slider | Halaman kampanye, galeri UGC, sorotan acara — menampilkan posting berdasarkan topik, bukan berdasarkan akun |
| Post Slider | Header profil + satu unggahan besar dengan navigasi panah (satu unggahan terlihat pada satu waktu) | Slider ( Tunggal ) | Bagian hero, sorotan konten unggulan, sidebar blog — tampilan berdampak tinggi untuk jumlah posting yang lebih sedikit |
Menyesuaikan Template dengan Jenis Situs Web Anda
E-commerce dan Halaman Produk
Pilih Hashtag Showcase atau Grid. Umpan bersumber dari hashtag di dekat deskripsi produk berfungsi sebagai bukti sosial visual — pelanggan nyata yang menggunakan produk, bukan foto studio. Berdasarkan tolok ukur Emplifi Q3 2025, postingan sosial yang menampilkan konten buatan pengguna menghasilkan conversion rates 10× higher daripada postingan non-UGC. Gunakan templat pos Tile untuk menjaga fokus pada gambar, dan atur tombol CTA agar langsung menghubungkan ke halaman produk.
Portofolio dan Situs Kreatif
Widget Profil atau Grid. Widget Profil berfungsi sebagai profil Instagram mini di halaman Anda — header lengkap dengan jumlah pengikut dan tombol Ikuti yang memberi pengunjung alasan untuk berlangganan. Grid tanpa header bekerja lebih baik pada halaman galeri khusus. Atur rasio gambar menjadi 1:1 untuk grid yang rapi, atau Portrait untuk konten vertikal berat seperti fotografi fesyen.
Blog dan situs konten
Widget Kecil atau Post Slider. Widget kecil ditempatkan di sidebar tanpa membebani konten tertulis. Post Slider berfungsi sebagai elemen hero, menonjolkan satu postingan pada satu waktu dalam format besar. Keduanya menjaga umpan tetap ringkas agar melengkapi artikel daripada bersaing dengannya.
Halaman acara dan kampanye
Pameran Tagar. Atur sumbernya ke tagar acara Anda, dan umpan menjadi dinding konten peserta yang diperbarui setiap 48 jam. Efektif untuk konferensi, peluncuran produk, dan inisiatif komunitas — pengunjung melihat keterlibatan nyata, bukan salinan pemasaran.
Panduan Integrasi Lengkap: Cara Menyiapkan Feed Instagram Anda di Situs HTML
Sekarang Anda tahu tata letak mana yang cocok untuk halaman Anda, mari buat widgetnya. Editor akan membimbing Anda melalui setiap tab secara berurutan — sumber, tata letak, tampilan posting, gaya, dan pengaturan.
Langkah 1: Pilih templat
Buka editor Umpan Instagram (editor Umpan Instagram), dan Anda akan melihat layar pemilihan template. Template adalah titik awal — mereka mengonfigurasi tata letak, gaya header, dan pengaturan tampilan posting sehingga Anda tidak membangun dari nol.
Seperti yang disebutkan di atas, ada lima opsi utama yang tersedia. Pilih template yang paling mendekati keinginan Anda — Anda bisa mengubah setiap pengaturan nanti.
Langkah 2: Tambahkan sumber Instagram
Setelah memilih template, Anda akan menuju tab Sumber. Di sinilah Anda memberi tahu widget konten Instagram mana yang akan ditampilkan.
Anda memiliki dua tipe sumber yang bisa dipilih:
- Akun — masukkan username publik Instagram atau URL. Umpan akan menampilkan posting akun tersebut. Profil harus publik — akun pribadi, dibatasi usia, atau pembatasan negara tidak akan bekerja.
- Tagar — masukkan sebuah tagar untuk menampilkan posting ber-tag dengan tagar tersebut. Berguna untuk kampanye bermerek atau koleksi konten buatan pengguna.
Di tab yang sama, Anda bisa menetapkan filter untuk menampilkan posting tertentu, menentukan jumlah maksimum, dan mengurutkannya berdasarkan tanggal publikasi atau posisi daftar sumber.
Langkah 3: Pilih Tata Letak Anda
Pindah ke tab Tata Letak untuk mengonfigurasi bagaimana posting ditata di halaman. Anda akan melihat dua opsi tata letak — Grid dan Slider — beserta pengaturan kolom, baris, header, dan judul feed.
Jika Anda mengikuti rekomendasi di bagian tata letak di atas, inilah saatnya menerapkannya. Beberapa catatan praktis:
- Kolom dan Baris dapat diatur ke Otomatis (responsif, menyesuaikan ukuran layar) atau Manual (Anda tentukan angka tepat). Manual memberi Anda akurasi lebih, tetapi Otomatis menangani adaptasi seluler tanpa pekerjaan tambahan.
- Header mengontrol apakah avatar profil, nama, bio, jumlah pengikut, dan tombol mengikuti muncul di atas umpan. Aktifkan untuk bagian Instagram mandiri; nonaktifkan saat umpan disematkan dalam konten lain.
- The Pengaturan Slider (terlihat saat Slider dipilih) memungkinkan Anda mengonfigurasi panah navigasi, pagination, dan kecepatan rotasi otomatis.
Langkah ini yang paling lama — habiskan satu menit mencoba jumlah kolom pada berbagai lebar. Apa yang terlihat pas pada lebar 1200px bisa terasa sempit pada 768px, dan mode Auto menangani celah itu lebih baik dari yang Anda kira.
Langkah 4: Konfigurasikan Tampilan Postingan
Tab Posting mengontrol apa yang dilihat pengunjung pada setiap thumbnail postingan dan apa yang terjadi ketika mereka mengkliknya. Anda memiliki dua gaya tampilan untuk dipilih: Klasik (menampilkan tanggal, keterangan, suka, dll.) dan Ubin (tampilan hanya foto dengan overlay saat kursor melayang).
Di bawah Elemen Post, pilih detail mana yang muncul di atas overlay thumbnail:
- Jumlah Suka — menampilkan angka keterlibatan saat dihover
- Jumlah Komentar — sama, untuk komentar
- Teks — menampilkan pratinjau keterangan pada gambar mini
Hal yang sama bisa dilakukan dengan pengaturan popup untuk menampilkan atau menyembunyikan elemen tertentu (nama pengguna, tombol ikuti, jumlah like, komentar, dan lainnya).
Aksi Setelah Klik
Dropdown ini menentukan apa yang terjadi saat pengunjung mengklik sebuah unggahan. “Open in Popup” adalah default — menampilkan gambar/video berukuran penuh dengan caption, suka, tanggal, dan tombol CTA tanpa meninggalkan halaman.
Ajakan Bertindak
Bagian Tombol CTA memungkinkan Anda menambahkan tombol kustom yang mengarah ke halaman produk, Formulir Pemesanan Janji Temu, atau URL mana pun — tombol-tombol ini muncul di dalam popup bersamaan dengan konten postingan.
Langkah 5: Sesuaikan gaya feed
Tab Gaya adalah tempat Anda menyesuaikan umpan dengan identitas visual situs Anda. Alih-alih skema warna satu ukuran untuk semua, widget ini menawarkan kendali warna per elemen.
Mulailah dengan dropdown Skema Warna — ini menerapkan palet predefined ke seluruh overlay hover, popup, dan elemen navigasi. Jika skema default tidak cocok dengan merek Anda, perluas setiap bagian untuk menetapkan warna secara individual:
- Header — latar belakang, teks, tombol Ikuti, teks tombol Ikuti
- Post — overlay background and overlay text colors
- Panah / Muat Lebih Banyak — warna tombol navigasi dan teks
- Popup — beberapa elemen yang dapat dikustomisasi satu per satu
Semua bidang warna mendukung input HEX, jadi Anda bisa menempel nilai merek secara tepat. Jika Anda memerlukan gaya di luar apa yang ditawarkan kontrol bawaan — seperti ukuran font kustom, radius tepi pada thumbnail posting, atau penyesuaian jarak — editor CSS Kustom di bagian bawah tab ini yang menanganinya.
Langkah 6: Sesuaikan Pengaturan
Tab Pengaturan mencakup dua hal: bahasa dan JavaScript kustom.
Atur Bahasa agar sesuai dengan audiens situs Anda — widget ini mendukung lebih dari 33 bahasa, dan ini mengontrol teks pada elemen UI seperti tombol Ikuti, tombol Muat Lebih Banyak, dan label popup.
Kolom Custom JS ditujukan untuk integrasi tingkat lanjut — pelacakan peristiwa, perilaku bersyarat, atau menghubungkan umpan dengan skrip lain di halaman Anda. Untuk sebagian besar konfigurasi, Anda tidak perlu menyentuh bagian ini.
Langkah 7: Tambahkan widget ke situs HTML Anda
Klik “Tambahkan ke Situs” di bagian atas editor. Anda akan mendapatkan kode pemasangan — tag <script> untuk pemuat platform dan elemen <div> dengan identifikasi unik widget Anda.
Satu-satunya hal yang perlu dilakukan adalah menempelkan potongan kode yang telah Anda salin ke editor kode Anda (VS Code, Sublime Text, Notepad++, atau pengelola file hosting Anda):
- Buka berkas HTML halaman tempat feed akan muncul.
- Temukan lokasi di dalam bagian <body> tempat feed akan ditampilkan.
- Tempelkan seluruh kode instalasi di sana. Simpan berkasnya dan unggah ke server Anda.
Untuk widget statis (grid atau slider yang disematkan dalam konten halaman), tempelkan kodenya di posisi persis tempat umpan ingin muncul.
Untuk widget mengambang, tempel kode tepat sebelum tag penutup </body> — widget akan mengapung terlepas dari posisi gulir.
Pemeriksaan Cepat Pemecahan Masalah
- Umpan tidak muncul: Pastikan kode ditempatkan di dalam tag <body>, tidak di dalam tag <head>, <style>, atau <script>.
- “No posts found” error: Akun Instagram mungkin pribadi, atau nama pengguna salah eja. Periksa sumbernya di editor widget.
- Widget memuat secara lokal tetapi tidak di server live: Beberapa widget memerlukan koneksi internet aktif. Pengujian melalui protokol file:// mungkin tidak berfungsi — unggah ke host Anda atau gunakan server lokal.
- Postingan baru tidak muncul: Feed menyimpan cache konten dan secara otomatis memperbarui setiap 48 jam. Jika postingan belum muncul setelah 48 jam, hubungi dukungan Elfsight.
Cara Lain Menyematkan Konten Instagram ke HTML
Pendekatan widget mencakup kebutuhan paling luas, tetapi itu bukan satu-satunya opsi. Berikut dua alternatif yang layak dipertimbangkan, tergantung kebutuhan Anda.
Opsi 1: Sematan Instagram asli (satu posting)
Fitur sisip bawaan Instagram memungkinkan Anda menyalin cuplikan HTML untuk postingan publik atau Reel mana pun dan menempelkannya langsung ke situs Anda. Tidak diperlukan alat pihak ketiga, tidak perlu membuat akun — cukup tiga klik di Instagram dan satu tempel ke file HTML Anda.
- Buka Instagram di peramban desktop Anda dan navigasikan ke postingan publik yang ingin Anda sematkan.
- Klik tiga titik (⋯) di pojok kanan atas postingan dan pilih Sematkan.
- Pada popup, klik Salin Kode Semat.
- Buka file HTML Anda dan tempelkan kode di tempat Anda ingin postingan muncul, di dalam bagian <body>.
- Simpan file dan unggah ke server Anda.
Opsi 2: Instagram oEmbed API
Bagi para pengembang yang membutuhkan kendali melalui kode, titik akhir oEmbed API milik Instagram mengembalikan HTML sematan untuk URL posting publik mana pun. Anda mengirim permintaan GET dengan URL posting dan token akses, lalu API merespons dengan objek JSON yang berisi HTML yang dapat disematkan pada properti html.
- Siapkan akun pengembang Meta dan buat aplikasi Meta untuk mendapatkan token akses.
- Kirim permintaan GET ke
https://graph.facebook.com/v19.0/instagram_oembed?url={POST_URL}&access_token={TOKEN} - Analisis properti HTML dari respons JSON dan masukkan ke halaman Anda.
- Simpan respons ke cache — API memiliki batas 200 permintaan per jam per pengguna, jadi sebaiknya tidak memanggilnya setiap kali halaman dimuat.
Metode ini masuk akal ketika Anda membutuhkan umpan kustom yang menarik konten secara dinamis di beberapa halaman atau mengintegrasikan konten Instagram ke dalam aplikasi yang ada. Jika Anda menjelajahi jalur ini, panduan pengembang Instagram Graph API kami mencakup seluruh pengaturan, termasuk manajemen token dan pembatasan laju.
Melihat konten di luar Instagram?
Jika merek Anda aktif di beberapa platform media sosial, umpan Instagram saja bisa terasa membatasi. Alih-alih merangkai sematan Instagram, TikTok, dan Facebook secara terpisah, widget Social Feed menarik semuanya ke dalam satu hub konten yang terpusat — membuat halaman Anda lebih rapi sambil menampilkan bukti sosial lintas platform di satu tempat.
Tips Optimasi untuk Widget Instagram Anda
Feed-nya telah terpasang — sekarang mari kita buat lebih bertenaga. Tips ini melampaui dasar-dasar dan fokus pada mendapatkan lebih banyak nilai dari konten yang sudah Anda buat di Instagram.
- Kurasi apa yang dilihat pengunjung. Tab Sumber menyertakan filter Tampilkan/Sembunyikan — Anda bisa memperkecil umpan ke postingan yang mengandung tagar atau kata kunci tertentu, atau mengecualikan postingan yang tidak sesuai konteks halaman.
- Pasang Ajakan Bertindak. Setiap popup postingan dapat mencakup tombol Aksi Kustom yang mengarahkan ke halaman produk, formulir pemesanan, atau halaman landing. Ini mengubah penelusuran pasif menjadi navigasi aktif dan jalur langsung menuju konversi.
- Batasi posting yang ditampilkan. Lebih banyak belum tentu lebih baik. Grid yang rapat dan segar terlihat lebih terarah daripada arsip yang membingungkan — batasi umpan hingga 6 atau 9 postingan terbaru Anda.
- Uji tampilan seluler. Jika Anda menggunakan pengaturan kolom manual, atur nilai mobile secara terpisah — apa yang berfungsi sebagai 4 kolom di desktop sering perlu turun menjadi 2 kolom di perangkat seluler.
- Pastikan profil Instagram Anda publik dan terverifikasi. Widget hanya bisa menarik konten dari profil publik. Jika akun Anda diubah menjadi pribadi, postingan baru tidak akan muncul di umpan hingga akun tersebut publik lagi dan pembaruan cache dilakukan.
Pertanyaan yang Sering Diajukan
Bagaimana cara menyematkan feed Instagram pada situs HTML kustom?
<body> dari file HTML Anda, di posisi di mana Anda ingin feed muncul. Simpan file tersebut dan unggah ke server Anda. Widget memuat otomatis dari platform Elfsight dan menampilkan postingan, foto, dan Reels Instagram Anda dalam tata letak yang telah Anda konfigurasikan. Tidak diperlukan kode sisi server atau kunci API.Bisakah saya menyematkan feed Instagram saya di HTML secara gratis?
Apakah umpan Instagram yang disematkan diperbarui secara otomatis di halaman HTML saya?
Apakah penyematan HTML Instagram berfungsi di perangkat seluler?
Bisakah saya menampilkan Instagram Reels dan video melalui penyematan HTML?
Kesimpulan
Anda sekarang memiliki feed Instagram yang bekerja di situs HTML Anda — diatur agar sesuai tata letak Anda, dipoles sesuai merek Anda, dan siap memperbarui dirinya setiap 48 jam tanpa intervensi manual. Baik Anda memilih pendekatan widget tanpa kode atau alternatif, feed ini menambahkan lapisan konten visual dan bukti sosial yang tidak bisa direplikasi oleh gambar statis.
Elfsight Instagram Feed widget, pick a template, connect your account, and paste the code into your HTML. The free plan gets you a working feed in minutes — customize the layout, colors, and filters from there to make it yours.”>Jika Anda belum mulai, kunjungi Elfsight Instagram Feed widget, pilih template, hubungkan akun Anda, dan tempelkan kode ke HTML Anda. Rencana gratis memberi Anda umpan yang bekerja dalam hitungan menit — sesuaikan tata letak, warna, dan filter dari sana untuk menjadikannya milik Anda.
