【Web】如何在自己的網頁上加入 Facebook comment box 留言板，並擁有版主管理功能

tags: Web Design

Common 目標

1. 建立 Facebook 留言板
2. 整個網頁 (包含主頁、分頁) 共用的留言板，
   例如：Blogger，通常留言板會出現在每篇文章的最底端，而整個 Blogger 所有文章的留言板都是共用的
3. 讓版主擁有 Facebook 留言板的管理功能

步驟1：建立一個 APP 應用程式

1. 前往該網站：https://developers.facebook.com/apps

2. 註冊成為 Facebook 開發人員

3. 若已是開發人員，直接點擊右上角 新增應用程式

   

4. 輸入 APP 應用程式的名稱

   

5. 新增完成畫面

   

6. 點選左邊側邊欄，設定 >> 基本資料

7. 填資料：應用程式網域、隱私政策網址、服務條款網址、類別

   • 顯示名稱：應用程式名稱，可以輸入中文
   • 命名空間：應用程式英文名稱，唯一，不可重複
   • 應用程式網域：填入你的網站
   • 隱私政策網址：如果沒有，直接填應用程式網域
   • 服務條款網址：如果沒有，直接填應用程式網域

   

8. 同頁最下方，新增平台，選擇 網站，並填入你要加入 Facebook 留言板的網站

   

9. 開啟 APP 應用程式，並公開 APP 應用程式

   

   

10. 步驟1 完成，APP 應用程式 已上線

    

步驟2：App ID

• 應用程式編號，就是 App ID

  • 完成畫面，有出現
  • 設定 >> 基本資料，也有出現

  

步驟3：程式碼

1. 前往該網址：https://developers.facebook.com/docs/plugins/comments/

2. 找到 留言外掛程式的程式碼產生器

   • 按照第3點設定資料後，下方為 Facebook 留言板 預覽畫面

   

3. 設定資料

   • 回應的網址：你的網站
   • 寬度：可設、可不設
   • 貼文數量：要顯示的貼文數量，其餘會隱藏

   

4. 選擇你的 APP 應用程式及語言

   • Collect Analytics：是否要讓 FB 收集資料進行分析

   

5. 這段程式碼是要放在 body 最一開始的地方

   

6. 這段程式碼是要放在 body，也就是 Facebook 留言板 出現的位置

   

版主管理功能

1. 在 head 中加入
   • 你的應用程式編號：就是前面提到的 App ID，指定此應用程式的擁有者為版主 (管理員)
   • 個人帳號編號：透過該 網站查詢，指定 Facebook 特定個人帳號為版主 (管理員)

<meta property="fb:app_id" content="你的應用程式編號"/>
<meta property="fb:admins" content="個人帳號編號"/>

2. 在 留言審核工具 設定版主 (管理員)，可以設定多個 Facebook 個人帳號為版主

   • 版主：能審核留言、接收有人留言時系統發送的通知、設定黑名單

   

   

3. 設定 open graph

   • 教學文件：【Web】網頁應用：Open Graph 資料視覺化

4. 將第1點及第3點設定的資訊，進行 分享偵錯工具

   

   

5. 同上，檢查是否有抓到 fb:app_id 和 fb:admins

   

6. 回到你的網站，檢查 Facebook 留言板，是否有版主的審核工具

   • 審核工具：只有版主才有此權限，其他人看不到審核工具

   

7. 同上，除了審核工具，也可以直接針對留言進行管理

   

補充

1. 以上教學是整個網站共用同一個 Facebook 留言板
2. 但有的人會希望一個分頁一個留言板
   • 方法1：修改步驟3的第6點的程式碼，data-href=""，設定為空字串，會自動抓取當下的網址

     • 此方法有可能會出現 BUG：Object Invalid Value (物件的值不正確)

       

   • 方法2：參考 延伸閱讀

Extensive Reading 延伸閱讀

1. [小工具]幫 Blogger 安裝三種留言分頁 (含 Google+ 及 Facebook 留言板)
   https://www.wfublog.com/2014/07/blogger-comment-tab-google-plus-facebook.html
2. Object Invalid Value 參考解決辦法 (未必適用)
   https://stackoverflow.com/questions/38279551/facebook-comments-plugin-return-an-error-object-invalid-value

Reference 參考資料

1. 【站長必備】網站使用Facebok留言板，收到通知與管理
   https://ez3c.tw/3901
2. 在 Blogger 和網頁上嵌入 Facebook 留言板完整教學，附管理功能
   https://click-earn-btc.blogspot.tw/2018/02/blogger-facebook.html