2011年4月10日 星期日

-步驟-Blogger 在每篇文章下面,安裝 facebook comments box,並且和 Blogger 官方留言系統一起顯示

-- 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 的步驟:



Blogger 在每篇文章下面,安裝 facebook comments box,並且和 Blogger 官方留言系統一起顯示



  1. https://developers.facebook.com/docs/reference/plugins/comments 取得 facebook 官方提供的程式碼:
    • URL to comment on: 留白
    • Number of posts 預設會顯示幾則留言: 我設定成 3 篇
    • Width 留言框的寬度: 我設定為 600 ,單位是像素
  2. 按下「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>
  3. 回到 Blogger 後台 Design → Edit HTML,勾選 Expand Widget Templates,按 Ctrl + F 搜尋「b:includable id='comments'」,會找到像這樣一段文字:
    <b:includable id='comments' var='post'>
      <div class='comments' id='comments'>
        ... ...
  4. 把剛才從 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'>
        ... ...
  5. 將 「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'>
    ... ...
  6. 最後會變成這樣:
  7. 儲存樣板,大功告成!
以上步驟,會讓 facebook comments box 成為 Blogger 留言系統(所謂的 comments 模組)的一部分,擺在 Blogger 留言上面、緊接在文章的 post footer 的下方。由於 Blogger 的留言系統,只有在單篇文章的頁面才會出現,因此,這個 comments box 也跟著只在單篇文章的頁面出現,而不會在首頁跑出來擾亂視聽。

步驟 5 所修改的部份,是留言按鈕的 href 屬性,意思是,這個留言按鈕,要針對哪個網址做留言。如果 href 屬性留白,它不會像 like button 那樣自動抓取目前網址,反而會出現錯誤訊息,告訴你必須填上網址。但是,如果 href 屬性填上部落格網址,那麼,每天文章裡的 comments box 就會變成「統統針對網誌首頁留言」的囧況。然而,我們希望 href 的屬性值是「該篇文章的網址」才對。

這時候, Blogger 樣板系統的表達式 expr: 就派上用場了。如之前的文章所述,Blogger 樣板有許多 data tag 資料標籤可以運用,平常,這些資料標籤是獨立的,跟其他 html 標籤擁有同等的地位。不過,如果資料標籤位於 html 標籤的某個屬性內,就必須在那個屬性前方,加上 expr: 字樣,如此一來 Blogger 就會將屬性值內出現的資料標籤,正確的翻譯為我們所需的資料。

講一堆意思就是,要把 comments box 的留言網址,設定成它所在的那篇文章的網址,而不是整個網誌的網址,用 Blogger 的資料標籤就對了。

以上,是不是很簡便呢?