Knowledge Base

INSTAGRAM FEED WIDGET 

Instagram Widget berguna untuk menampilkan feed instagram pada halaman website.

Membuat Page Instagram Feed Widget

1. Buka Magento backoffice > Content > Pages atau Content > Blocks. 
   

Gambar 1: Tampilan Setting Instagram Widget Demo

1. Klik Insert Widget > WeltPixel Instagram Widget
   

Gambar 2: Tampilan Insert Widget

Gambar 3: Pengaturan tampilan Widget yang akan muncul di Web

• Instagram Client ID
  

• Instagram Access Token
  

• Title - Judul yang diinginkan
  

• Description - Deskripsi.
  

• Container Background Color - warna yang akan digunakan sebagai background widget
  

• Open Images in New Tab - Pilihan ketika gambar di klik akan langsung membuka gambar atau tidak
  

• Images Per Row - Masukan 2-6 gambar dalam satu baris
  

• Images Should Have Padding - Pilihan untuk membuat padding gambar
  

• Optimize Image Layout - pilihan pengambilan gambar Instagram yang memiliki rasio acak dan paling cocok untuk ditampilkan di halaman web.
  

• Limit - Maksimum jumlah gambar yang dimasukan.
  

• Sort By - Opsi yang tersedia adalah:
  

  • None - Berasal dari Instagram.
    

  • Most Recent 
    

  • Least Recent.
    

  • Most Liked
    

  • Least Liked
    

  • Most Commented
    

  • Least Commented 
    

  • Random
    

• Resolutions - ukuran tampilan gambar yang diinginkan
  

  • Thumbnail (150x150).
    

  • Low Resolution (306x306).
    

  • Standard Resolution (612x612).
    

• Feed Type - Jenis feed yang diinginkan
  

• ID User
  

Mendapatkan Akses Token

1. Buka halaman Facebook Developer , masuk ke akun Anda
   

2. Daftarkan akun Anda ke Facebook Developer, pilih Daftar Sekarang
   

6. Scroll kebawah lalu klik Tambah Platform

8. Masukan URL web yang akan ditambahkan Instagram Feed

12. Scroll ke bawah lalu klik Create New App

13. Masukan nama tampilan untuk ID instagram aplikasi , lalu klik Buat Aplikasi

14. Masukan URL website Anda pada form yang sudah diberi kotak merah ( URL harus sama ) contoh : https://testinginstafeed.com/auth/ Anda akan mendapatkan ID Aplikasi Instagram dan Password Aplikasi Instagram

15. Pada bagian menu pilih Peran > Peran

16. Scroll ke bawah lalu pilih Tambah Penguji Instagram

17. Cari dan pilih username Instagram yang akan ditautkan

18. Masuk pada halaman Instagram , lalu masuk pada akun Instagram Anda

Gambar 20: Tampilan penguji instagram

https://api.instagram.com/oauth/authorize

  ?client_id={app-id} ------ id Instagram 

  &redirect_uri={redirect-uri} ------ URL yang sudah diinputkan

  &scope=user_profile,user_media

  &response_type=code

Note : jangan beri spasi dan enter.

Jika URL yang dimasukan berhasil akan mengarah ke popup lalu pilih otoritas

22. setelah itu halaman akan beralih ke halaman depan website Anda. Salin URL website Anda, hapus tanda #_ pada akhir URL. Contoh :

https://testinginstafeed.com/auth/?code=Ahgfuyhviukhk……..#_

kode pada URL tersebut akan digunakan untuk mendapatkan akses token, jadi pastikan anda menyalin kode tersebut. 

curl -X POST \

  https://api.instagram.com/oauth/access_token \

  -F client_id={app-id} \ -------- id app instagram

  -F client_secret={app-secret} \ -------- password app instagram

  -F grant_type=authorization_code \

  -F redirect_uri={redirect-uri} \ ------- URL website Anda

  -F code={code} ------- kode URL yang baru saja Anda dapatkan

contoh:

Note: Hapus tanda \ , jadikan kode dalam satu baris dengan spasi sebagai batas antar kode. 

Jika berhasil Anda akan diberi akses token dan user id.

1. Buka Page yang Anda buat di Magento backoffice > Content > Pages
   

2. Klik Edit
   

3. Pada bagian Content pilih Show/Hide Editor > Insert Widget
   

4. Pada bagian Widget Type pilih Weltpixel Instagram Widget
   

5. Masukan User Client ID , Access token dan User ID yang sudah Anda dapatkan
   

6. Klik Insert Widget > Save