INSTAGRAM FEED WIDGET 

Instagram Feed Widget membantu dalam menampilkan feed instagram pada halaman website melalui ekstensi Magezon. Magezon membantu penggunaan fitur Instagram Feed Widget pada Website dengan hanya memerlukan Token Instagram Developer. 

Registrasi Akun Facebook Developer

  1. Masuk ke Facebook Developer : https://developers.facebook.com/ 

  2. Klik Login

  3. Registrasi akun Facebook yang akan dibuat sebagai akun developer dengan mendaftar sebagai akun Facebook

terlebih dahulu dengan klik Create new account dan mengisi Requirement field yang dibutuhkan.



Gambar 1. Tampilan registrasi Akun Facebook 

  1. Masuk kembali Pada Facebook Developer : https://developers.facebook.com/

  2. Klik Get Started. Mengisi field yang dibutuhkan pada 

    • Register : Pastikan akun FB benar, Klik Continue

    • Verify account : Kode verifikasi melalui SMS pada no. Telp

    • Contact info : Checklist pada Checkbox > Confirm email

    • About Yo. : Klik Developer > Complete registration


Gambar 2. Tampilan Register Akun Facebook Developer

  1. Klik Complete registration. Muncul jendela dashboard developer yang telah dilakukan registrasi.

  2. Klik Create App. Muncul Pop Up pilihan jenis aplikasi yang akan dibuat. Pilih Customers lalu klik Continue

  3. Klik Create App.

    • App Display Name : Nama Aplikasi yang dibuat

    • App Contact Email : Email yang digunakan registrasi facebook dan facebook developer



Gambar 3. Tampilan pembuatan aplikasi pada Akun Facebook Developer

  1. Muncul Jendela Dashboard developer yang baru dibuat 


Gambar 4. Tampilan Dashboard aplikasi pada Akun Facebook Developer


Membuat Produk pada Aplikasi dan Generate Token

  1. Pilih Product pada Instagram Basic Display Product

  2. Klik Set Up. Jika akun facebook developer belum terdaftar sebagai pengguna Instagram, maka harus membuat

ID aplikasi untuk produk instagram dengan Klik Create New App

  1. Muncul Pop Up untuk Pengaturan nama akun yang akan dibuat ID product nya

  2. Klik Create App



Gambar 5. Tampilan Pembuatan Instagram ID Product pada Akun Facebook Developer

  1. Mengisi kebutuhan informasi yang diperlukan 

    • Nama Tampilan Instagram / Instagram Display Name 

Nama yang akan menjadi nama Produk instagram pada aplikasi yang dibuat

  • Client OAuth Settings

Url yang dibutuhkan untuk keperluan setting otorisasi klien. Perlu menyertakan https:// Pada url yang diinputkan

  • Deauthorization 

Url yang dibutuhkan untuk keperluan pembatalan otorisasi Oleh pengguna terhadap aplikasi yang dibuat. Perlu menyertakan https:// Pada url yang diinputkan

  • Data Erase Request

Url yang dibutuhkan untuk keperluan pengajuan penghapusan data otorisasi Pengguna pada aplikasi yang dibuat. Perlu menyertakan https:// Pada url yang diinputkan.


Note : Dibawah ini sebagai contoh URL yang digunakan adalah  https://swift-sprint.testingnow.me/



Gambar 6. Tampilan Pembuatan ID Product Instagram pada  Akun Facebook Developer

  • User Token Generator

Token yang didapatkan oleh Tester instagram, yang nantinya Feed pada akun Instagram Tester dimunculkan di Frontend Website. Namun sebelumnya harus mengisi kebutuhan User yang bertindak sebagai Admin, Developer, Tester, dan Instagram Tester. 

  • Admin : Pemilik Aplikasi yang dibuat (Akun Facebook pemilik aplikasi)

  • Tester : Penguji Aplikasi yang dibuat (Menyertakan akun Facebook)

  • Instagram Tester : Akun Tester yang akan mendapatkan Token (Menyertakan akun Instagram)


Gambar 7. Tampilan Pengisian User Account ID Product Instagram pada  Akun Facebook Developer

  1. Masukkan akun Facebook Tester dan Instagram Tester. Konfirmasi. Pada Facebook Notifikasi Invitation akan muncul

pada Ikon “Notifikasi Facebook”. Pada Instagram akan masuk pada Setting > App and Website : Tester Invites




Gambar 8. Tampilan akun Tester dan Instagram Tester pada ID Product Instagram yang sudah melakukan Konfirmasi

  1. Masuk kembali pada Instagram Basic Display > Basic Display pada sidebar

  2. Scroll pada User Token Generator, Klik Generate Token. 

  3. Masukkan akun Instagram Tester

  4. Checklist pada Checkbox I Understand

  5. Copy Token, and Klik Done


Gambar 9. Tampilan Generate Token pada Instagram Tester 


  1. Klik Save Changes

Konfigurasi Admin pada Backoffice

  1. Masuk pada admin Backoffice

  2. Store > Configuration > Magezon > Magezon Page Builder. Setting pada bagian Instagram User Token. Isikan Token yang sudah di generate sebelumnya 




Gambar 10. Tampilan Konfigurasi Magezone Instagram Token

  1. Lakukan setting pada page yang akan dimasukkan feed instagram menggunakan Magezone Page Builder.



 

Gambar 11. Tampilan Konfigurasi Magezon Page Builder : Instagram Feed

Instagram Feed pada Frontend


Gambar 12. Tampilan Instagram Feed menggunakan Magezon pada Frontend