Facebook Live Feed — Setup Guide  |  Motion Plus Corporation Website

Facebook Live Feed Setup Guide

Everything you need to connect your real Facebook Page posts to the homepage in under 20 minutes.

Contents

Overview — how it works Step 1 — Find your Facebook Page ID Step 2 — Create a Facebook Developer App Step 3 — Generate a Page Access Token Step 4 — Paste credentials into index.html Step 5 — Make the token long-lived (60 days) Step 6 — Never-expiring token (recommended) Permissions required Auto-refresh & update behaviour Troubleshooting

🎉 Overview — how the feed works

The homepage section calls the Facebook Graph API directly from the visitor's browser using your Page Access Token. It fetches your latest posts and renders them in the same card carousel design.

1 Find your Facebook Page ID

Your Page ID is the numeric identifier Facebook uses for your Page (e.g. 123456789012345).

  1. Go to your Facebook Page at facebook.com/share/1ErTQWb5hF
  2. Click About in the left sidebar.
  3. Scroll down to Page Transparency — you will see "Page ID: XXXXXXXXXXXXXXX".
  4. Copy that number — you'll use it in Step 4.

Alternative method: Go to lookup-id.com, paste your Facebook Page URL, and it will show your numeric Page ID instantly.

2 Create a Facebook Developer App

You need a free Developer App to generate tokens. This takes about 5 minutes.

  1. Go to developers.facebook.com/apps and sign in with your Facebook account.
  2. Click Create App.
  3. Select "Business" as the app type, then click Next.
  4. Fill in:
    • App Name: e.g. MPC Website Feed
    • App Contact Email: your email
    • Business Account: select your Business account if you have one, otherwise leave blank
  5. Click Create App. Facebook may ask you to complete identity verification.
  6. Once created, you'll land on the App Dashboard. You don't need to add any products for basic page post reading.

Note: Your app will start in Development mode. That is perfectly fine for reading your own Page's public posts.

3 Generate a Page Access Token

Use the Graph API Explorer — the easiest tool for getting a token quickly.

  1. Go to developers.facebook.com/tools/explorer
  2. In the top-right dropdown, select the app you just created (MPC Website Feed).
  3. Click Generate Access Token. A permission dialog appears.
  4. Grant these permissions:
    • pages_read_engagement — read post content & photos
    • pages_show_list — list your Pages
  5. After granting permissions, the Access Token field fills in. Copy this token.
  6. Important: This short-lived token expires in 1 hour. See Step 5 to convert it to a 60-day token, and Step 6 for a permanent token.

4 Paste credentials into index.html

Open index.html in a code editor. Search for FB_CONFIG near the bottom of the file (just before </body>). You'll see:

var FB_CONFIG = {
  pageId  : 'YOUR_PAGE_ID',          /* <- Replace this */
  token   : 'YOUR_ACCESS_TOKEN',     /* <- Replace this */
  pageUrl : 'https://www.facebook.com/share/1ErTQWb5hF/',
  limit   : 10,
  refresh : 15 * 60 * 1000
};

Replace the two placeholder values:

var FB_CONFIG = {
  pageId  : '123456789012345',       /* Your numeric Page ID   */
  token   : 'EAAxxxxxxxxxx...',      /* Your Page Access Token */
  pageUrl : 'https://www.facebook.com/share/1ErTQWb5hF/',
  limit   : 10,
  refresh : 15 * 60 * 1000
};

Save the file, then commit and push to GitHub. The live feed will appear immediately on the website.

5 Make the token long-lived (60 days)

The token from the Graph Explorer lasts only 1 hour. Exchange it for a 60-day token using this URL in your browser:

https://graph.facebook.com/v19.0/oauth/access_token
  ?grant_type=fb_exchange_token
  &client_id=YOUR_APP_ID
  &client_secret=YOUR_APP_SECRET
  &fb_exchange_token=YOUR_SHORT_LIVED_TOKEN

Where to find your App ID and App Secret:

  1. Go to your app at developers.facebook.com/apps
  2. Click Settings → Basic
  3. Copy the App ID and click Show to reveal the App Secret

Paste the full URL (with your values filled in) into your browser's address bar and press Enter. The response will be JSON containing a access_token value — that's your 60-day token. Replace the value in index.html with this new token.

⚠ Remember: 60-day tokens still expire. Set a calendar reminder to refresh the token every 50 days, or use the permanent System User token method in Step 6.

6 Never-expiring token (recommended)

A System User Access Token from Facebook Business Manager never expires — you set it once and forget it.

  1. Go to business.facebook.com/settings/system-users
  2. Click Add → create a System User named e.g. Website API User with role Admin.
  3. Click the System User → Add Assets → select your Facebook Page → grant Manage Page permission.
  4. Click Generate New Token → select your app (MPC Website Feed).
  5. Check these permissions:
    • pages_read_engagement
    • pages_show_list
  6. Click Generate Token. Copy the token shown — this is the only time it is displayed, so save it securely.
  7. Paste this token as token in FB_CONFIG. It will never expire.

If you don't have a Business Manager account: Use the 60-day token from Step 5 and refresh it every 50 days.

Permissions required

Permission Why it's needed Sensitive?
pages_read_engagement Read the posts, photos, and content on your Page No
pages_show_list Required to obtain a Page-scoped token No

You do not need publish_pages, ads_management, or any other elevated permissions. The feed is read-only.

Since your Facebook Page posts are already public, the data being accessed is not private. The token simply proves you authorise this app to read your public Page on your behalf.

Auto-refresh & update behaviour

Troubleshooting

Symptom Likely cause Fix
Portfolio images show instead of Facebook posts Token or Page ID not yet set, or token expired Check that pageId and token in FB_CONFIG are filled in correctly. Refresh the token if expired.
Skeleton shimmer cards never disappear JavaScript error or ad-blocker blocking graph.facebook.com Open browser DevTools → Console tab and look for errors. Disable ad-blocker to test.
Error "Invalid OAuth access token" Token is expired or malformed Generate a new token following Steps 3–5 above.
Error "Unsupported get request" or "Object does not exist" Page ID is incorrect Double-check the numeric Page ID from Step 1. Do not use the Page's vanity name — use the number.
Feed shows but images are broken Facebook CDN images have CORS or privacy restrictions Ensure posts are set to Public audience on Facebook. Private/Friends posts won't have publicly accessible images.
Token works today but breaks after 60 days Using a short-lived or 60-day token Switch to a System User token (Step 6) which never expires.

Facebook Graph API Explorer for testing:
You can test your token and Page ID directly at developers.facebook.com/tools/explorer. Run this query to verify:

GET /{YOUR_PAGE_ID}/posts?fields=id,message,full_picture,permalink_url&limit=5

If you see posts returned, the setup is correct. If you see an error, the token or Page ID needs fixing.

This guide is for the Motion Plus Corporation website internal use.
Facebook Graph API documentation: developers.facebook.com/docs/graph-api