Instagram API Dashboard

👤

Akun Terhubung

🔔

Webhook Events

💬

Komentar

✉️

Pesan

👤 Akun Instagram Terhubung

🔗

Belum ada akun Instagram yang terhubung.

Hubungkan Sekarang

Webhook Logs (Real-time)

Setiap event dari Instagram (komentar, pesan, dll) akan muncul di sini secara real-time. Data diambil setiap 10 detik otomatis.

#	Waktu	Object	Event	Entry ID	Value
Memuat...

💬 Komentar Terbaru

Waktu	Username	Komentar	Media ID	Sumber
Memuat...

📸 Media / Posts

Waktu	Tipe	Caption	❤️ Likes	💬 Comments	Link
Memuat...

✉️ Pesan / DM

Waktu	Sender	Pesan
Memuat...

📖 Panduan Setup Instagram API + Webhook

ℹ️ Prerequisite:

1. Akun Instagram harus Business atau Creator (bukan Personal)

2. Instagram harus terhubung ke Facebook Page

3. Aplikasi harus dibuat di Meta Developer Dashboard

Buat Aplikasi

Buka developers.facebook.com → Buat aplikasi baru → Pilih "Business"

Setup Instagram API

Di dashboard aplikasi → Tambah produk "Instagram Graph API" → Konfigurasi

Setup Webhook

Tambah produk "Webhooks" → Set callback URL ke webhook.php kamu

Subscribe Fields

Subscribe ke field: comments, messages, live_comments

🔧 Konfigurasi Webhook di Meta Dashboard

// URL Webhook (harus HTTPS & publik):
Callback URL: https://DOMAIN_KAMU/meta_api/webhook.php

// Verify Token (harus sama dengan di config.php):
Verify Token: token_verifikasi_instagram_2024
// Fields yang perlu di-subscribe untuk object "instagram":
✅ comments      → Notifikasi komentar baru
✅ live_comments  → Notifikasi komentar di live
✅ messages       → Notifikasi DM masuk
✅ messaging_seen → Notifikasi pesan dibaca
            

🌐 Testing dengan Ngrok (Localhost)

// 1. Install ngrok: https://ngrok.com
// 2. Jalankan di terminal:
ngrok http 80

// 3. Dapat URL seperti:
https://abc123.ngrok-free.app

// 4. Gunakan URL tersebut di Meta Dashboard:
Callback URL: https://abc123.ngrok-free.app/meta_api/webhook.php

// 5. Jangan lupa update IG_REDIRECT_URI di config.php:
IG_REDIRECT_URI: https://abc123.ngrok-free.app/meta_api/auth.php
            

📂 Struktur File

meta_api/
├── index.php          → Dashboard ini (tampilan utama)
├── config.php         → Konfigurasi DB, API keys, helper functions
├── webhook.php        → Endpoint webhook (terima notifikasi dari Meta)
├── auth.php           → OAuth flow (login Instagram & dapatkan token)
├── api_endpoint.php   → AJAX endpoint (dipanggil dashboard via JS)
├── db.sql             → Schema database (jalankan di phpMyAdmin)
├── assets/
│   └── style.css      → Styling dashboard
└── logs/
    └── app_*.log      → Log file untuk debugging
            

🔄 Alur Data

┌─────────────────────────────────────────────────────┐
│                    ALUR WEBHOOK                      │
├─────────────────────────────────────────────────────┤
│                                                      │
│  User komentar    Meta/Instagram     webhook.php     │
│  di Instagram  →  kirim POST ke  →  terima &        │
│                   webhook URL       simpan ke DB     │
│                                                      │
│  Dashboard        api_endpoint.php   Database        │
│  (index.php)  →   query data     ←  (MySQL)         │
│                                                      │
├─────────────────────────────────────────────────────┤
│                    ALUR OAUTH                        │
├─────────────────────────────────────────────────────┤
│                                                      │
│  User klik      Redirect ke        User login &     │
│  "Hubungkan" →  Facebook Login  →  izinkan akses    │
│                                                      │
│  Redirect ke    Tukar code →       Simpan token     │
│  auth.php    →  access token    →  ke database      │
│                                                      │
└─────────────────────────────────────────────────────┘
            

📸 Instagram API Dashboard