Jika Anda mengelola situs Weebly, Anda mungkin ingin situs itu terasa lebih hidup daripada sekadar kumpulan halaman statis. Di Elfsight, kami tahu salah satu cara termudah untuk menambah kehidupan pada situs Anda adalah dengan membawa media sosial Anda masuk. Menampilkan postingan dan visual yang segar membuat pengunjung betah lebih lama sambil memberi mereka gambaran jelas tentang apa yang dilakukan merek Anda.
Widget Umpan Instagram menangani bagian sulit. Ia mengambil postingan Anda secara otomatis, memungkinkan Anda menyesuaikan tampilannya agar serasi dengan desain Anda, dan menyelamatkan Anda dari mengutak-atik kode. Dalam panduan ini, kami akan menjelaskan proses menambahkan Instagram
- Panduan langkah demi langkah yang rinci untuk menyematkan feed Instagram di Weebly tanpa coding
- Cara menyesuaikan tata letak, warna, dan filter posting agar selaras dengan desain situs Anda
- Kelebihan dan kekurangan menggunakan widget pihak ketiga dibandingkan dengan alternatif bawaan
- Saran Pemecahan Masalah dan Tips Berguna agar Widget Anda Berjalan Lancar
Cara Cepat Menambahkan Instagram ke Weebly
Berikut pintasan dua menit untuk menambahkan posting Instagram ke Weebly:
- Buka Elfsight’s editor dan pilih template.
- Sesuaikan widget Instagram Feed Anda.
- Klik “Tambahkan ke situs web secara gratis” dan salin kodenya.
- Tempelkan ke backend situs Weebly Anda.
Buat widget Umpan Instagram Anda sendiri di editor gratis!
Fitur yang membedakan
Anda sudah memahami cara kerjanya. Sekarang mari kita lihat fitur-fitur yang membuat widget ini menonjol: mulai dari tata letak yang fleksibel hingga pembaruan otomatis yang menjaga feed tetap segar tanpa kendala.
| Fitur Utama | Mengapa ini penting |
|---|---|
| Tampilkan konten dari akun, tagar, atau lokasi | Tampilkan posting Instagram yang tepat agar pengunjung Anda selalu melihat konten yang paling relevan dan menginspirasi. |
| Lebih dari 50 opsi kustomisasi dengan tata letak grid, slider, dan galeri | Sesuaikan Umpan Instagram Anda dengan gaya situs web Anda dengan mudah untuk tampilan yang mulus dan profesional. |
| Umpan Belanja dengan tombol ajakan bertindak tanpa batas | Ubah setiap postingan menjadi peluang dengan menghubungkan gambar langsung ke halaman produk atau layanan Anda. |
| Pembaruan Konten Real-Time Otomatis | Buat situs Anda selalu segar dengan postingan Instagram terkini, tanpa pembaruan manual. |
| Popup interaktif, ikon ikuti dan bagikan | Tingkatkan keterlibatan pengunjung dengan fitur-fitur yang mengundang mereka untuk menjelajah, mengikuti, dan membagikan langsung dari situs Anda. |
Features Page. With primary features covered, it’s high time we walk through each integration step.”>Ini hanyalah beberapa fitur berguna dari Instagram Feed Widget yang akan membantu Anda menampilkan posting terbaru merek Anda dan mengarahkan pengunjung untuk bertindak. Untuk daftar lengkapnya, lihat Halaman Fitur. Setelah fitur utama tercakup, saatnya kita melewati setiap langkah integrasi.
Menyematkan Feed Instagram di Weebly Langkah demi Langkah
Bagian ini merinci setiap langkah untuk membuat, menyesuaikan, dan menanamkan feed Instagram Anda di situs Weebly, termasuk beberapa tips praktis untuk penggunaan yang lebih baik.
1. Pilih templat
widget editor, the first thing you’ll do is pick a template. Each template sets the starting look of your Instagram Feed – whether it’s a clean gallery grid, a sleek slider, or a bold highlight style.”>Saat Anda membuka editor widget, hal pertama yang akan Anda lakukan adalah memilih template. Setiap template menentukan tampilan awal Instagram Feed Anda — apakah itu grid galeri yang bersih, slider yang ramping, atau gaya sorotan yang mencolok.
Klik “Lanjutkan dengan templat ini” setelah Anda menemukan satu yang terasa tepat.
2. Tambahkan sumber konten
Langkah selanjutnya adalah memberi tahu widget dari mana menarik konten. Klik “Tambahkan Sumber” dan hubungkan akun Instagram Anda atau atur umpan tagar. Anda bisa menambahkan beberapa akun dan hashtag sekaligus untuk menggabungkan berbagai jenis konten ke dalam satu feed. Filter memungkinkan Anda mengontrol apa yang muncul, sehingga Anda bisa menyembunyikan posting dengan kata kunci tertentu atau membatasi konten berdasarkan jenis media.
3. Konfigurasikan tata letak
Pada tahap ini, Anda menentukan bagaimana postingan Anda akan diatur di feed. Tab Tata Letak menawarkan beberapa opsi:
- Tata Letak: Postingan muncul dalam baris dan kolom yang rapi.
- Slider: Sebuah carousel dengan navigasi (panah, geser, atau titik) dan pemutaran otomatis opsional.
- Masonry: Tampilan grid bergaya Pinterest di mana postingan menyesuaikan ukuran gambar.
- Sorotan: Satu postingan menjadi fokus utama, sedangkan yang lain ditempatkan di sekelilingnya.
Anda juga bisa menyesuaikan jumlah baris dan kolom, mengatur tata letak untuk perangkat seluler vs desktop, dan menambahkan judul feed khusus jika diinginkan.
4. Sesuaikan tampilan posting
Di tab Post, Anda mengatur bagaimana setiap postingan terlihat. Anda bisa menentukan rasio aspek, memutuskan apakah akan menampilkan detail seperti nama pengguna dan jumlah suka, serta memilih apa yang terjadi ketika seseorang mengklik sebuah postingan — membuka di Popup, tautkan ke Instagram, atau tetap statis.
Anda juga bisa menentukan apakah lebih banyak postingan akan dimuat secara otomatis saat pengguna menggulir, atau hanya ketika mereka mengklik “Muat Lebih Banyak.”
5. Sesuaikan Gaya
Di sinilah Anda membuat feed terlihat seperti bagian dari situs Anda. Pada tab Gaya, Anda bisa memilih skema warna bawaan (terang, gelap, atau kustom), menyesuaikan bentuk tombol dan efek hover, mengatur padding dan jarak, serta menata tampilan popup.
Untuk kendali penuh, gunakan opsi Custom CSS – ini sempurna jika Anda perlu mengikuti pedoman merek yang ketat atau ingin melakukan penyesuaian desain tingkat lanjut.
6. Atur Pengaturan
Tab Pengaturan adalah tempat Anda menyelesaikan detailnya. Pilih bahasa widget Anda dan aktifkan lazy loading untuk kinerja yang lebih cepat.
Jika Anda membutuhkan perilaku lanjutan untuk widget Anda, Anda bisa menambahkan JS atau CSS kustom.
7. Dapatkan kode instalasi
Setelah Anda puas dengan hasilnya, klik “Tambahkan ke situs web secara gratis.” Ini akan menghasilkan kode instalasi pribadi Anda.
Klik “Salin Kode” untuk menyimpan cuplikan Anda — Anda membutuhkannya untuk menyematkan widget di situs Anda.
8. Sematkan widget di Weebly
Saat ini, Anda benar-benar menempatkan Feed di situs Anda. Berikut empat opsi penyematan yang tersedia:
Opsi 1: Widget statis pada halaman tertentu
- Masuk ke akun Weebly Anda → pilih situs Anda → klik Sunting situs.
- Seret elemen Kode Semat (menu kiri) ke lokasi widget yang dipilih.
- Klik Sunting HTML Kustom → tempelkan kode Elfsight Anda.
- Klik Publikasikan di sudut kanan atas untuk menampilkan widget di situs Anda.
Opsi 2: Widget statis di semua halaman
- Buka dasbor Weebly → klik Edit site.
- Buka tab Theme di bilah atas → pilih Edit HTML / CSS (menu di kiri).
- Simpan perubahan, lalu terbitkan situs Anda.
Opsi 3: Widget mengambang di halaman tertentu
- Masuk ke Weebly → klik Sunting situs.
- Seret dan letakkan cuplikan Elfsight ke posisi yang Anda inginkan untuk widget melayang.
- Klik Sunting HTML Kustom, tempel kode sisipan Elfsight Anda.
- Publikasikan situs untuk menerapkan perubahan.
Opsi 4: Widget mengambang di semua halaman
- Masuk → klik Sunting situs.
- Buka Theme → lalu pilih Edit HTML / CSS.
- Di antara file-file, pilih dan buka
header.html(atau yang setara) danno-header.html - Tempelkan kode Elfsight Anda tepat sebelum tag penutup.
- Simpan perubahan Anda → terbitkan untuk melihat widget mengambang tampil di semua halaman.
Bagian terbaiknya adalah Anda bisa menyesuaikan widget kapan saja di editor, dan perubahan akan otomatis terlihat di situs Weebly Anda tanpa perlu menyematkan ulang kodenya.
Metode Sematkan Bawaan untuk Weebly
Ada beberapa cara native yang andal untuk menambahkan konten Instagram ke situs Weebly Anda, meskipun masing-masing memiliki beberapa kompromi penting.
Sematkan postingan satu per satu
Anda bisa menambahkan satu posting Instagram atau video secara langsung dengan menggunakan fitur semat resmi Instagram.
- Buka unggahan Instagram. Temukan unggahan Instagram yang ingin Anda tambahkan, lalu klik tiga titik.
- Salin kode sematan. Pilih “Sisipkan” dan salin kode HTML yang disediakan.
- Ubah halaman Weebly Anda. Buka editor Weebly dan buka halaman yang ingin Anda perbarui.
- Tambahkan blok Sematkan Kode. Seret elemen Kode Sematkan ke lokasi yang dipilih.
- Tempelkan dan simpan. Tempelkan kode sematan Instagram ke kolom ini, lalu publikasikan perubahan Anda.
Help Center page.”>Anda bisa menemukan panduan resmi Instagram untuk menyematkan posting di Halaman Pusat Bantuan.
Aplikasi Feed Instagram bawaan Weebly
Integrasi Instagram Feed milik Weebly sendiri memungkinkan Anda menampilkan posting terbaru dari akun Anda.
- Pergi ke Weebly App Center. Buka App Center dari dasbor Anda.
- Cari aplikasi Instagram Feed. Temukan integrasi resmi Instagram milik Weebly.
- Pasang aplikasinya. Tambahkan ke situs web Anda.
- Hubungkan akun Anda. Masuk menggunakan kredensial Instagram Anda saat diminta.
- Letakkan Umpan Instagram. Seret elemen Umpan Instagram ke bagian yang Anda inginkan di halaman.
Detail lebih lanjut tersedia di halaman Weebly App Center.
Instagram API melalui HTML Kustom
Jika Anda nyaman dengan kode, Anda bisa mengintegrasikan konten Instagram melalui API Graph resmi Instagram.
- Daftar sebagai pengembang Facebook. Siapkan Aplikasi Facebook Anda dan dapatkan izin API yang tepat.
- Buat token akses. Autentikasi dan dapatkan token yang valid untuk akun Instagram Anda.
- Tulis atau gunakan kode JavaScript. Buat skrip untuk mengambil dan menampilkan posting menggunakan API.
- Tambahkan kode ke Weebly. Sisipkan skrip melalui blok Kode Sematkan di editor Weebly Anda.
- Publikasikan dan uji. Periksa bahwa umpan memuat dan memperbarui sesuai harapan.
Jika Anda ingin menjelajah lebih jauh, Meta menyediakan dokumentasi rinci di halaman Instagram Graph API.
Bagaimana perbandingannya?
| Metode | Keunggulan utama | Kelemahan utama |
|---|---|---|
| Elfsight | Mudah digunakan, dapat disesuaikan, menggabungkan beberapa sumber | Penggunaan widget pihak ketiga. |
| Kode Sematkan Instagram | Resmi, sangat mudah untuk satu postingan | Hanya satu postingan pada satu waktu, tidak ada umpan maupun pembaruan otomatis. |
| Aplikasi Instagram bawaan Weebly | Mudah menampilkan unggahan Anda sendiri | Hanya mendukung satu akun, tanpa integrasi hashtag atau mention, dan kustomisasi yang sangat terbatas. |
| Instagram API melalui HTML Kustom | Sangat fleksibel jika dibuat dari nol | Membutuhkan keterampilan pengembang, pembaruan berkala, dan pemecahan masalah manual untuk perubahan API. |
Inti pertimbangannya adalah kendali versus perawatan. Aplikasi native dan kode sisipan cepat tetapi terbatas — satu akun atau satu postingan. API menghapus semua batasan tetapi menambah kerja pengembang dan beban pemeliharaan. Widget khusus berada di antara keduanya: umpan yang bisa disesuaikan dan otomatis ter-update tanpa perlu kode untuk diawasi. Pilih berdasarkan seberapa besar keterlibatan yang Anda inginkan.
Checklist praktik terbaik
Dari pengalaman tim Elfsight, kami telah memahami apa yang benar-benar membuat widget Instagram Feed berkinerja baik bagi pengguna kami. Berikut tips andalan kami untuk menyiapkannya dengan cara terbaik:
- Tentukan apa yang ditampilkan dulu. Umpan bisa menarik posting dari akun, tagar, atau lokasi. Pilih yang sesuai tujuan Anda: tagar efektif untuk konten komunitas, sedangkan satu akun menonjolkan cerita merek Anda.
- Jaga agar tetap ringan. Terlalu banyak posting sekaligus bisa memperlambat halaman. Mulailah dengan 6–9 posting dalam grid, lalu biarkan pengunjung memuat lebih banyak jika mereka mau.
- Letakkan di tempat yang tepat. Di beranda, ia membangun kepercayaan dalam sekejap. Di halaman produk, ia menunjukkan penggunaan nyata. Di blog, ia menambahkan sentuhan pribadi. Satu ukuran tidak cocok untuk semua.
- Gunakan keterangan dengan bijak. Keterangan panjang bisa membuat desain terasa berantakan. Tampilkan hanya beberapa baris pertama, dan biarkan pengguna klik jika mereka ingin cerita lengkapnya.
- Periksa terlebih dahulu di ponsel. Banyak pengunjung hanya akan melihat feed Anda lewat ponsel. Uji tata letak seperti slider atau grid kompak untuk memastikan unggahan tidak terpotong.
- Tautkan posting yang relevan. Jika Anda menggunakan feed yang bisa dibeli, tautkan ke produk atau halaman pemesanan, bukan hanya Instagram Anda. Ini membuat widget menjadi bagian dari corong penjualan Anda.
Bisnis salon menggunakan Instagram Feed
Frisurenschmiede is a modern hairdressing salon in Germany run by Sina Fehringer. Alongside other Elfsight integrations, the Instagram Feed plays a central role in showcasing fresh visuals, salon updates, and customer transformations on their website, helping the business stand out in a competitive field.”>Frisurenschmiede is a modern hairdressing salon in Germany run by Sina Fehringer. Alongside other Elfsight integrations, the Instagram Feed plays a central role in showcasing fresh visuals, salon updates, and customer transformations on their website, helping the business stand out in a competitive field.
Sebelum menggunakan Elfsight
Awalnya, situs salon tersebut terlihat statis dan sulit mengubah pengunjung menjadi pemesan. Tanpa konten dinamis, calon klien tidak memiliki panduan visual untuk menarik perhatian; merek tersebut tenggelam di antara para pesaing.
- Keterlibatan online rendah dan visibilitas rendah
- Kesulitan menarik klien baru melalui situs web
- Kurangnya konten interaktif dan visual untuk membangun kepercayaan
Dengan Feed Instagram
“Penataan rambut kurang interaktif. Saya memilih jalur lain dan berhasil mendapatkan banyak klien baru.” – Sina Fehringer, Frisurenschmiede
Dengan menyematkan Umpan Instagram, salon menghadirkan aliran visual autentik langsung dari profil media sosial mereka. Gaya rambut, cuplikan salon, dan tampilan pelanggan muncul secara otomatis, memberi situs web nuansa segar tanpa suntingan manual. Ketika dipadukan dengan widget Elfsight lainnya, umpan ini membantu menyampaikan gaya dan kepribadian salon dengan cara yang tidak bisa dilakukan foto statis.
Hasil
Sejak menambahkan Instagram Feed dan widget Elfsight lainnya pada 2022, Frisurenschmiede telah meningkatkan basis pelanggan hingga 1,5x. Banyak pengunjung kini langsung menjadi klien tanpa salon mengandalkan iklan atau promosi besar.
Widget lain yang sedang digunakan
Selain Instagram Feed, Frisurenschmiede menggunakan All-in-One Reviews, AI Chatbot, Photo Gallery, dan lainnya. Bersama-sama, ini menciptakan situs web yang membangun kepercayaan, menjawab pertanyaan klien secara instan, dan membuat merek terasa lebih mudah didekati.
Selain itu, Sina berbagi bahwa kustomisasi widget membawanya ke CSS kustom dan menemukan Komunitas kami yang mendukung.
Pertanyaan yang Sering Diajukan
Mengapa widget Instagram saya tidak tampil di Weebly setelah pemasangan?
Bagaimana cara memperbaiki masalah tata letak atau responsivitas setelah menyematkan feed?
Apa yang harus saya lakukan jika kode instalasi widget terhapus?
Dapatkah ekstensi peramban memblokir pemuatan widget Elfsight?
Cara mengatasi masalah CSP yang memblokir skrip eksternal?
Pertanyaan atau ide?
Menambahkan Instagram ke situs Weebly Anda pada dasarnya bergantung pada seberapa banyak kendali dan pemeliharaan yang Anda inginkan. Kode semat Instagram milik sendiri cukup jika Anda hanya perlu menampilkan satu posting. Aplikasi bawaan Weebly menangani foto terbaru Anda. API Graph Instagram memberi fleksibilitas penuh, tetapi hanya jika Anda siap dengan pengaturan pengembang dan pemeliharaan yang menyertainya.
Untuk kebanyakan orang, widget Instagram Feed berada di posisi praktis di tengah: umpan langsung yang diperbarui otomatis yang mengambil konten dari akun, hashtag, atau lokasi, dirancang agar serasi dengan situs Anda, tanpa perlu menulis kode atau mengawasi. Apa pun jalur yang Anda pilih, hasilnya sama — mengubah halaman Weebly statis menjadi sesuatu yang tetap segar dan memberi pengunjung alasan untuk kembali.
