「FB 留言外掛程式」是協助架站時，安裝率滿高的一個工具。過去已經寫過「Facebook 留言板安裝懶人包」，由於 FB API 改版多次，加上現在的 API 版本已經支援 RWD，決定將安裝程式碼改得更為精簡，比舊版的 code 少了一半以上，本篇可以視為「FB 留言框安裝懶人包 V2」。大體來說，部落格站長要安裝 FB 留言板是很困擾的事，依照官方安裝教學很難成功，因為官方程式碼是針對單篇文章網址，那麼每篇文章要怎麼出現留言板就很麻煩。就算有辦法讓每篇文章都出現留言框，但有人留言後又收不到通知，等於跟沒裝一樣。
因此本篇除了提供最簡單的安裝方式，也會用 FAQ 的方式，逐一回答常見的問題如何解決。
一、安裝懶人包
1. 部落格平台
基本上，台灣的免費部落格平台因為無法修改範本，所以無法管理留言(也收不到留言通知)。本篇的安裝懶人包，只適合 Blogger、WP 等可以修改範本的平台。
而無法修改範本的部落格平台，請參考「FB留言板安裝懶人包__留言email通知」來安裝這個版本。
2. 安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
以 Blogger 為例，請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
如果是 Blogger 平台的話，直接儲存後就可使用了，FB 留言框會自動出現在 Blogger 官方留言板上方。
非 Blogger 平台，可刪除 B、V 這兩行。
如果想放在別的位置，以下參數修改請參照以上程式碼行號：
C：藍色字串 "light" 代表淺色背景；若網站為深色背景，可改為 "dark"。
C：藍色數字 5 代表顯示 5 則留言，可改為自訂的留言數量。
G：紅色字串 "comments" 為 Blogger 官方留言板的 HTML 元素 ID 字串。若 FB 留言板要出現在別的位置，請更改為其他區塊的 ID 字串。如果別的區塊沒有 ID、而是 Class 的話，因以上原始碼沒有壓縮，請自行修改程式碼套用。
H：目前的 FB API 版本為 3.1，將來若 3.1 版被淘汰時，可將此數字改為更新的版本。
想要先看安裝後的效果，可前往展示頁面：
二、如何管理留言？
安裝完 FB 留言框後，允許修改部落格範本的站長(Blogger、WP 等平台)，請繼續以下流程來設定，就可以管理留言、以及收到留言通知。
1. 取得 FB 管理者 ID
進入這個網址：https://findmyfbid.com/
輸入 Facebook 帳號的網址後，按下「Lookup Numeric ID」即可取得管理者 ID。
2. 取得 FB 應用程式 ID
參考這篇教學「申請 Facebook 應用程式 APP ID 流程」即可取得。
3. 修改範本
在範本中找到
<meta content='100006369xxxxxx' property='fb:admins'/>
<meta content='457090704xxxxxx' property='fb:app_id'/>第一行的紅色字串請改為為自己的管理者 ID。
第二行的紅色字串請改為為自己的應用程式 ID。
儲存後即完成所有設定，如果範本中已經安裝過這兩行，就不要再重複安裝。
如果都設定正確的話，以後 FB 留言框就會出現「審核工具」的按鈕，如上圖紅框的位置。
三、如何收到留言通知？
如果以上流程都進行順利的話，只要有人使用網站的 FB 留言框留言，那麼當你進入 FB 網站時，就會收到留言通知，就像下圖這樣：
如果一直都沒有收到留言通知的話，可以試著檢查以下幾點：
1. FB 留言工具的設定頁面
進入以下網址：
如上圖，選擇你之前建立(或管理)的應用程式名稱，例如我為本站建立的名稱為 "WFU BLOG"。
借用之前使用的圖片，上圖的「啟用通知」檢查是否為 "開啟"。
2. FB 偵錯工具
設定完「二、如何管理留言？」的流程後，FB 並不會馬上更新每個網頁的快取，因此短時間之內可能無法收到留言通知。
可參考「分享文章到 Facebook 的 Meta 設定」→「Q7：更改後 FB 還是顯示原來的資訊？」，利用 FB 偵錯工具，檢查我們設定的 Meta 資訊(管理者 ID 及 App ID)，是否已經被 FB 收錄。
如果快取資料沒有抓到正確的 管理者 ID 及 App ID，那麼強制更新快取，就可以收到留言通知了。
四、如何收到即時的留言通知？
所謂的留言通知，是指進入 FB 網站後，才能看到留言訊息的通知。那麼不常上 FB 網站的人，不就無法即時知道何時有人用 FB 留言框留言了嗎？
很多公司或店家會在網站放 FB 留言框，能夠越快收到 FB 留言訊息，代表越快有成交機會，因此即時的 FB 留言通知會有特定市場的需求性。
如果不排斥裝各種 APP 或外掛的話，可參考「安裝各種平台的 Messenger 即時通」，在不同的瀏覽器、不同的行動裝置安裝 FB 即時通 APP，不用進入 FB 網站就能收到通知。
如果留言需要即時的 Email 通知，可安裝「FB留言板安裝懶人包__留言email通知」這個版本。
五、為何無法審查留言？
走完本篇的安裝流程後，有可能會發現 FB 留言板無法出現「審核工具」的功能。
這個狀況跟無法收到留言通知的原因類似，可能是 FB 尚未更新快取的原因。那麼可依照「三、如何收到留言通知？」→「2. FB 偵錯工具」的步驟進行，強制更新 FB 快取即可。
六、如何讓留言與 FB 粉絲團同步？
這也是詢問率很高的問題，不少站長都希望讀者使用 FB 留言板時，能夠自動將留言同步到 FB 粉絲專頁。
可參考這篇「讓 Facebook 留言框與粉絲團的留言能夠即時同步」的步驟進行，試試看能否成功。
2019.1.24 補充：這個功能 FB 前陣子已經取消
七、各種 FB 工具無法顯示(讚、粉絲團、留言板)
2017.4.26 新增：最近不少讀者回報，各種 FB 工具無法顯示，例如讚按鈕、粉絲團、留言板等等。由於無法顯示的可能性太多了，大致羅列以下狀況，需要讀者自行交叉測試檢查，才能找到真正的原因：
- 可參考「幫網站嵌入 FB 粉絲團專頁」→「一、官方作法」→「2. 安裝程式碼」，請檢查整個網站，是否曾在多處安裝了官方程式碼，那麼彼此就可能打架，導致 FB 工具無法正常執行。
- 請參考「解決 FB 各種異常現象」，回想最近是否有過渡使用 FB，而遭到 FB 封鎖
- 也有可能只是 FB 伺服器暫時異常，過一段時間就會自己恢復了。
- 留言 #7 提到有的瀏覽器可看到、有的看不到 → 說不定看到的是快取畫面，最好用無痕模式測試，才能確定是看到真實的畫面。
以上大致整理了 FB 留言板使用上常見的問題，日後若還有其他實用的 FAQ，會在本文持續更新。
更多 Facebook 相關文章：
我真的是跟FB不合，弄好沒出現「審核工具」的按鈕，留言後粉絲頁也沒出現在那個地球圖示，躲到通知裡面的留言中，重點是粉絲頁名義在blogger中留的不能刪除嗎，我找不到辨法刪除，粉絲頁中刪除也只是單方面，應該是有連動但狀況怪怪的。
回覆刪除"沒出現「審核工具」的按鈕" → 檢查一下「二、如何管理留言？」、以及「五、為何無法審查留言？」的步驟吧。
回覆刪除這一點解決後，才能進行另外的「留言同步」功能。
你提到不能刪留言，先想辦法讓「審核工具」的按鈕能顯示，就可管理留言了。
看到審核工具鈕了，原來只有最新的一篇文章中沒出現，其它舊的都有，除錯那也更新過了，另外粉絲團的名義發的文，是否只能隱藏，不能刪除，最後感謝抽空回答。
刪除我仍不能在每一個FB POST中，與Blogger POST COMMENT同步。
回覆刪除請見 http://www.wfublog.com/2016/11/fb-comment-mirroring-install.html 這篇的說明
刪除您好，拜讀過大大將FB留言板與按讚鈕使用在BLOGGER上的文章。最近FB推出引言分享的外掛，請問是否也能在BLOGGER上順利使用呢? 謝謝!
回覆刪除你好，可參考 FB 官網「引文外掛程式」的安裝說明頁面：https://developers.facebook.com/docs/plugins/quote?locale=zh_TW
刪除假設你已經安裝過 FB 留言板，那麼主要程式碼不用再安裝，在範本中隨意找個地方，譬如在 </body> 的前一行，插入以下程式碼即可：
<div class="fb-quote"></div>
請問有顯示網站中所以FB留言板的最新回應在網站側邊的功能嗎
回覆刪除可能要使用 FB API 才有辦法做到
刪除你可以用 DISQUS
站長您好，
回覆刪除請問有辦法在寬度不為100%的情況下，把FB留言框向右對齊嗎？
我想要設定的網頁是：
http://natureway312.blogspot.tw/2017/03/blog-post.html
可以看見底下原生留言板的位置和FB留言框是沒有對齊的，我嘗試過加入margin 屬性但沒有生效
你好，請參考留言注意事項「若詢問 CSS ...，請參考...」，CSS 相關的問題要請學習使用 chrome 開發人員工具 http://www.wfublog.com/2012/10/chrome-developer-tool.html 以及瞭解 CSS 相關語法後，就知道如何修改。
刪除不過看了你的網頁，使用了 Blogger 最新的 RWD 範本，建議你參考 http://www.wfublog.com/2017/03/blogger-rwd-official-template.html → 除非 CSS 已經很純熟了，不然 RWD 範本最好避免調整跟版面有關的東西。
我裝的留言板和按讚紐等等之類的突然都不能顯示了
回覆刪除是blogger的問題還是facebook的問題？
我也是遇到跟你一樣的問題在差不多的時間點QQ
刪除不能顯示的問題，可參考這篇 http://www.wfublog.com/2015/11/facebook-block-web-post-url-confirm-button.html
刪除我後來發現用ie可以看到FB留言框,但chrome怎麼嘗試都還是弄不出來,但還是謝謝Wayne大大的幫忙
刪除不客氣，我補充了一些事項，請參考「2017.4.26 新增」的內容。
刪除站長你好,
回覆刪除我Blogger裝了懶人包 V2, 手機版無法同步留言...
(自動帶入?m=1 後, 被當成不同網站了)
試了不少方法都無解... 不知道你這邊是怎麼處理的??
p.s. M.的location.pathtname 是不是多一個h了XD??
謝謝提醒喔，M 行真的多了一個字母。
刪除我的手機版沒裝 FB 留言板，不過手機版網址的確會自動加上 ?m=1，所以會被 FB 當成不同網址。那麼解決方法就是去掉 ?m=1 這個字串。
我已經修改了 M 行的程式碼，請修改你的 M 行內容，應該就可以了。
站長你好,
回覆刪除昨天修改過的M行 elem["data-href"] 還是無法正確設定...手機版就無法同步...
但是我改成setAttribute就搞定了!!
elem.setAttribute("data-href", "https://" + location.hostname + location.pathname.split("?")[0]);
原來真的是網址問題!!!
感謝你的教學 :D
原來如此，可能是瀏覽器版本比較舊吧，不支援 ["data-href"]，需要使用 setAttribute，不過能解決問題就好~ ^^
刪除你好, 在fb管理工具上方看到這一串
回覆刪除Reminder: Graph API v2.3 will be deprecated on July 10, 2017.
請問這對留言板有影響嗎
你好，我想有沒有影響，你直接操作留言板就知道了。
刪除想請問 怎麼使用粉絲團帳號回覆留言呢？
回覆刪除我之前是使用粉絲團管理者得帳號來設定應用程式，但是要回覆時都只能用個人臉書，無法使用粉絲團管理者身份……
沒遇過你的狀況耶 我進入 FB 粉絲團 留言身份自動就會有選項可以切換
刪除可以 google "無法登入粉絲團管理者" 找找看有沒有你的答案
版主您好，謝謝您提供這麼詳細的教學，想請問 我用電腦版安裝"FB 留言框安裝懶人包 V2 "之後，可以看到 可使用FB 留言，但是用手機打開部落格網誌，卻看不到可以使用FB留言的功能，請問要參考哪一篇文章設定呢? 謝謝您~
回覆刪除你好, 請參考 http://www.wfublog.com/2014/04/blogger-mobile-template-custom-tips.html ，Blogger 行動版要改用「自訂」範本，本篇的程式碼才會生效。
刪除不好意思想請問留言審核功能是否可以用在個人網頁呢?
回覆刪除目前已經做了一些初步的設定，然後留言外掛程式也可以正常啟用，但就是無法啟用留言審核功能，想請版大是否可以幫忙查看是否有所疏漏呢?真的非常感謝QQ
1.https://i.imgur.com/5hebHkJ.jpg (留言外掛程式可以啟用)
2.https://i.imgur.com/K4byJUK.jpg (fb app id也有寫入，官網說admin擇一，反覆測試同時寫或是二選一都不行)
3.https://i.imgur.com/goPPXSE.png (沒有讀取到任何留言)
4.https://i.imgur.com/656iOY0.jpg
5.https://i.imgur.com/0DSe51S.jpg (初步設定似乎都已完成不知是否有所疏漏，望請指正非常感謝QQ)
如果你覺得該做的動作都有做，那麼只好去設定的畫面，所有選單都叫出來看看可能哪裡有問題 https://2.bp.blogspot.com/-M4m4UVIg36k/WDrRy_5op9I/AAAAAAAAOlw/ONDJ-vhWlyYpkI-6HEGju_JWVl_TINdwgCLcB/s640/fb-comment-mirroring-5.jpg
刪除不然就是試試「五、為何無法審查留言？」的步驟。
版主您好，謝謝您的文章，我的留言板是放在Blogger，一直都是很正常地在運作。但是在前幾天我在審核的右面看到有一行通知，請看附圖：
回覆刪除https://lh3.googleusercontent.com/-CS8pq6vqlLE/W1HpDKNANnI/AAAAAAAAXYE/mIDOklUKmkM1RvKPPX8sOil3fLzkoY2NQCHMYCw/2018-07-20_214756.jpg
我這幾天自己看了好久，還是看不懂是要提交審查甚麼鬼東西。請問如果我沒有要提交甚查，就這樣過了它上面寫的時限，這個就不能用了嗎?
這個訊息每個有申請 FB API 的人都會收到，如果你不是程式開發人員可以不用理會沒關係。
刪除好的，非常感謝 :)
刪除您好, 我在Blogger的程式碼找不到/body怎麼辦
回覆刪除請按本文說明操作：
刪除請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋....
Wanyne
刪除您好，請問一下WP的/body是在主題編輯器的哪裡? 謝謝~
你好，WP 平台的問題建議到相關討論區詢問喔
刪除1、出現在blog，在blog上用FB留言框留言有時會有時不會會出現(圖：651)，若留言有時會有時不會自行貼出一則新文(我不確定這樣是否屬正常功能？)(圖：654)
回覆刪除2、FB 留言框未出現， FB 偵錯工具顯示(圖：655)
3、檢視了，並未出現留言同步的選項。
實在找不出問題，請您幫我看看。謝謝。
https://draft.blogger.com/blogger.g?blogID=4574346923574503869#templatehtml
麻煩跟您今天另外一則留言一樣，請留下網站的網址，上面留的是後台網址，沒有人可以進入喔。
刪除您好，我看到的上一則留言是2018.10月的，我想你需要的應是這個。謝謝你。https://evateng.blogspot.com/
刪除版主您好
刪除我跟這位版友一樣
從昨天開始也有FB留言框不見的問題
網址 https://duck60402.blogspot.com/
還請您能撥空幫我看看 感謝
@eva, Axel,
刪除測試的結果，似乎是瀏覽器對 js 的解讀不一樣了，我已經重新修改語法，測試過沒問題了，請刪除原本程式碼，重新安裝即可。
需要注意的是，如果你的網站現在是 https，那麼可能會導致之前的留言抓不到，因為舊的程式碼是一律抓 http 網址，所以 FB 留言框會從 http 網址抓留言。而現在改成根據目前網址狀態來抓網址，代表會抓 https 網址。(如果你的網址現在仍是 http 就沒影響)
如果想讀取以前的留言，請將程式碼 M 行的 location.protocol 改成 "http" 即可。
剛上傳照片時說網路不穩定稍後再試，等很久還是無法成功，所以我上載到dropbox了，https://www.dropbox.com/sh/j259frs6tk5ftv1/AADIamXTl3IaBcIzt33Q13Uia?dl=0
回覆刪除不好意思最近 Google 關閉了上傳圖片的 API，所以上傳圖片功能失效了，我會盡快想替代方案辦法~
刪除不會的，很謝謝你這麼詳盡的教學步奏。
刪除我看你的截圖有很多張，如果重新安裝程式碼還有問題請再另外提出了。
刪除站長您好，我變更程式碼了，目前遇到的狀況是：在blog的FB留言框留言，FB網站未出現留言通知。
回覆刪除檢查FB 留言工具的設定頁面，並沒有顯示留言同步「啟用通知」這個選項訊息。
FB偵錯工具顯示：缺少以下必要的屬性：og:type, og:image
再麻煩您協助了，謝謝。
你好，我只能協助你安裝程式碼，其他的問題屬於 FB 設定的問題，我沒有權限幫你看，所以你只能按本篇的流程詳細再操作幾次，想辦法找出問題喔。
刪除"在blog的FB留言框留言，FB網站未出現留言通知。" → 你的留言框要能出現「審核留言」，才能收到留言通知
"沒有顯示留言同步「啟用通知」這個選項訊息" → 這功能 FB 前陣子取消了，我來修改一下內犉
謝謝您，已經協助非常多了。再次感謝！
刪除不客氣，對了，你之前傳的 dropbox 圖片，放在 Blogger 上的 FB 留言框有「審核留言」，那麼 FB 的設定「啟用通知」有開啟就能收到通知，參照本文這張圖 https://2.bp.blogspot.com/-M4m4UVIg36k/WDrRy_5op9I/AAAAAAAAOlw/ONDJ-vhWlyYpkI-6HEGju_JWVl_TINdwgCLcB/s640/fb-comment-mirroring-5.jpg
刪除您好，等了一天後FB就可以收到留言通知了。如站長文章所言，要等一些時間讓FB更新每個網頁的快取。謝謝您。
刪除感謝站長的教學，過往我還很勤勞更新Blogger的時期，就從這汲取不少好資訊。
回覆刪除最近想回來再寫點部落格，嘗試使用FB相關功能在部落格中。
但加入上面的語法之後，不知為何無法FB留言框無法自適應寬度。
昨晚把部落格樣式的語法查看許久，還是搞不清楚是哪邊出錯。
畢竟我對相關語法並不是很熟，加上真的很久沒碰了，來此請教大神幫忙看下。
我的部落格 https://www.flamefox.org/
不客氣，查了一下官網，應該是 FB 版本有更新，我已更新安裝碼，請在程式碼 C 行新增參數 data-width="100%"
刪除這樣應該就可以了。
修正過後，已可正常顯示。
刪除謝謝站長。
請問 要怎麼在 不同分頁 產生不同留言板?
回覆刪除您好，請問有人在文章底下的FB留言框留言，但我自己的臉書卻收不到有人留言的通知，該如何解決呢？
回覆刪除「三、如何收到留言通知？」皆已設定完成，通知也有開啟，但就是收不到有人留言的通知。
但是，打開您提供的Meta for Developers的那個網址，可以看到近期的留言數，卻看不到詳細的留言內容，如附圖。
https://drive.google.com/file/d/1DHj0rnyl1e8priJ7SGGzjuFN0jFtvZRR/view?usp=drivesdk
不知道有沒有解決方式？謝謝！
（會知道有人留言，是因為我用自己的小號去留言測試，但自己的臉書卻一直沒有通知）
請先確定有完全按照本篇流程做完所有必要動作
刪除