前言

長久以來在 WordPress Taiwan 正體中文WordPress不懂程式的新手站長 – 網站帶路姬學園 經常會看到許多人提到一個問題:能否將WP留言板透過臉書留言板進行取代?

Girl in a jacket

(示意圖)

沒問題,我們聽到您的請求了!於是嘗試實作 臉書留言板(FB Comments) ,實作的方式有許多,這邊我們沒有透過外掛進行實作,如果有興趣用外掛實作的讀者可以考慮使用 WpDevArt Social comments – WordPress 外掛 | WordPress.org Taiwan 正體中文 進行實作。

使用臉書留言板的好處在於:

  1. 減少留言寫入資料庫 – 降低資料庫負擔
  2. 避免被奇怪機器人大量洗版( 加個驗證碼 – Google reCAPTCHA 中提到的問題)
  3. 增加留言便利性 – 只要有臉書帳號就不用填寫必填欄位(ex 名字、信箱等等)

那麼無外掛實作開始囉~

進入 facebook developers 註冊新 App

create apps

這邊只要有臉書帳號就能新增 App,首先點選右上角 My Apps,進入後點選 create apps

Girl in a jacket

新增 manage business integrations 方案

和舊版介面不太一樣,不過其他 App 描述看來都不是我們要的,於是選擇 manage business integrations,接著按 Continute

Girl in a jacket

輸入描述

App Display Name:不是很重要,可以打自己喜歡的
App Contact Email:輸入自己聯絡信箱,App有問題時會寄信
接著點擊 Create App,就會產生一個新的App

Girl in a jacket

輸入WordPress 網頁 Domains

Settings -> Basic 中進行設定
App Domains:最重要的環節,輸入自己 Domains
Privacy Policy URL:網頁Privacy Policy URL,沒有的話一樣輸入 domains 就行。

好了後按下 Save Changes,這邊重要的是 App ID,等等會需要用到可以先複製。

Girl in a jacket

取得 JS SDK 嵌入 WP 程式

取得 JS SDK Code

這邊我們回到剛剛的 FB Developer Comments – Social Plugins – Documentation – Facebook for Developers ,按下 Get Code

Girl in a jacket

Step1 切換成剛剛我們產生的App

Girl in a jacket

Step 2 程式放進 header.php

外觀>佈景主題編輯器>佈景主體頁尾(header.php) 的 下面

<body <?php body_class(); ?>>
    <!-- 新增臉書粉絲頁留言板 -->
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v9.0&appId={YOUR_APP_ID&autoLogAppEvents=1" nonce="XXXXXXXX">
    </script>

繼續待在 header.php,我們還要在 裡面加入 標籤,這樣我們才能在網頁上直接管理留言,這邊的ID就是剛剛的 App ID

<head>
    <!-- 新增臉書留言板 -->
    <meta property="fb:app_id" content="{YOUR_APP_ID}" />
</head>
Step 3 程式放進 留言 block

這邊可能大家要放的位置會不太一樣,有些人可能是更改 comments.php,但是像我們的佈景主題是需要更改single.php,簡言之,註解原來留言區塊變且更新成FB Comments
此外,記得將 data-href後改成 “

if ( comments_open() || get_comments_number() ) :?>
<!-- 原本留言板 -->
<?#phpcomments_template('', true);?>
<div class="fb-comments" data-href="<?php the_permalink() ?>" data-width="" data-numposts="5"></div>
<?php endif; ?>

如此應該就會拿掉原有預測留言板並且新增 FB Comments 成功

Girl in a jacket

進入 FB 留言後台查看留言並進行設定

登入網址:
https://developers.facebook.com/tools/comments/{YOUR_APP_ID}
這邊我們能看到哪些臉書帳號進行留言,制定排序規則,甚至可以針對一些惡意破壞帳號制定黑名單

Girl in a jacket

以上大概就是整個 FB 留言版嵌入的介紹,希望對大家有幫助~
也歡迎大家多多發言許願,或許下次就能解決您的問題哦!!!