2014.5.28 公告：最新版本請見：「Facebook 留言板安裝懶人包 V2」Facebook 留言框要成功安裝在部落格不是容易的事，從官方提供的安裝方式來看，只能裝在 Blogger、Wordpress 這種開放自訂範本的部落格。但就算在 Blogger、WP，仍然常看到試遍各種網路教學、還是找不出安裝失敗因素的各種反應。其原因主要在於安裝步驟多，使用者不容易找出是那個步驟導致失敗。
前陣子安裝完 FB 留言框後，研究一下整個流程，覺得是有辦法將安裝程式碼的動作簡化到最少──只有一個步驟。利用本文封裝後的程式碼懶人包，以後安裝 FB 留言框就不會是苦差事了。而且更棒的是，由於只有一個步驟，如此只要是支援 js 的部落格，都是有可能成功安裝 FB 留言框的。
一、準備動作
雖然安裝懶人包程式碼只要一個步驟，但仍須事先取得 FB 的身份識別碼，因此請先進行以下動作：
1. 取得 FB 管理者 ID
進入這個網址：https://lookup-id.com/
輸入 Facebook 帳號的網址後，按下「Lookup Numeric ID」即可取得管理者 ID，類似 100006369483483 這樣的一串數字。
2. 取得 FB 應用程式 ID
參考這篇教學「申請 Facebook 應用程式 APP ID 流程」即可取得。
因此以本文來說，取得 APP ID 是比較稍微有變數的一部份，能成功的話之後問題就不大了。
二、程式碼內容及參數
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
安裝程式碼之前，需修改一些參數，請對照以上程式碼行號：
D：紅色字串請改為「一、準備動作」→「1. 取得 FB 管理者 ID」的字串 (Blogger 可省略此動作)
E：紅色字串請改為「一、準備動作」→「2. 取得 FB 應用程式 ID」的字串 (Blogger 可省略此動作)
F：藍色字串請改為符合自己頁面寬度的像素值
G：預設值為最多顯示 5 則留言，可自行調整
H：這一行要設定的是 FB 留言框出現在網頁上的位置。稍微解釋一下──
- 如果對程式碼不熟的使用者，請參照以下大標題，依不同部落格的安裝範例來修改。
- 如果對 HTML 很熟悉的使用者，想自訂 FB 留言框的擺放位置，可參考類似「Chrome開發人員工具」，來找出預定擺放區塊的 id 或 class，然後將 H 行的紅色字串，置換為 "#id字串" 或 ".class字串" 這樣的形式即可。
I：FB 留言框官方有兩種顏色效果，預設值適合淺色為底的部落格；若部落格底色是深色，可將藍色字串改為 dark。
三、Blogger 安裝
請到後台「範本」→「編輯 HTML」，搜尋
並在
<meta content='100006369483483' property='fb:admins'/>
<meta content='457090704320320' property='fb:app_id'/>以上第一行的紅色字串請改為為自己的管理者 ID；第二行的紅色字串請改為為自己的 app ID；
程式碼 H 行的參數即代表 Blogger 的留言區塊，因此可不修改，FB 留言框出現的位置會在原留言區塊的上方；若 FB 留言框想放在別的地方，請按照 H 行的說明進行。
想先看 Blogger 的安裝效果可參考以下網頁：
四、非 Blogger 安裝
非 Blogger 平台的部落格，除了 WP 以外，大致都需要安裝到側邊欄的小工具或自訂欄位，最好放在最下面的位置；且程式碼 H 行的參數就一定要修改了，請參考以下的範例安裝。
1. Xuite
- 先修改「二、程式碼內容及參數」的所有參數，H 行的紅色字串請改為 ".item_message"
- 新增自由欄位，所有程式碼複製進去，並將此自由欄位放在側欄最下方即可。
- FB 留言框出現的位置會在原留言區塊的上方。
想看效果可參考以下範例網頁：
2. Pixnet
Pixnet 本身有提供 FB 留言框的 app，可直接在「應用市集」安裝。測試之後發現，Pixnet 會將這個 app 的位置綁定在文章結尾處而無法移動。因此，如果想讓 FB 的留言集中在部落格原本留言區塊的話，那麼就可使用本文的程式碼，請依以下步驟：
- 先修改「二、程式碼內容及參數」的所有參數，H 行的紅色字串請改為 "#comment-text"
- 新增自訂欄位，所有程式碼複製進去，並將此自訂欄位放在側欄最下方即可。
- 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 的留言，網路上已經有非常多教學，因此就不用自己再寫一次，以下直接給連結。
這篇請直接看 Step 7～8，可讓管理者收到留言通知
這篇的後半段，對於如何管理留言講得比較仔細。
最後，如同「四、非 Blogger 安裝」所提，其他部落格若安裝上有問題，歡迎留言詢問，會盡量補齊其他部落格的安裝方式。
更多實用工具：
成功了!
回覆刪除懶人包真好用~我反而是appID卡關比較久~
先放一段時間看好不好用了!搞不好大家會比較想在內建的留言板留言XD
<4907583114425452573>(以上內容請勿刪除,從括號之後開始留言)相對之下的確是 appID 要多花一些時間～那就拿你家當 Xuite 範例了 ^^
回覆刪除您好：
回覆刪除請問痞客邦想要自訂管理FB留言板(已成功崁入自己所設的留言板)，
不知道是不是 官方已在head加入官方預設app_id ：101730233200171
(痞客邦又無法自訂head區塊，無法設定自己的APP_ID)，
導致APP抓不到無法也無法由Comment Moderation Tool 管理自己的FB留言板部分，
請問該如何解決?謝謝。
<2035909371233548969>(以上內容請勿刪除,從括號之後開始留言)1. 請問是用官方的app還是本文的程式碼來安裝FB留言板？請留個網址來看你的安裝情形。
回覆刪除2. "無法由Comment Moderation Tool 管理自己的FB留言板" 是怎麼樣的情形？請詳細描述一下，是無法進入還是什麼功能無法啟用？
<7619025155910114924>(以上內容請勿刪除,從括號之後開始留言)1. 使用本文程式碼(官方app有停用)。
回覆刪除痞客邦在[所有會員Blog]的head標籤後面加入官方APP ID(101730233200171)。
本文程式碼FB留言板可正常運作，也可與官方app共同正常使用且無衝突。
2.Comment Moderation Tool(FB應用程式所自訂崁入留言板的APP_ID)載入頁面之後，沒有顯示已崁入blog FB留言板裡面的留言內容及沒有擁有管理權限。
因為pixnet無法自訂head標籤區塊，所以是否可能因為Comment Moderation Tool一直抓到官方APP ID導致無法自訂取得留言板管理權限呢?感覺是無解的問題....請問有什麼辦法可以解決?
謝謝。
<2811104036706874063>(以上內容請勿刪除,從括號之後開始留言)瞭解你的意思了，我試著只使用官方的app，結果官方的FB留言框一樣是沒有管理留言的功能。
回覆刪除因此我覺得這是Pixnet方面的問題，而目前我能建議的就是跟Pixnet客服反應這個問題了！如果最終官方能解決的話，歡迎再回報，看看本文程式碼是否有需要修正的地方。
這懶人包真的是省事很多耶! 想當初我安裝這個光是用那個APP_ID就用好久!
回覆刪除還好我有把它紀錄起來~所以帶入懶人包程式碼馬上就掛回去留言框了!
謝謝你啊^^
<3673436504882994892>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^
回覆刪除<7187735047385681036>(以上內容請勿刪除,從括號之後開始留言)您好:目前痞客邦客服回覆『現階段無法讓會員自行修改「FB app_id」部分，只能修改「fb:admin_id」，可透過 FB 同步文章設定的。』
回覆刪除但是沒有設定同步文章設定，按照本文程式碼使用，再加上FB的Debugger工具，就能抓到「fb:admin_id」部分；取得管理權限之後，發現本文程式碼所抓到的APP_ID部分是痞客邦官方的(非程式碼內自訂的APP_ID)，所以還是沒辦法從Comment Moderation Tool管理自己所自訂的FB留言板部分(亦無FB通知的功能)。
若於崁入blog的FB留言板將自己設為「版主」之設定，則通知的部分是全部的痞客邦有使用FB app的blog，Comment Moderation Tool部分也是全部的痞客邦有使用FB app的blog的FB留言。
所以可能其他功能有使用到需要FB app_ID部分(?)官方才表示無法讓會員自訂APP_ID部分。目前還是因為無法自訂head區塊，所以APP_ID這個問題可能還是無解?
不過還是謝謝您提供如此方便的安裝懶人包!謝謝。
<5858242875071202346>(以上內容請勿刪除,從括號之後開始留言)謝謝你的詳細回報，我仔細研究過了，不能在 </head> 前加入 meta 標籤，的確無論如何無法使用管理留言的功能。
回覆刪除不過我找到了解決方法，可以有辦法以 email 寄送每一則留言的資訊來通知站長，過陣子等程式完成之後會發佈新文章，請再關注後續文章、或訂閱本站的 RSS 了！
<5858242875071202346>(以上內容請勿刪除,從括號之後開始留言)@Rong Hua LI, 已經有更新版程式了：請看「Facebook留言板安裝懶人包__留言email通知」
回覆刪除請問留言版的顏色該如何調整呢?
回覆刪除<8596540276163243962>(以上內容請勿刪除,從括號之後開始留言)我注意到你的版面底色為黑色，顯示的FB留言框顏色就是官方設定的顏色，可參考官方網頁的效果：https://developers.facebook.com/docs/plugins/comments/
回覆刪除FB官方只有兩種效果可選擇，你的已經是深色的效果了，所以也沒有更好的選擇了～
謝謝你~~ 我再試試~
回覆刪除感謝，我想問如果想把留言版改成dark要從哪改？
回覆刪除<4756722475131624515>(以上內容請勿刪除,從括號之後開始留言)我修改了程式碼，請移除舊的程式碼，重新安裝新的程式碼，然後參照「2013.12.9 補充」的內容，修改 I 行的字串為 dark 即可。
回覆刪除BTW, 我看你的 CBOX 很多留言機器人，可以考慮安裝我的「WYBOARD 部落格即時留言板」，然後來參加 Blogger 社群的「週年慶猜謎活動」，有機會可以拿到資料庫大獎，就能編修自己的留言資料了。
<6680120764229653325>(以上內容請勿刪除,從括號之後開始留言)不好意思，看了下面的留言 #8 才發現，我誤以為你的網站已經是 dark 的效果了(其實是 light 效果)，所以我改了程式碼，請按照我在 留言 #8 的回覆進行即可。
回覆刪除您好：小米看了您的"在blogger安裝fb留言版''的方法，
回覆刪除在安裝之後一開始也都可以正常留言，
可是剛突然發現下方的fb留言明明有人留言，
卻都無法顯示出來，不知道是什麼原因，請問您知道該怎麼辦嗎？
謝謝您 > <
<7749011643932909116>(以上內容請勿刪除,從括號之後開始留言)麻煩提供您覺得有問題的那篇文章的網址，來看看是什麼狀況～
回覆刪除我的FB留言回覆都無法在任何有"FB comments"的公開顯示是為什麼?
回覆刪除因為我是新申請,不會弄,要怎麼做?
<7232829554687432231>(以上內容請勿刪除,從括號之後開始留言)你可以在這篇文章的 FB 留言板留個言，測試看看是什麼情形。
回覆刪除另外有可能是你的 FB 隱私權設定的關係，例如我的 FB 帳號設定為任何人都能看到，那麼我的留言就能夠公開顯示；如果你的帳號設定為只有朋友才能看到，那留言就不一定能被所有人看到。
<7945540083186389049>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除無法顯示!只有自己才看得到!FB改版很多次
現在已經很難搞了!
<2884329061183279347>(以上內容請勿刪除,從括號之後開始留言)從你原本的敘述，以為你的留言自己也看不到；現在知道你能看到自己的留言，那麼這是正常現象，大部分的帳號都是這樣的。
回覆刪除解決方法如我上面提的，公開的 FB 帳號，留言才能讓所有人都看到，這是 FB 的隱私性設定限制。
<581201287921876769>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除還是不行!算了沒關係謝謝!
<496893233529913947>(以上內容請勿刪除,從括號之後開始留言)FB → 設定 → 隱私 → 誰可以看到我的東西？ → 誰可以查看你往後的貼文 → 設定成「公開」試試看
回覆刪除如果設定成「朋友」的話，只有你的朋友才能看到你的留言。
感謝！我成功在我的部落格上安裝FB留言板了。
回覆刪除原本使用Facebook developer 官方產生的html5語法放入blogger都判定有誤，什麼appId後面要加";"之類的。
<5767476048386641772>(以上內容請勿刪除,從括號之後開始留言)恭喜～不過這篇是最舊的版本，可參考文章開頭的公告，安裝最新版本喔！
回覆刪除你好，今天發現原本在blogger安裝你的FB留言板，
回覆刪除網頁中的所有留言都看不見了，
但在FB的「審核工具」還是可以看到這些流言，
看了一下發現留言都存在.com 可是我的blogger是.tw
是這個原因嗎 為何留言會突然消失
<6812282671093389149>(以上內容請勿刪除,從括號之後開始留言)你好，請留下出問題的文章網址，看看是什麼情形
回覆刪除比方這一篇 .com 可以看見留言
回覆刪除http://justlaughtw.blogspot.com/2016/03/natsume5-anime.html
但是 .tw 流言卻看不見了
http://justlaughtw.blogspot.tw/2016/03/natsume5-anime.html
<1226569736357733902>(以上內容請勿刪除,從括號之後開始留言)看了你網頁的安裝碼，J 行的內容有問題：
回覆刪除postUrl = "<data:blog.canonicalUrl/>";
這裡在網頁原始碼，我看到的變成 .tw 的網址 → 但這不應該發生，正常來說，應該出現 .com 的網址。
由於我看不到你的範本內容，建議你附個截圖，把 J 行的內容給我看看。
那weebly也可以放這種FB留言板嗎?! 可以的話 我fbLocation要填甚麼??
回覆刪除<7328022869433666545>(以上內容請勿刪除,從括號之後開始留言)weebly 能否安裝要請自行測試喔，若不知 fbLocation 怎麼填，可以附上你的網址，告知想要擺放的地方，我再來看怎麼填。
回覆刪除你好~完全新手,目前正架構中的blogger--http://www.jojohouse.com.tw/
回覆刪除安裝了fb留言板之後,header-wrapper下方的三格隨機文章會被移除
請問是甚麼問題呢?(目前已移除fb留言板)
<8291750060685898953>(以上內容請勿刪除,從括號之後開始留言)請見下面的留言注意事項，詢問非官方範本問題、或貴站為商業網站，請參考相關連結
回覆刪除感謝您，我照著教學作有成功了^_^
回覆刪除123
回覆刪除