Facebook留言板安裝懶人包__各大部落格通用(附Blogger, Xuite, Pixnet範例)

Facebook 留言框要成功安裝在部落格不是容易的事，從官方提供的安裝方式來看，只能裝在 Blogger、Wordpress 這種開放自訂範本的部落格。但就算在 Blogger、WP，仍然常看到試遍各種網路教學、還是找不出安裝失敗因素的各種反應。其原因主要在於安裝步驟多，使用者不容易找出是那個步驟導致失敗。

前陣子安裝完 FB 留言框後，研究一下整個流程，覺得是有辦法將安裝程式碼的動作簡化到最少──只有一個步驟。利用本文封裝後的程式碼懶人包，以後安裝 FB 留言框就不會是苦差事了。而且更棒的是，由於只有一個步驟，如此只要是支援 js 的部落格，都是有可能成功安裝 FB 留言框的。

一、準備動作

雖然安裝懶人包程式碼只要一個步驟，但仍須事先取得 FB 的身份識別碼，因此請先進行以下動作：

1. 取得 FB 管理者 ID

進入這個網址：http://findmyfacebookid.com

輸入 Facebook 帳號的網址後，按下「Lookup Numeric ID」即可取得管理者 ID，類似 100006369483483這樣的一串數字。


2. 取得 FB 應用程式 ID

由於我一、兩年前就申請過 appID，也不太確定現在的最新程序應該是如何，以下這兩篇是比較清楚的圖文解說：「如何申請Facebook應用程式API(APP ID)的金鑰密碼」、「安裝並管理facebook留言板」。

這兩篇一個有提到要手機驗證、一個沒有，所以請依照自己的狀況，兩篇交互查閱吧！最終能夠得到 FB 的 app ID 就行了，類似 457090704320320這樣的一串數字。

因此以本文來說，取得 app ID 是比較稍微有變數的一部份，能成功的話之後問題就不大了。

二、程式碼內容及參數

安裝程式碼之前，需修改一些參數，請對照以上程式碼行號：

D：紅色字串請改為「一、準備動作」→「1. 取得 FB 管理者 ID」的字串

E：紅色字串請改為「一、準備動作」→「2. 取得 FB 應用程式 ID」的字串

F：藍色字串請改為符合自己頁面寬度的像素值

G：預設值為最多顯示 5 則留言，可自行調整

H：這一行要設定的是 FB 留言框出現在網頁上的位置。稍微解釋一下──

• 如果對程式碼不熟的使用者，請參照以下大標題，依不同部落格的安裝範例來修改。
• 如果對 HTML 很熟悉的使用者，想自訂 FB 留言框的擺放位置，可參考類似「Chrome開發人員工具」，來找出預定擺放區塊的 id 或 class，然後將 H 行的紅色字串，置換為 "#id字串" 或 ".class字串" 這樣的形式即可。

三、Blogger 安裝

請到後台「範本」→「編輯 HTML」，搜尋 </body>這個字串，找到後在此字串的前一行，插入「二、程式碼內容及參數」的程式碼即可。

程式碼 H 行的參數即代表 Blogger 的留言區塊，因此可不修改，FB 留言框出現的位置會在原留言區塊的上方；若 FB 留言框想放在別的地方，請按照 H 行的說明進行。

想看效果可參考以下範例網頁：

• Blogger 安裝 FB 留言框範例

四、非 Blogger 安裝

非 Blogger 平台的部落格，除了 WP 以外，大致都需要安裝到側邊欄的小工具或自訂欄位，最好放在最下面的位置；且程式碼 H 行的參數就一定要修改了，請參考以下的範例安裝。

1. Xuite

• 先修改「二、程式碼內容及參數」的所有參數，H 行的紅色字串請改為 ".item_message"
• 新增自由欄位，所有程式碼複製進去，並將此自由欄位放在側欄最下方即可。
• FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁：

• 雨櫻 x 羽櫻 x 語櫻 :: 隨意窩 Xuite日誌

2. Pixnet

Pixnet 本身有提供 FB 留言框的 app，可直接在「應用市集」安裝。測試之後發現，Pixnet 會將這個 app 的位置綁定在文章結尾處而無法移動。因此，如果想讓 FB 的留言集中在部落格原本留言區塊的話，那麼就可使用本文的程式碼，請依以下步驟：

• 先修改「二、程式碼內容及參數」的所有參數，H 行的紅色字串請改為 "#comment-text"
• 新增自訂欄位，所有程式碼複製進去，並將此自訂欄位放在側欄最下方即可。
• FB 留言框出現的位置會在原留言區塊的上方。

想看效果可參考以下範例網頁：

• Pixnet 安裝 FB 留言框範例

其他部落格若想安裝 FB 留言框，但不知道 H 行參數如何修改，請再留言並提供網址，會再測試後告知如何修改，並增加到本文的安裝範例之中。

五、調整留言框 CSS 版面配置

如果對留言框的版面效果不滿意，例如 Xuite 剛安裝後可能會貼住左邊界，那麼就需要設定 CSS 參數，例如設定邊界值 margin 的參數。以下提供的範例，其參數內容請依自己需求調整。

1. 由於每個部落格的設定不一樣，如果知道部落格的 CSS 如何設定的話，可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin: 10px;
}

2. 如果不清楚部落格 CSS 如何設定的話，那麼最簡單的方法(但網頁執行效率稍差)，就是在程式碼 A行與 B行之間，插入以下程式碼──

<style>
.fb-comments {
margin: 10px;
}
</style>

3. 經測試後 Pixnet 的 FB 留言框會與下方原本的留言貼太近，因此下邊界值最好設定多一些，可在 CSS 設定區域加入以下程式碼──

.fb-comments {
margin-bottom: 20px;
}

六、管理 FB 留言

如何管理 FB 的留言，網路上已經有非常多教學，因此就不用自己再寫一次，以下直接給連結。

• 如何在 Blogger 插入 Facebook 留言框？

這篇請直接看 Step 7～8，可讓管理者收到留言通知

• WordPress加入Facebook留言系統

這篇的後半段，對於如何管理留言講得比較仔細。


最後，如同「四、非 Blogger 安裝」所提，其他部落格若安裝上有問題，歡迎留言詢問，會盡量補齊其他部落格的安裝方式。