最近看了很多網誌和新聞網頁，下方都會有個 Facebook 的留言板，一時興起也想來弄一個。
用 Facebook 留言板的好處是，FB 帳號比較像實名制，善良的使用者也只有一個Facebook帳號，有名字和頭像，大家比較不敢胡亂留言，減少垃圾留言或機器人洗版的可能。而且留言者可以順便貼到塗鴉牆，等於間接提高文章的曝光度，而且他塗鴉牆朋友回覆他的留言時，原來的這邊的留言板也會同步在此顯示，我覺得這超棒的！等於我的網誌直接從 Web2.0 無痛升級成 Web3.0 了！而我認為社群的核心概念，就是建立在這種無私的分享與良性互動的討論上面。
用 Facebook 留言板的壞處是，畢竟是你介接別人的東西，萬一有一天 Facebook 不爽給你用或甚至倒了，所有留言就會歸零（別說不可能，我當初也以為 Facebook 可以永久快快樂樂使用下去，但直到有一天他無預警的停用我帳號後我才恍然大悟，免費的服務，他才是老大，朕賜你的，才是你的，朕沒給的，你不能要！）。再來就是沒有臉書帳號的人就無法留言（這問題倒是還好，這年頭可能家裡的小狗或陽台的盆栽都有 Facebook 帳號了），最後就是留言的管理問題，基本上你是沒有權限刪除任何一則留言的，就算設了後台管理介面頂多也只能隱藏留言（就跟陳懷生少校一樣，看不見可是他依舊存在），他本人和他的朋友還是都看的見，別問我為什麼，因為你是借用別人的，臉書才是老大，規則他說了算！
原本以為是很簡單設定的東西，但是到真正完全搞定還是花了不少功夫。原因在於研究一些網路上的教學文章，發現隨著 Facebook 不斷的小改版，很多文章都已經不合時宜了，所以才會多花點時間在 try&error，在此還是把我成功的步驟經驗分享一下吧。
在此分為兩種版本，一個是「超級簡易版」，一個是「後台管理版」。「超級簡易版」就是沒有管理功能的版本，把程式碼複製貼上就馬上能用了，適合跟這種有字天書的程式碼不是很熟的朋友。另一種「後台管理版」則設定複雜很多，但好處就是具有管理模式，可以把不想看到的留言給隱藏起來，眼不見為淨，適合喜歡掩耳盜鈴的朋友。
超級簡易版
1. 在 Blogger 後台的「版面配置」找一塊你想放留言板的地方「新增小工具」，類型選擇「HTML/JavaScript」，然後把下面程式碼複製貼上到內容區塊。
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/zh_TW/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
document.write('<div class="fb-comments" data-href="'+document.location+'" data-num-posts="5" data-width="470"></div>');
</script>
 |
| 像這樣新增一個 HTML/JavaScript 的區塊 |
後台管理版
1. 取得應用程式 ID
首先要去 Facebook 開發人員網頁建立一個新的應用程式（可按我前往），按照網頁的步驟一個個過關斬將輸入完成，而 Website with Facebook Login 那邊記得順便填入你的網誌首頁的URL，總而言之，言而總之，最後就是要取得所謂的應用程式 ID (APP ID)就對了（若有申請好應該可按這裡找到）。
2. 取得帳號ID
再來就是要取得管理者也就是自己 Facebook帳號的 ID，方法如下：
Facebook查看個人首頁，如果網址是以下這種，那數字部分就是你的帳號ID
http://www.facebook.com/profile.php?id=數字
如果你的個人頁面網址是長的像以下這種
http://www.facebook.com/帳號名稱
代表你的個人首頁已經命名過了，那請將上面的「帳號名稱」代入以下的網址進入
https://graph.facebook.com/帳號名稱
進去後會看到「"id":"數字"」，那串數字就是你的帳號ID。
3. 在 Blogger 後台的「範本」->「編輯HTML」->「展開小裝置範本」打勾，開始艱辛的修改程式碼的步驟（變動前最好先將整份範本備份一下）。
（可按下Ctrl+F）搜尋 "<head>" (是""裡的字串不包括"")，在這行下方新增一行貼上這兩行：（記得帳號ID和應用程式ID要置換成你剛剛取得的）
<meta property='fb:admins' content=' 你的帳號ID ' />
<meta property='fb:app_id' content=' 你的應用程式ID '/>
4. 搜尋 "<body" (是""裡的字串不包括"")，在這行下方新增一行貼上以下的程式碼：
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '你的應用程式 ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('xfbml.render', function(response) {
});
FB.Event.subscribe('auth.sessionChange', function(response) {
// 當 Facebook session 改變時通知
});
FB.Event.subscribe('edge.create', function(response) {
// 當有人按讚時通知
});
FB.Event.subscribe('comments.create', function(response) {
// 當有新留言時通知
});
};
(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 = "//connect.facebook.net/zh_TW/all.js#appId=你的應用程式ID&xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
注意要把程式碼裡頭的兩個 "你的應用程式ID" 給置換掉，這個步驟的目的是初始化你的Facebook JavaScript SDK 還有註冊一些事件，當有人按讚和留言時，才會在你（管理者）的 Facebook 通知頁面通知你唷！
5. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼，通常建議都放每篇文章結束後的下方，所以我們可以搜尋"<b:includable id='comments' var='post'>" (是""裡的字串不包括"")，找到這個位置，在下面新增一行貼上這行：
<div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/>
注意 data-num-posts 後面的數字代表你想要最多顯示幾則（若有更多則下方會出現「顯示更多...」）， data-width 後面的數字則代表留言板的寬度，這兩個數字都是可以按照個人偏好自行改變調整的。
最後按下「儲存範本」，沒有錯誤的話就大功告成了！
那，如何知道有沒有成功呢？如果留言板出現如下圖那行「公開的回覆」、「管理模式」和齒輪的「設定」按鈕，就代表具備後台管理功能了！
 |
| 比「超級簡易版」多出上面那行 |
若你需要有人一回覆留言或按讚都要通知你的話，可以點右上角的齒輪「設定」去把你的臉書帳號設到版主那一欄，最後記得按下方的「儲存」即可。
如上圖藍色部分，如果前面的設定都OK的話這塊 Debugger 區是會抓的到正確的資料的，如果這塊有奇奇怪怪的錯誤資訊，代表你有哪個地方沒設對，可以去 Debugger網站抓一下 bug，網址是：https://developers.facebook.com/tools/debug 。如果這網址下面有任何紅色Error區，代表你有哪個環節有問題，請自行照上面的錯誤提示去修改囉！修改完再測一次，紅色區塊消除的話，代表設定成功囉！
 |
| 這個Debug網頁可以協助判斷應用程式有無設定成功 |
以上的步驟和程式碼，我是參考最新官方網站的步驟去實做的，保證2012年底前有效，之後若臉書老大不爽又有變動，當然以官方為準囉！
註：如果使用「超級簡易版」用「新增小工具」排放的位置怎麼樣都不滿意，還是想放到每篇文章結尾的下方的話，還是可以的！只要多做「後台管理版」步驟5.的部分，搜尋"<b:includable id='comments' var='post'>" ，然後在下面把「超級簡易版」的程式碼複製貼上就可以了！
感謝分享!
回覆刪除{div class='fb-comments' expr:href='data:post.url' data-num-posts='5' data-width='650'/}
回覆刪除這個是不是有少幾碼啊?
沒有唷，我剛再檢查過是沒問題的！主要是步驟4的程式碼一定要貼對，您再試試看！
刪除請問一下，我製作了留言板平台在個人網頁，但是只要是留言過的人(A)，別人再去留言(B)，不管AB是否為好友都會收到FB的通知"XXX和XXX也回應了XXX網站" 請問我能去控制這東西的產生嗎?? 謝謝
回覆刪除輕問依照您的方式，可是通知都還是沒辦法出現耶！
回覆刪除沒錯！連我這個網誌的Facebook留言板也消失了....我發現Facebook又片面擅改API，導致這篇教學文章失效了，唉，不爽接他了！
刪除最近改很多，很煩XD。
刪除Nice, thank you !
回覆刪除