最近看了很多網誌和新聞網頁，下方都會有個 Facebook 的留言板，一時興起也想來弄一個。

用 Facebook 留言板的好處是，FB 帳號比較像實名制，善良的使用者也只有一個Facebook帳號，有名字和頭像，大家比較不敢胡亂留言，減少垃圾留言或機器人洗版的可能。而且留言者可以順便貼到塗鴉牆，等於間接提高文章的曝光度，而且他塗鴉牆朋友回覆他的留言時，原來的這邊的留言板也會同步在此顯示，我覺得這超棒的！等於我的網誌直接從 Web2.0 無痛升級成 Web3.0 了，而我認為社群的概念，就是建立在這種無私的分享與良性互動的討論上面。

用 Facebook 留言板的壞處是，畢竟是你介接別人的東西，萬一有一天 Facebook 不爽給你用或甚至倒了，所有留言就會歸零（別說不可能，我當初也以為 Facebook 可以永久快快樂樂使用下去，但直到有一天他無預警的停用我帳號後我才恍然大悟，免費的服務，他才是老大，朕賜你的，才是你的，朕沒給的，你不能要！）。再來就是沒有臉書帳號的人就無法留言（這問題倒是還好，這年頭可能家裡的小狗或陽台的盆栽都有 Facebook 帳號了），最後就是留言的管理問題，基本上你是沒有權限刪除任何一則留言的，就算設了後台管理介面頂多也只能隱藏留言（就跟陳懷生少校一樣，看不見可是他依舊存在），別問我為什麼，因為你是借用別人的，臉書才是老大，規則他說了算！

原本以為是很簡單設定的東西，但是到真正完全搞定還是花了不少功夫。原因在於研究一些網路上的教學文章，發現隨著 Facebook 不斷的小改版，很多文章都已經不合時宜了，所以才會多花點時間在測試，在此還是把我成功的步驟以最簡潔的方式經驗分享一下吧。


在此分為兩種版本，一個是「超級簡易版」，一個是「後台管理版」。「超級簡易版」就是沒有管理功能的版本，把程式碼複製貼上就馬上能用了，適合跟這種有字天書的程式碼不是很熟的朋友。另一種「後台管理版」則設定複雜很多，但好處就是具有管理模式，可以把不想看到的留言給隱藏起來，眼不見為淨，適合喜歡掩耳盜鈴的朋友。


超級簡易版

1. 在 Blogger 後台的「版面配置」找一塊你想放留言板的地方「新增小工具」，類型選擇「HTML/JavaScript」，然後把下面程式碼複製貼上到內容區塊。

像這樣新增一個 HTML/JavaScript 的區塊

2. 按下「儲存」和「版面配置」頁的「儲存排列方式」，搞定！（註）


後台管理版

1. 取得應用程式 ID
首先要去 Facebook 開發人員網頁建立一個新的應用程式（可按我前往），按照網頁的步驟一個個過關斬將輸入完成，總而言之，言而總之，最後就是要取得所謂的應用程式 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）搜尋 "" (是""裡的字串不包括"")，在這行下方新增一行貼上這兩行：（記得帳號ID和應用程式ID要置換成你剛剛取得的）

你的帳號ID ' />
你的應用程式ID '/>



4. 搜尋 "" (是""裡的字串不包括"")，在這行下方新增一行貼上以下的程式碼：

注意要把程式碼裡頭的兩個 "你的應用程式ID" 給置換掉，這個步驟的目的是初始化你的Facebook JavaScript SDK 還有註冊一些事件，當有人按讚和留言時，才會在你（管理者）的 Facebook 通知頁面通知你唷！

5. 最後一個步驟就是在想要放 Facebook留言板的地方放上程式碼，通常建議都放每篇文章結束後的下方，所以我們可以搜尋"" (是""裡的字串不包括"")，找到這個位置，在下面新增一行貼上這行：



注意 data-num-posts 後面的數字代表你想要最多顯示幾則（若有更多則下方會出現「顯示更多...」）， data-width 後面的數字則代表留言板的寬度，這兩個數字都是可以按照個人偏好自行改變調整的。

最後按下「儲存範本」，沒有錯誤的話就大功告成了！

如何知道有沒有成功呢？如果留言板出現如下圖那行「公開的回覆」、「管理模式」和齒輪的「設定」按鈕，就代表具備後台管理功能了！

比「超級簡易版」多出上面那行

而我們辛辛苦苦這麼多做這麼多步驟，無非就是為了可以管理呀（不然就用超級簡易版就好了）！按下「管理模式」切換到管理頁面就可以隱藏你不想出現的留言了，或者你也可以去專屬的後台網站去管理，網址是：https://developers.facebook.com/tools/comments。

若你需要有人一回覆留言或按讚都要通知你的話，可以點右上角的齒輪「設定」去把你的臉書帳號設到版主那一欄，最後記得按下方的「儲存」即可。

以上的步驟和程式碼，我是參考最新官方網站的步驟去實做的，保證2012年底前有效，之後若臉書老大不爽又有變動，當然以官方為準囉！如果你是參考其他網站比較舊的教學文章，就會卡關在怎麼設定都無法出現那行「設定」，其最關鍵的原因是其他教學網站都會要你在步驟5.的地方多了 expr:href='data:post.url' 這屬性去指定目前的網址位置，而新版的 Facebook SDK 已經會自動抓取目前網址位置了，多設了這屬性，反而會與應用程式ID不合而導致無法連結到應用程式產生管理模式！（應該是這樣沒錯！）


註：如果使用「超級簡易版」用「新增小工具」排放的位置怎麼樣的不滿意的話，想放到每篇文章的下方的話，還是可以的！只要做步驟5.的部分，搜尋"" ，然後在下面把「超級簡易版」的程式碼複製貼上就可以了！