Toggle Menu

Cara Menampilkan Umpan Instagram di WordPress (Dalam 4 Langkah)

Diterbitkan: 2023-02-10

Pasar template Beaver Builder baru! Mulai GRATIS di Assistant.Pro

How to Display an Instagram Feed in WordPress
  • Pembuat Berang-berang
  • WordPress

Cara Menampilkan Umpan Instagram di WordPress (Dalam 4 Langkah)

Sejak WordPress menghentikan oEmbeds pada tahun 2020, Anda tidak dapat memasukkan umpan Instagram ke dalam konten hanya dengan menempelkan tautan. Oleh karena itu, Anda mungkin mencari cara yang ramah pengguna untuk menampilkan feed Instagram di situs WordPress Anda.

Menampilkan feed Instagram di WordPress mudah menggunakan PowerPack for Beaver Builder. Ini adalah cara yang bagus untuk tetap di atas kehadiran sosial Anda. Plus, dengan menambahkan umpan ke situs Anda, Anda dapat mengarahkan lalu lintas antara kedua platform untuk membuat pengguna tetap terlibat.

Dalam posting ini, kami akan melihat lebih dekat manfaat menampilkan umpan Instagram Anda di situs Anda. Kemudian, kami akan memandu Anda melalui empat langkah sederhana untuk membantu Anda mencapainya. Mari kita mulai!

Daftar isi

  • Manfaat Menampilkan Feed Instagram di Website Anda
  • Cara Menampilkan Umpan Instagram di WordPress (Dalam 4 Langkah)
    • Langkah 1: Siapkan Aplikasi Instagram dengan Meta untuk Pengembang
    • Langkah 2: Konfigurasikan Pengaturan Aplikasi Anda dan Tambahkan Pengguna Uji Coba
    • Langkah 3: Hasilkan Token Akses Instagram Anda
    • Langkah 4: Tambahkan Umpan Instagram Anda ke Halaman Anda
  • Kesimpulan
  • Pertanyaan-pertanyaan Terkait

Manfaat Menampilkan Feed Instagram di Website Anda

Dengan menampilkan umpan Instagram di situs web Anda, Anda akan selalu memiliki konten segar untuk berinteraksi dengan pengguna. Selain itu, umpan yang diperbarui secara rutin berarti bahwa meskipun orang mengunjungi kembali situs Anda, situs Anda akan selalu terlihat sedikit berbeda dan memiliki sesuatu yang baru untuk ditawarkan.

Terlebih lagi, menambahkan umpan Instagram adalah cara cepat dan mudah untuk merapikan halaman Anda dan menyempurnakan desain web WordPress Anda. Karena mempertahankan dirinya sendiri, ini adalah solusi yang lebih nyaman daripada membayar tema mewah atau terus-menerus mengunggah gambar untuk mengesankan pelanggan.

Selain itu, Anda dapat menampilkan umpan Instagram dengan konten buatan pengguna dari pelanggan nyata yang menggunakan produk Anda:

Contoh umpan Instagram yang ditampilkan di situs web

Dalam postingan ini, Anda dapat mendemonstrasikan kehadiran dan nilai perusahaan Anda dengan berinteraksi dengan pengguna di kolom komentar. Lebih baik lagi, umpan Instagram seperti ini dapat berfungsi sebagai bukti sosial, memungkinkan Anda membangun kepercayaan dan meningkatkan penjualan.

Terakhir, manfaat paling signifikan dari menyertakan umpan Instagram di situs web Anda adalah cara yang bagus untuk mengarahkan lalu lintas ke akun sosial Anda. Ini sangat berguna jika halaman media sosial Anda relatif baru dan Anda sedang mencari cara untuk mendapatkan lebih banyak pengikut.

Cara Menampilkan Umpan Instagram di WordPress (Dalam 4 Langkah)

Cara termudah untuk menampilkan feed Instagram di WordPress adalah dengan PowerPack for Beaver Builder:

Addon Berang-berang PowerPack

Setelah plugin dipasang, Anda akan dapat memilih dari sekumpulan modul fungsional dan kreatif, termasuk menu lanjutan, penggeser kartu, dan formulir pencarian.

Anda juga dapat memanfaatkan template pra-desain untuk mempercepat pekerjaan desain web Anda. Lebih baik lagi, Anda akan mendapat manfaat dari banyak integrasi yang bermanfaat, mengurangi kebutuhan akan plugin pihak ketiga.

Untuk menginstal PowerPack, Anda perlu mengaktifkan plugin pembuat halaman Beaver Builder di situs Anda. Kemudian, Anda dapat mengunggah plugin PowerPack ke WordPress dengan membuka Plugins > Add New > Upload. Terakhir, buka PowerPack dan masukkan kunci lisensi Anda.

Langkah 1: Siapkan Aplikasi Instagram dengan Meta untuk Pengembang

Untuk memulai, pertama-tama Anda harus membuat akun dengan Meta untuk Pengembang. Jika Anda sudah memiliki akun, masuk ke situs web. Setelah akun Anda siap, klik Aplikasi Saya :

Aplikasi Meta.

Pilih Buat Aplikasi, dan Anda akan dibawa ke layar baru. Di sini, pilih Konsumen lalu tekan Berikutnya :

Pilih Konsumen sebagai jenis aplikasi Anda

Pada titik ini, Anda akan diberikan formulir tempat Anda dapat memasukkan nama aplikasi dan mengonfirmasi alamat email Anda. Selanjutnya, klik Buat aplikasi :

Buat aplikasi Anda dengan Meta untuk Pengembang

Anda akan diminta memasukkan kembali sandi untuk menyelesaikan penyiapan aplikasi.

Anda sekarang akan melihat daftar semua aplikasi yang tersedia seperti Facebook Login, Fundraisers, dan Webhooks. Temukan opsi Tampilan Dasar Instagram dan klik Siapkan :

Siapkan aplikasi Tampilan Dasar Instagram

Selanjutnya, Anda akan diberi beberapa informasi tentang tampilan aplikasi, kasus penggunaan, dan izin. Pindai detail ini lalu klik Buat aplikasi baru . Munculan akan muncul untuk Anda memasukkan ID aplikasi Instagram baru:

ID aplikasi Instagram

Sebaiknya kunjungi tautan yang disediakan di popup untuk menghindari pelanggaran branding Instagram. Kemudian, di kotak Nama tampilan , masukkan ID aplikasi Instagram baru dan tekan Buat aplikasi .

Langkah 2: Konfigurasikan Pengaturan Aplikasi Anda dan Tambahkan Pengguna Uji Coba

Setelah menyiapkan aplikasi, Anda harus mengonfigurasi setelan aplikasi dan menambahkan pengguna uji dari dasbor Meta untuk Pengembang.

Dari area ini, navigasikan ke Pengaturan > Dasar :

Pengaturan dasar di Meta untuk Pengembang

Anda akan diarahkan ke layar baru dengan bidang yang harus Anda selesaikan. Beberapa kolom sudah diisi, seperti Rahasia aplikasi dan ID Aplikasi Anda. Lengkapi kolom lainnya yang berlaku untuk aplikasi dan perusahaan Anda.

Di menu tarik-turun Kategori , pilih Bisnis dan laman . Kemudian simpan perubahan Anda.

Anda sekarang siap untuk menambahkan pengguna percobaan ke aplikasi Anda. Untuk melakukan ini, buka App Roles > Roles dan gulir ke bawah untuk menemukan Add Instagram Testers :

Tambahkan Penguji Instagram ke aplikasi Meta untuk Pengembang Anda

Munculan akan muncul di mana Anda dapat menambahkan nama pengguna Instagram Anda:

Tambahkan nama pengguna Instagram Anda ke Meta untuk Pengembang

Klik Kirim untuk mengirim undangan ke akun Instagram pilihan Anda.

Sekarang, Anda harus menerima undangan, jadi pergilah ke akun Instagram Anda. Buka Pengaturan > Aplikasi dan situs web > Undangan Penguji :

Terima undangan Penguji di Instagram

Kemudian, terima undangannya. Penting untuk diperhatikan bahwa langkah ini harus diselesaikan di komputer desktop dan tidak akan berhasil jika Anda menggunakan aplikasi seluler.

Langkah 3: Hasilkan Token Akses Instagram Anda

Pada tahap ini, Anda siap membuat token akses Instagram Anda. Jadi, beralih kembali ke dasbor Meta untuk Pengembang Anda. Gulir ke bawah hingga Anda melihat Produk saya :

Produk Anda di dasbor Meta untuk Pengembang

Klik Pengaturan dan gulir ke Pengaturan OAuth Klien . Di kotak ini, masukkan URL berikut: “https://wpbeaveraddons.com/instagram-access-token/”.

Jika tertulis Batalkan Otorisasi URL Panggilan Balik , masukkan alamat ini: “https://wpbeaveraddons.com/”. Untuk URL Permintaan Penghapusan Data , gunakan URL yang sama seperti di atas. Kemudian, simpan perubahan Anda:

Tambahkan URL ke setelan aplikasi Tampilan Dasar Anda

Sekarang, gulir ke bawah ke Pembuat Token Pengguna dan pilih Hasilkan Token :

Hasilkan token untuk pengguna uji Instagram

Anda mungkin perlu masuk kembali ke akun Instagram Anda jika sesi Anda telah berakhir. Kemudian, klik Izinkan di jendela baru untuk membuat token akses Anda:

Token pengguna uji Instagram

Centang kotak untuk menunjukkan bahwa Anda memahami ketentuannya. Kemudian, salin token ke papan klip Anda dan tekan Selesai.

Langkah 4: Tambahkan Umpan Instagram Anda ke Halaman Anda

Sekarang saatnya menambahkan feed Instagram ke halaman atau postingan Anda di WordPress. Luncurkan editor Beaver Builder dan akses modul melalui sidebar. Kemudian, pilih modul PowerPack Instagram Feed dan seret ke halaman Anda:

Modul Umpan Instagram.

Di tab Umum pengaturan modul, Anda akan melihat tautan yang menyatakan, Token Akses Instagram Anda hilang, klik di sini untuk mengonfigurasi . Ikuti tautan ini ke pengaturan Integrasi PowerPack Anda dan rekatkan Token Akses yang Anda salin sebelumnya:

Masukkan Token Akses Instagram Anda di pengaturan PowerPack

Sekarang, kembali ke halaman atau posting WordPress Anda, dan Anda akan melihat foto Instagram Anda muncul.

Selain itu, dengan Add-on PowerPack, Anda bahkan dapat menyesuaikan pengaturan tampilan umpan menggunakan banyak opsi penyesuaian. Untuk memulai, tekan ikon kunci inggris dan pilih Pengaturan Umpan Instagram :

PowerPack Addons Pengaturan Umpan Instagram

Di sini, Anda dapat membatasi jumlah gambar yang ditampilkan di feed Anda. Anda juga dapat menyesuaikan resolusi dan mengubah urutan posting Anda, menampilkan foto terbaru Anda terlebih dahulu.

Di bawah Layout , Anda dapat mengubah format gambar Anda, memilih antara pasangan bata, kolom, atau korsel:

Pengaturan Instagram Feed Carousel di PowerPack Addons

Jika Anda memilih opsi Carousel, Anda dapat memutar feed Anda secara otomatis, mengubah tombol kontrol, dan menyesuaikan kecepatan putar dalam tab Carousel .

Di bagian bawah pengaturan Umum , Anda juga dapat memilih untuk menampilkan tautan ke profil Instagram Anda. Sementara itu, di bawah tab Style , Anda bisa menambahkan overlay atau grayscale pada gambar Anda.

Setelah umpan Anda terlihat persis seperti yang Anda inginkan, klik Simpan . Kemudian, Selesai > Terbitkan untuk menerbitkan halaman Anda.

Kesimpulan

Mengintegrasikan situs web Anda dengan situs media sosial adalah cara yang bagus untuk mengarahkan pengunjung di antara kedua platform. Namun, mungkin tampak sulit untuk diterapkan pada awalnya. Untungnya, dengan PowerPack for Beaver Builder, Anda dapat dengan mudah menampilkan feed Instagram di halaman Anda.

Sebagai rekap, berikut adalah empat langkah untuk menampilkan umpan Instagram Anda di WordPress:

  1. Siapkan aplikasi Instagram dengan Facebook untuk Pengembang.
  2. Konfigurasikan pengaturan aplikasi Anda dan tambahkan pengguna percobaan.
  3. Hasilkan token akses Instagram Anda.
  4. Masukkan token akses Anda di modul feed Instagram dan konfigurasikan pengaturan tampilan feed dengan Beaver Builder.

Pertanyaan-pertanyaan Terkait

Bagaimana Saya Menampilkan Umpan Media Sosial di WordPress?

Cara termudah untuk menampilkan umpan sosial Anda di WordPress adalah dengan menggunakan plugin. PowerPack for Beaver Builder adalah solusi yang sangat sederhana. Anda dapat menggunakannya untuk memasukkan Facebook Like Box, Facebook Timeline, Twitter Grid, Twitter Buttons, Instagram Feeds, dan lainnya.

Mengapa Saya Tidak Dapat Menyematkan Instagram di WordPress?

Pada tahun 2020, WordPress menghentikan oEmbed untuk Facebook dan Instagram, sehingga mustahil untuk menyematkan umpan Instagram hanya dengan menempelkan tautan. Namun, kabar baiknya adalah dengan plugin seperti PowerPack for Beaver Builder, Anda dapat dengan mudah menampilkan feed Instagram di halaman Anda.