2014.5.28 公告：最新版本請見：「Facebook 留言板安裝懶人包 + 留言email通知 + 自適應寬度」由於在上一篇「我如何進入痞客邦Facebook留言框管理介面 並成為管理員」發現了 FB 的 App ID 目前有安全上的漏洞，對「留言管理」這個功能有所疑慮，因此決定修改舊版「Facebook留言板安裝懶人包」的程式碼，去除 App ID 的部分。
雖然如此將不能管理留言，不過藉由 FB 提供的 API 仍可取得所有留言資訊，配合 Google 試算表將留言資訊以 email 寄給站長，不會錯失任何留言，且收到通知更為即時。
一、準備動作
1. 選擇是否使用「管理留言」功能
Blogger、WP 等可以修改範本的部落格，可以另外選擇使用「管理留言」的功能，與本文的程式碼並不衝突。而不能修改範本的部落格，以下步驟只要取得 "FB 管理者 ID" 即可跳「二、程式碼內容及參數」。
如果不擔心 App ID 安全問題、選擇管理留言的話，請依照舊版「Facebook留言板安裝懶人包」→「一、準備動作」，來取得 FB 管理者 ID 及 FB 應用程式 ID，並進行下一個動作。
2. 安裝 META 標籤
選擇使用留言管理功能的話，依照舊版「Facebook留言板安裝懶人包」→「三、Blogger 安裝」→「2013.11.22 補充」的內容，將 META 標籤的字串放在範本中
二、程式碼內容及參數
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
安裝程式碼之前，需修改一些參數，請對照以上程式碼行號：
G：紅色字串請填入自己的 email，並檢查不要拼錯，否則就收不到 email 通知了。
H：預設為不收到自己的留言通知；若要收到自己留言通知請將紅色字串改為 Y。
I：紅色字串請填入自己的 FB 管理者 ID，可參照「一、準備動作」得到此字串。
J：藍色字串請改為符合自己頁面寬度的像素值
K：預設值為最多顯示 5 則留言，可自行調整
L：這一行要設定的是 FB 留言框出現在網頁上的位置，請參照以下大標題，依不同部落格的安裝範例來修改。
M：FB 留言框官方有兩種顏色效果，預設值適合淺色為底的部落格；若部落格底色是深色，可將藍色字串改為 dark。
三、Blogger 安裝
1. 對程式碼不熟者
請到後台「範本」→「編輯 HTML」，搜尋
程式碼 L 行的參數即代表 Blogger 的留言區塊，因此可不修改，FB 留言框出現的位置會在原留言區塊的上方。
2. 對程式碼熟悉者
如果 FB 留言框想放在自訂位置，L 行參數可改為 "#fb-comment-area"，然後可參考「Blogger 範本__(三)文章及留言區塊的程式碼」，把全部程式碼放在範本中的自訂位置即可。
想先看 Blogger 的安裝效果可參考以下網頁：
四、非 Blogger 安裝
1. Xuite
- 先修改「二、程式碼內容及參數」的所有參數
- L 行的紅色字串改為 ".item_message"
- 新增自由欄位，所有程式碼複製進去，將此自由欄位放在側欄最下方即可。
- FB 留言框出現的位置會在原留言區塊的上方。
效果可參考以下範例網頁：
2. Pixnet
- 先修改「二、程式碼內容及參數」的所有參數
- L 行的紅色字串請改為 "#comment-text"
- 新增自訂欄位，所有程式碼複製進去，並將此自訂欄位放在側欄最下方即可。
- FB 留言框出現的位置會在原留言區塊的上方。
效果可參考以下範例網頁：
3. 對程式碼熟悉者
若想自訂 FB 留言框在部落格中出現的位置，可參考類似「Chrome開發人員工具」，來找出預定擺放區塊的 id 或 class，然後將 L 行的紅色字串，置換為 "#id字串" 或 ".class字串" 這樣的形式即可。
4. 其他部落格
其他部落格若想安裝 FB 留言框，但不知道 L 行參數如何修改，請再留言並提供網址，會再測試後告知如何修改，並增加到本文的安裝範例之中。
五、使用說明
由於 FB 的隱私性設定，在「不能管理留言」的情況下，以下情況的留言站長不一定能看到，例如：
- 非站長的朋友
- 留言者的身份非公開
不過安裝本文的程式碼後，所有的 FB 留言(包含以上兩狀情況)一定可以收到 email 通知。
email 內容大致如上圖，包含了以下資訊：
- 留言時間
- 部落格名稱及文章標題
- 文章網址
- 留言者暱稱
- 留言者 FB 網址連結
- 留言內容
如果有意跟留言者交流，可藉由以上資訊與聯繫留言者，互加好友後，原本無法顯示的留言便能出現在 FB 留言板了。
六、其他注意事項
1. 調整留言框 CSS 版面配置
請參考「舊版文章」→ 「五、調整留言框 CSS 版面配置」
2. 安裝完沒看到 FB 留言板？
請到後台檢查，是否啟用了「G+留言框」！因為他會排斥其他所有留言框，因此請在後台關閉「G+留言框」即可。若要另外安裝 G+ 留言框，可參考「Google+留言框與其他留言外掛並存」
3. Email 每日寄送額度
這個 email 通知的功能，是利用 Google 試算表上的「FormEmailer」這個程式，每天能夠寄出的 email
不太好的消息，最近「Google 官方公告」表示，免費的 google apps 帳號一天寄出郵件的上限下修到 100 封，付費的 google apps 帳號，目前查到的資料是一天 1500 封。
這個留言通知功能，與本站發佈的「推文系統」及「WYBOARD 部落格即時留言板」共用 email 寄送系統，如果發現某些網站使用了上述工具，而每日平均寄信使用量達到 5 ~ 10 封時，為了避免佔用其他使用者的額度，WFU 可能會要求該網站使用客製的試算表資料庫。
而如果需要使用自訂的試算表資料庫存放留言，以獲得獨立的寄信配額，請使用本站側邊欄的表單與我聯繫。
七、常見 FAQ 整理
若有常見問題產生，會整理在此：
◎ Xuite 貼上程式碼並儲存後，若想要重新編輯「自由欄位」的內容，會發現系統常常自行竄改程式碼，而導致程式無法執行。因此最保險的方法是將本文程式碼自行複製一份，將來欲修改「自由欄位」的內容時，全部重新貼上最為保險。
更多實用工具：
繼續支持網誌內建留言功能 :D
回覆刪除<5822551388556590269>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除我也是，因為如果FB不想玩了，那那些留言不就.......
<5557960129651633570>(以上內容請勿刪除,從括號之後開始留言)@Almighty Demiurge, @Pan Kuan, 純粹提供一個 FB 分享的機會, 在我網站的確 FB 留言也很少。
回覆刪除您好：先謝謝Wayne Fu的留言回覆通知該篇文章已發佈。
回覆刪除於此請教 此篇程式碼的第O行部分裡面的有個gmail部分是有什麼作用呢?
<2759354803751662835>(以上內容請勿刪除,從括號之後開始留言)就是本文最重要的功能 "留言以email通知" 啊～～
回覆刪除程式碼 G 行填入你的 email，而不是預設值(我的email)，你就能收到 email了。
email 寄送系統?? 這就是收到通知的原因??
回覆刪除我們「教會網誌」，可能會需要「客製的資料庫」寄送功能，長遠來說，以後會成為討論區，教會資工組，已經被我說服，準備要買獨立網址了！ 希望FB留言板，安裝後能一勞永逸....
<4564756777331049907>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除1.是的
2.有案子接我當然不會往外推啦 ^^ 只不過我的網站真的很少人用FB留言框留言就是了，當然也有可能是網站屬性的不同所導致，用Blogger的族群說不定很少用FB。所以你們可以評估一下，若確定FB留言框是必要的功能，且需要「客製資料庫」時，請利用「諮詢服務與提案合作」這個網頁跟我聯繫了！
Hello Wayne大 好久不見
回覆刪除我剛開始要裝新的 自適應 樣板
請問這個有辦法弄成自適應的版本?
我有參考一個社團裡的格主的文章
http://www.chodaict.com/2014/03/facebook-comment-responsive-design.html
但還是改不出來 Orz
<2893411354975436870>(以上內容請勿刪除,從括號之後開始留言)好的，自適應寬度要實現不難，我看看怎麼設計比較好～
回覆刪除<8301828248055496001>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除好的，麻煩大大了。
我發現現在新出的樣板幾乎全都是自適應的版本，都不在用手機版網頁了。我在安裝一些功能就有很多困擾...
先別說左右換頁或回到最頂端的浮動按鈕那些，我安裝 Wayne 大的 相關文章也遇到困擾了 Orz
在手機板上看會跑掉...
自適應真是令一個新的時代的開始阿...
<8234498080878861409>(以上內容請勿刪除,從括號之後開始留言)因為我沒使用自適應的版面，所以無從得知哪些小工具會有異常現象～不過沒關係，如果你裝了哪些小工具有問題，請到該篇文章留言，並提供異常現象的網址供參考，這樣比較好測試產生問題的原因～
回覆刪除<2772414928165437926>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除好，我自己也還在摸索，我先全部測試過一次以後，在統一一次在那些文章下面留言吧。真是麻煩大大啦
請問我突然收不到FB留言通知該怎麼解決?
回覆刪除我留言數是設定顯示100
<2042872440452278933>(以上內容請勿刪除,從括號之後開始留言)請附上收不到留言通知的文章網址。(留言數的設定沒有影響)
回覆刪除<4574001378543507175>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除http://blog.xuite.net/c091170/sad/221757027 還是說同時於 Facebook 上發表 沒打勾的發`言會收不到 謝謝作者 :)
<8236910717451081266>(以上內容請勿刪除,從括號之後開始留言)1. 與有無打勾無關
回覆刪除2. 在你家測試留言，某幾篇一定能執行程式(會有通知)，但某幾篇一定不會執行程式 → 目前看不出原因再哪
暫時推測與你側欄裝的 FB 浮動區塊相衝突，請按以下步驟檢查：
A. 暫時移除側欄 FB 浮動區塊，看看能否恢復正常
B. 如果是這個原因的話，請把你側欄 FB 浮動區塊的程式碼 mail 給我(waynefu.g@gmail.com)
<4480251333319799755>(以上內容請勿刪除,從括號之後開始留言)已寄信給您~
回覆刪除<6771353153306361531>(以上內容請勿刪除,從括號之後開始留言)你有移除側欄 FB 浮動區塊來測是嗎? 請先回報測試結果，如果不是這個原因的話，單單給我程式碼沒用喔。
回覆刪除我想请问BLOGGER和面子书的留言板是不是不能同时拥有？
回覆刪除因为有放了两个之后虽然看得见，但是只要BLOGGER留言板有留言，面子书的留言板就会消失。
是技术问题还是本来就要二选一？ 谢谢你
<1471610656145926046>(以上內容請勿刪除,從括號之後開始留言)你有裝本文的程式碼嗎？有的話請留個出問題的網址，才能檢視問題所在～
回覆刪除