-- 2011-04-29 更新：在步驟 6 插入被 Blogger 自動簡化過後的程式碼之 gist 純文字版
facebook 的 social plugins 中，有一款功能，最近常常看到，那就是 comments box。利用 comments box ，讀者直接用 facebook 帳號在文章底下留言。跟其他的 facebook social plugin 一樣，只要在別的分頁有登入，就不用重新 login 可以馬上使用，十分便利。而且這個留言，擁有 Blogger 留言系統所缺乏的樹狀功能，除了針對本文回應之外，還能夠針對其他讀者的留言回應，在功能上，多了許多彈性。
妙的是留言後，文章連結會跟留言一起出現在塗鴉牆，之後，不管是在文章頁面上、或在塗鴉牆上繼續留言，網頁跟塗鴉牆上的顯示內容，都會完全同步更新。也就是說，讀者可以在自己的牆上跟其他留言讀者一起交流，儼然就是個以本文網頁為中心、將觸角延伸到眾多塗鴉牆上的迷你討論園地。
說到留言，由於 Blogger 自己的系統，是陽春了點，所以，之前我嘗試許多人所稱道的 DISQUS 留言系統，不過最後沒有採用。DISQUS 的留言管理功能的確很強大豐富，介面也非常漂亮。不過，一裝下去，原本的 Blogger 留言系統就會消失，舊的留言必須另外做匯出的動作，才能進到新的 DISQUS 系統中，而 DISQUS 的管理介面，需要花一點時間去適應。如果是專業的網誌，有大量的留言要處理，也許就會適合，我的話，每篇文章的留言很難超過兩隻手的手指頭，對我來說，管理介面反而是越精簡越好，所以最後還是把 DISQUS 給移除了。
還有一個很重要的因素，是品牌信任。我相信留言交給 Blogger ，它一定會保管的非常妥善，將來等到 Blogger 推出新的留言功能，舊的留言也一定可以順利的升級更新。而 DISQUS 畢竟是個陌生的品牌，現在 Web 2.0 的服務此起彼落，萬一哪天它怎麼了，那可頭大得很。
facebook comments box 對我來說，有個重要的好處是，我不需要拿掉原本的 Blogger 留言系統，可以單純的把 facebook comments box 當成輔助的外掛，和 Blogger 的留言兩者併用，就沒有 DISQUS 那種整碗端去的問題。
以下是加入 comments box 的步驟：
步驟 5 所修改的部份，是留言按鈕的 href 屬性，意思是，這個留言按鈕，要針對哪個網址做留言。如果 href 屬性留白，它不會像 like button 那樣自動抓取目前網址，反而會出現錯誤訊息，告訴你必須填上網址。但是，如果 href 屬性填上部落格網址，那麼，每天文章裡的 comments box 就會變成「統統針對網誌首頁留言」的囧況。然而，我們希望 href 的屬性值是「該篇文章的網址」才對。
這時候， Blogger 樣板系統的表達式 expr: 就派上用場了。如之前的文章所述，Blogger 樣板有許多 data tag 資料標籤可以運用，平常，這些資料標籤是獨立的，跟其他 html 標籤擁有同等的地位。不過，如果資料標籤位於 html 標籤的某個屬性內，就必須在那個屬性前方，加上 expr: 字樣，如此一來 Blogger 就會將屬性值內出現的資料標籤，正確的翻譯為我們所需的資料。
講一堆意思就是，要把 comments box 的留言網址，設定成它所在的那篇文章的網址，而不是整個網誌的網址，用 Blogger 的資料標籤就對了。
以上，是不是很簡便呢？
facebook 的 social plugins 中，有一款功能，最近常常看到，那就是 comments box。利用 comments box ，讀者直接用 facebook 帳號在文章底下留言。跟其他的 facebook social plugin 一樣，只要在別的分頁有登入，就不用重新 login 可以馬上使用，十分便利。而且這個留言，擁有 Blogger 留言系統所缺乏的樹狀功能，除了針對本文回應之外，還能夠針對其他讀者的留言回應，在功能上，多了許多彈性。
妙的是留言後，文章連結會跟留言一起出現在塗鴉牆，之後，不管是在文章頁面上、或在塗鴉牆上繼續留言，網頁跟塗鴉牆上的顯示內容，都會完全同步更新。也就是說，讀者可以在自己的牆上跟其他留言讀者一起交流，儼然就是個以本文網頁為中心、將觸角延伸到眾多塗鴉牆上的迷你討論園地。
說到留言，由於 Blogger 自己的系統，是陽春了點，所以，之前我嘗試許多人所稱道的 DISQUS 留言系統，不過最後沒有採用。DISQUS 的留言管理功能的確很強大豐富，介面也非常漂亮。不過，一裝下去，原本的 Blogger 留言系統就會消失，舊的留言必須另外做匯出的動作，才能進到新的 DISQUS 系統中，而 DISQUS 的管理介面，需要花一點時間去適應。如果是專業的網誌，有大量的留言要處理，也許就會適合，我的話，每篇文章的留言很難超過兩隻手的手指頭，對我來說，管理介面反而是越精簡越好，所以最後還是把 DISQUS 給移除了。
還有一個很重要的因素，是品牌信任。我相信留言交給 Blogger ，它一定會保管的非常妥善，將來等到 Blogger 推出新的留言功能，舊的留言也一定可以順利的升級更新。而 DISQUS 畢竟是個陌生的品牌，現在 Web 2.0 的服務此起彼落，萬一哪天它怎麼了，那可頭大得很。
facebook comments box 對我來說，有個重要的好處是，我不需要拿掉原本的 Blogger 留言系統，可以單純的把 facebook comments box 當成輔助的外掛，和 Blogger 的留言兩者併用，就沒有 DISQUS 那種整碗端去的問題。
以下是加入 comments box 的步驟：
Blogger 在每篇文章下面，安裝 facebook comments box，並且和 Blogger 官方留言系統一起顯示
- 到 https://developers.facebook.com/docs/reference/plugins/comments 取得 facebook 官方提供的程式碼：
- URL to comment on: 留白
- Number of posts 預設會顯示幾則留言: 我設定成 3 篇
- Width 留言框的寬度: 我設定為 600 ，單位是像素
- 按下「Get Code」取得程式碼，會出現像下面這段文字讓你複製：
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments href="" num_posts="23" width="600"></fb:comments> - 回到 Blogger 後台 Design → Edit HTML，勾選 Expand Widget Templates，按 Ctrl + F 搜尋「b:includable id='comments'」，會找到像這樣一段文字：
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
... ... - 把剛才從 facebook 官網複製下來的程式碼，貼入樣板中的「b:includable id='comments'」這一行的下方，貼完像這樣：（紅字是貼上的部份，紫色是等一下要替換掉的部份）
<b:includable id='comments' var='post'>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments href="" num_posts="23" width="600"></fb:comments> <div class='comments' id='comments'>
... ... - 將 「href=""」替換成「expr:href='data:post.url'」，像這樣：
<b:includable id='comments' var='post'>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments expr:href='data:post.url' num_posts="23" width="600"></fb:comments> <div class='comments' id='comments'>
... ... - 最後會變成這樣：
- 儲存樣板，大功告成！
步驟 5 所修改的部份，是留言按鈕的 href 屬性，意思是，這個留言按鈕，要針對哪個網址做留言。如果 href 屬性留白，它不會像 like button 那樣自動抓取目前網址，反而會出現錯誤訊息，告訴你必須填上網址。但是，如果 href 屬性填上部落格網址，那麼，每天文章裡的 comments box 就會變成「統統針對網誌首頁留言」的囧況。然而，我們希望 href 的屬性值是「該篇文章的網址」才對。
這時候， Blogger 樣板系統的表達式 expr: 就派上用場了。如之前的文章所述，Blogger 樣板有許多 data tag 資料標籤可以運用，平常，這些資料標籤是獨立的，跟其他 html 標籤擁有同等的地位。不過，如果資料標籤位於 html 標籤的某個屬性內，就必須在那個屬性前方，加上 expr: 字樣，如此一來 Blogger 就會將屬性值內出現的資料標籤，正確的翻譯為我們所需的資料。
講一堆意思就是，要把 comments box 的留言網址，設定成它所在的那篇文章的網址，而不是整個網誌的網址，用 Blogger 的資料標籤就對了。
以上，是不是很簡便呢？
提供一個更好用的留言系統："Disqus"
回覆刪除整合FB, Twitter, Google, Yahoo 和其他OpenID等等，
介面很美觀，排列也跟FB一樣整齊。
一開使用感覺有點頓，但現在好像變順了...
what different with it!
回覆刪除<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:comments expr:xid="data:post.id" numposts="5" publish_feed='true' width="600"></fb:comments>
i got coded from other web?
@EriCSN
回覆刪除Disqus 真的很美，不過他會取代原本的留言系統，我試用了一下後，就很膽小的換回來了 XD
@Beben Koben
Do you mean this?
http://www.9lessons.info/2011/02/facebook-comments-plugin-for-wordpress.html
I guess the expr:xid way is for developer version, and the expr:href way is for non-developer version.
Since I don't want to enable the facebook developer app to my account, I just choose the non-developer version (which requires a "href" property in it, instead of "xid" property).
By the way, "numposts" refers to how many comments to display, and "publish_feed" refers to publish the comments to facebook wall or not.
still not understand...xixixix
回覆刪除but after i practice, your coded is good, any opsi aol, yahoo and hotmail...hohohoho
thank you...3x
i have comment again in
回覆刪除http://www.9lessons.info/2011/02/facebook-comments-plugin-for-wordpress.html
i hope approve there....xixixixi
@Beben Koben
回覆刪除I just commented on that post, too. :-D
reading your post it's
回覆刪除Blogger 在文章標題下方、文章底部，插入 facebook 官方的 like button
combine with this trick, we can do it together right? like it:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script>
<fb:like expr:href="data:post.url" font="tahoma" show_faces="false" width="450"/>
<fb:comments href="" num_posts="23" width="600"></fb:comments>
Cool, seems resonable!
回覆刪除I have not tried, but I think it should work! XD
i have tried, and good work :-bd
回覆刪除太棒了,真要讚嘆您,這功能我很受用,也順利採用,感謝您.
回覆刪除謝謝誇獎，喔呵呵 ^^
回覆刪除咦＠＠？
回覆刪除他有選項可以讓你啟用Disqus不會移除之前的所有留言不是嗎
＠@？
而且Disqus 是把留言存放在自己的伺服器上不是嗎＠＠？
Diqus裡的所有留言都可以導出的！
就算沒載入Disqus模組，在純Html網頁上也看得到留言！
而且據我所知facebook comment box目前仍然無法導出討論串，沒載入模組時根本看不到留言，要是facebook 哪天怎麼了，那所有留言不就完了＠＠？
@EriCSN
回覆刪除什... 什麼... 原來是這樣嗎？！！！
那我要重新評估一下！>o<
（突然體會到為什麼有的網站會同時裝上三個留言系統... 基本上，頭昏腦脹沒搞清楚然後膽子又小的時候，就會變成這樣囧）
感謝分享 >_<
咦！？ 你是Fiona!
回覆刪除所以你也有跟到 Inside 那篇討論留言系統的文囉！？ >///<
你是說這篇嗎？http://www.inside.com.tw/2011/04/20/6-reasons-why-we-use-facebook-comments
回覆刪除對啊我是從 COSCUP 的 blog 連過去的... XDD
是說，為什麼我一直覺得你的 ID 有點眼熟？@_@
是那篇沒錯^^
回覆刪除如果你現在是PTT Google 或 Linux 版的鄉民，那你真的有可能覺得很眼熟 >///<
話說我這麼支持Disqus, 你是不是覺得我的論點跟 Inside 那篇討論串中的某人挺像？ >///<
我是老人，沒上 PTT ，囧。說到討論串，由於 comments box 會把多的留言收閤起來，字體又相對的較小，所以其實我原本沒怎麼在看留言，剛才才特地又跑上去研究一番。不過因為數量太多了，又東摻一點西摻一點，搞不太清楚順序，所以看一看又放棄了囧。
回覆刪除這樣說起來，剛才閱讀 comments box 的留言，因為都是不認識的 facebook ID，所以給我一種感覺：「那是別人家的小圈圈」
相較之下，Google 原本的留言系統，以及 Disqus，所採用的自由的登入方式，反而讓我比較有那種以文章內容為中心、而不是以留言者為中心的感覺。
以一個想要討論文章內容的讀者的角度來看，Disqus 跟 comments box 的樹狀功能，似乎反而變成了缺點，因為它們打亂了時間軸，等於每個樹狀分支自成一個討論板，這樣會讓我想要下意識的忽略其他事不關己得討論串。
不過，如果不是站在內容討論的角度，而是站在文章曝光率的角度來看，以使用者為中心的 comments box 的確是有盡到它的責任：傳染給更多讀者。
對我來說，因為我很在乎字體要夠大，也比較希望讀者以文章的主題為中心做討論，所以，單單用 comments box 對我來說是絕不會採用的選項。我要考慮的，大概就是 comments box 到底要跟 Google 還是 Disqus 做搭配的問題了。
原來你比較喜歡按照時間排啊＠＠...我感覺(感覺的意思就是自己沒試過XD) 有些網站上的 Disqus模組可以限制巢狀的層數（2 or 3 層），該不會也可以設定成非巢狀？
回覆刪除facebook comment box 曝光效果的確最佳，要是之後能開放openID 就太棒了^^ (但我覺得跟萬惡M$靠攏的它似乎連Google帳號登入都不太可能，更遑論其他OpenID...Orz)
現在的「小圈圈感」其實也還好，以前無名一大堆「悄悄話」更令我當時幼小的心靈受到重創XD，至少現在 FB Cbox 還能看得見大家說什麼...
如果不要巢狀排列的話其實Blogger 內建的就很好用了，但巢狀的話可以方便的解決讀者回覆給讀者的不便^^ (就不用再@來@去了)
謝謝你的講解。你不但介紹做法，也說明了為什麼要那樣改，這對於對blogger template一知半解的我來說很有用，謝啦！
回覆刪除作者已經移除這則留言。
回覆刪除感謝您救了我一命~！（不誇張）
回覆刪除這是我的ｂｌｏｇ：
http://lanering.blogspot.com/
再次感謝你（痛哭流涕）
那又怎么知道有人留言?脸书会通知吗?
回覆刪除用這種方式的話臉書上不會通知... 這是我後來才發現的事情（遠目）
刪除可以怎樣也能將這些留言也在臉書上顯示？
刪除作者已經移除這則留言。
回覆刪除作者已經移除這則留言。
回覆刪除我對 blogger 的樣版架構，瞭解非常差，有點不敢亂說話。但是之前實驗的結果，若照你的方式，加在 b:includable id='comments' 會有問題，那只有當回應數是零的時候，臉書外掛留言外掛才會出現。(我跑去，在這邊留言者的部落格，也確實看到他們，只有在留言數為零的時候，臉書外掛才會出現，證實我的記憶沒錯。)
回覆刪除我自己是放在 b:includable id='threaded_comments' 或者 b:includable id='comment-form' 裡面，（我自己的版面，兩個都有加，完全忘記自己為何兩邊都加），大大可以試試看。(不好意思，半調子的資訊...)
另外，我比較困擾的是，當初想把手機的版本也修改成會顯示臉書外掛，但，卻沒有找到適當的地方，追起來非常麻煩.....