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 是比較稍微有變數的一部份，能成功的話之後問題就不大了。
二、程式碼內容及參數
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
- <!-- FB留言框懶人包 start -->
- <b:if cond='data:blog.pageType == "item"'><script>
- (function () {
- var admins = 100006369483483, // 請改為自己的管理者 ID
- app_id = 457090704320320, // 請改為自己的 app ID
- width = "550px", // 請改為符合自己頁面寬度的像素值
- numposts = 5, // 最多顯示幾則留言
- fbLocation = ".comments", // 留言框的擺放位置，請依不同的部落格範例, 置換不同的字串
- color = "light", // 預設值適合部落格底色為淺色；若部落格底色為深色, 字串請改為 "dark"
- postUrl = "<data:blog.canonicalUrl/>";
- //<![CDATA[
- var cb=function(){postUrl=(postUrl.search("http")<0)?"http://"+location.hostname+location.pathname:postUrl;jQuery("head").prepend("<meta content='"+admins+"' property='fb:admins'></meta><meta content='"+app_id+"' property='fb:app_id'></meta>");jQuery(function(){jQuery("body").prepend("<div id='fb-root'></div><sc"+"ript>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'http://connect.facebook.net/zh_TW/all.js#xfbml=1&appId="+app_id+"'; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</sc"+"ript>");jQuery(fbLocation).prepend("<div class='fb-comments' data-colorscheme='"+color+"' data-numposts='"+numposts+"' data-width='"+width+"' href='"+postUrl+"'></div>");FB.XFBML.parse()})};var getScript=function(url,cb){var script=document.createElement("script");if(script.readyState){script.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;if(cb){cb()}}}}else{script.onload=function(){if(cb){cb()}}}script.src=url;document.documentElement.firstChild.appendChild(script)};if(typeof jQuery==="undefined"){getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",cb)}else{cb()};
- //]]>
- } )();
- </script></b:if>
- <!-- FB留言框懶人包 end, Design by WFU BLOG-->
安裝程式碼之前，需修改一些參數，請對照以上程式碼行號：
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
您好：
回覆刪除請問痞客邦想要自訂管理FB留言板(已成功崁入自己所設的留言板)，
不知道是不是 官方已在head加入官方預設app_id ：101730233200171
(痞客邦又無法自訂head區塊，無法設定自己的APP_ID)，
導致APP抓不到無法也無法由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導致無法自訂取得留言板管理權限呢?感覺是無解的問題....請問有什麼辦法可以解決?
謝謝。
這懶人包真的是省事很多耶! 想當初我安裝這個光是用那個APP_ID就用好久!
回覆刪除還好我有把它紀錄起來~所以帶入懶人包程式碼馬上就掛回去留言框了!
謝謝你啊^^
<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這個問題可能還是無解?
不過還是謝謝您提供如此方便的安裝懶人包!謝謝。
請問留言版的顏色該如何調整呢?
回覆刪除謝謝你~~ 我再試試~
回覆刪除感謝，我想問如果想把留言版改成dark要從哪改？
回覆刪除您好：小米看了您的"在blogger安裝fb留言版''的方法，
回覆刪除在安裝之後一開始也都可以正常留言，
可是剛突然發現下方的fb留言明明有人留言，
卻都無法顯示出來，不知道是什麼原因，請問您知道該怎麼辦嗎？
謝謝您 > <
我的FB留言回覆都無法在任何有"FB comments"的公開顯示是為什麼?
回覆刪除因為我是新申請,不會弄,要怎麼做?
<7945540083186389049>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除無法顯示!只有自己才看得到!FB改版很多次
現在已經很難搞了!
<581201287921876769>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除還是不行!算了沒關係謝謝!
感謝！我成功在我的部落格上安裝FB留言板了。
回覆刪除原本使用Facebook developer 官方產生的html5語法放入blogger都判定有誤，什麼appId後面要加";"之類的。
你好，今天發現原本在blogger安裝你的FB留言板，
回覆刪除網頁中的所有留言都看不見了，
但在FB的「審核工具」還是可以看到這些流言，
看了一下發現留言都存在.com 可是我的blogger是.tw
是這個原因嗎 為何留言會突然消失
比方這一篇 .com 可以看見留言
回覆刪除http://justlaughtw.blogspot.com/2016/03/natsume5-anime.html
但是 .tw 流言卻看不見了
http://justlaughtw.blogspot.tw/2016/03/natsume5-anime.html
那weebly也可以放這種FB留言板嗎?! 可以的話 我fbLocation要填甚麼??
回覆刪除你好~完全新手,目前正架構中的blogger--http://www.jojohouse.com.tw/
回覆刪除安裝了fb留言板之後,header-wrapper下方的三格隨機文章會被移除
請問是甚麼問題呢?(目前已移除fb留言板)
感謝您，我照著教學作有成功了^_^
回覆刪除123
回覆刪除