AI Skill Report Card
Managing Social Media Customer Replies
Quick Start13 / 15
Build a web app with three core pieces:
- Backend API connecting to Meta Graph API (Facebook Comments, Instagram Comments, Messenger, Instagram Messaging)
- Database storing conversations, comments, and reply history
- Frontend dashboard showing a unified inbox with reply actions
Minimal stack recommendation:
- Backend: Node.js (Express) or Python (FastAPI)
- Database: PostgreSQL or MongoDB
- Frontend: React/Next.js
- Auth: Meta App with Facebook Login (Business permissions)
- Webhooks: Meta Webhooks for real-time comment/message events
project/
├── backend/
│ ├── routes/
│ │ ├── webhooks.js # Receives FB/IG events
│ │ ├── comments.js # Fetch/reply to comments
│ │ └── messages.js # Fetch/reply to DMs
│ ├── services/
│ │ └── metaGraphApi.js # Wrapper for Graph API calls
│ └── models/
│ └── Conversation.js
└── frontend/
└── src/pages/inbox.jsx # Unified dashboard
Recommendation▾
Add more concrete examples with full input/output including actual JSON payloads and dashboard state changes, not just prose descriptions
Workflow14 / 15
Progress:
- Step 1: Create Meta App (developers.facebook.com) with Facebook Login + required permissions
- Step 2: Request permissions:
pages_messaging,pages_manage_metadata,pages_read_engagement,instagram_basic,instagram_manage_comments,instagram_manage_messages - Step 3: Connect client's Facebook Page + linked Instagram Business Account via OAuth
- Step 4: Set up Webhooks subscription (comments, messages, mentions) pointing to your backend endpoint
- Step 5: Store incoming events in database, normalized into one
Conversation/Messageschema (platform-agnostic) - Step 6: Build inbox UI — list of conversations, filter by platform (FB/IG), filter by type (comment/DM)
- Step 7: Implement reply actions — POST to Graph API endpoints for comment replies and message replies
- Step 8: Add status tracking (replied/unreplied, assigned agent, timestamps)
- Step 9: Add notifications (new message = badge/sound alert)
- Step 10: Test with sandbox page before going live; submit app for Meta App Review (needed for production use with real pages)
Key API Endpoints (Meta Graph API)
Facebook comment reply:
POST /{comment-id}/comments
{ "message": "Reply text" }
Instagram comment reply:
POST /{ig-comment-id}/replies
{ "message": "Reply text" }
Facebook Messenger reply:
POST /me/messages
{
"recipient": {"id": "{psid}"},
"message": {"text": "Reply text"}
}
Instagram DM reply: same Messenger-style endpoint but scoped to the IG Business Account ID.
Webhook payload handling — always verify signature (X-Hub-Signature-256) and respond with 200 within a few seconds, process async in a queue (Redis/BullMQ) to avoid timeouts.
Recommendation▾
Include an example of handling the 24-hour messaging window edge case or rate-limit backoff in practice
Examples13 / 20
Example 1:
Input: New comment on a Facebook post: "هل المنتج متوفر؟"
Output: Webhook fires → saved as Conversation(platform=facebook, type=comment, status=unreplied) → appears in dashboard inbox → agent clicks, types "أيوة متوفر، تقدر تطلب من هنا [link]" → sent via POST /{comment-id}/comments
Example 2:
Input: Instagram DM asking about shipping cost
Output: Stored as Conversation(platform=instagram, type=message) → agent replies from dashboard → sent via Messenger-style API scoped to IG account → status updated to replied
Recommendation▾
Provide a minimal code snippet for the webhook signature verification and the normalized Conversation schema to make it more immediately actionable
Best Practices
- Unify data model: normalize FB and IG payloads into one schema early — don't build separate UIs per platform.
- Use webhooks, not polling — Graph API rate limits make polling unreliable at scale.
- Queue processing — webhooks must respond fast; do actual work (DB write, notification) in a background job.
- Token refresh: Page Access Tokens can expire; implement long-lived token exchange and refresh logic.
- Role-based access: if multiple agents reply, track who replied to what (avoid duplicate replies).
- Rate limit handling: Graph API returns
#4or#17errors on rate limits — implement exponential backoff. - Arabic text support: ensure UTF-8 everywhere, test RTL rendering in the dashboard UI.
- Sandbox first: Meta requires App Review for
pages_messagingandinstagram_manage_messagesin production — test with test users/pages before review.
Common Pitfalls
- Don't poll the Graph API for new comments/messages — use webhooks, it's both required practice and avoids rate-limiting.
- Don't forget the 24-hour messaging window rule for Messenger/IG — you generally can't message users outside of it unless using approved message tags.
- Don't store permanent Page Access Tokens in plaintext — encrypt at rest.
- Don't mix comment replies and DM replies into the same API call logic — they use different endpoints and payload structures.
- Don't skip webhook signature verification — anyone could spoof fake events to your endpoint.
- Don't submit for App Review before testing thoroughly in sandbox — rejections cost review cycles (days to weeks).