Blogger 最新推出的功能──將 Google+ 留言系統取代原留言系統，其功能十分強大，知名部落格們在這幾天已經有好幾篇介紹，可參考「邀請大家協助電腦玩物測試 Google+ 全新網誌留言系統」、「Blogger 與 Google+ 新增留言外掛深度結合」即可瞭解這個系統的操作方式及優點。這個系統最吸引我的點是：- 留言者可選擇私密留言
- 有誰分享、按過 +1 一目了然
- 所有單一頁面的 G+ 討論串整合在一起
以上這三點，讓我想不安裝 G+ 留言框都不行。可惜的是，在 Blogger 安裝 G+ 留言框後，其壟斷性太強悍，不但原生留言系統消失，連其他留言板例如 FB、DISQUS 也一併被驅逐出場。
由於最近 G+ 進行大改版，使本文的「Google+ 留言框網頁版」失效，請勿安裝本文的程式碼，請按此前往新版本：「G+ 留言框網頁版__更新版」
本文要介紹的工具，將可讓 G+ 留言框獨立安裝在各個網頁、各個部落格平台(要能支援 js)，如此就不會發生其他留言板被 G+ 排擠的狀況。以下按例先說明原理，想直接安裝請跳到「三、安裝說明」。(如果只需要將 Blogger 留言系統轉換為 G+ 留言系統，請參考「Blogger 轉換為 Google+ 留言系統的各種方法」)
一、此工具的由來
其實外部留言系統被 Google 排除我並不覺得可惜，原因過去曾提及：部落格平台應該降低讀取外部伺服器的次數，除了加快頁面載入速度、節省系統資源外，也可降低許多風險。真正讓我心疼的是，由於使用了留言編號(及「回覆引言系統」)，這對文章資料的索引有莫大幫助(文章內容常引用以及舉例留言編號的資料)，但原生留言系統被排除後，不但留言編號保不住，過去的文章、留言也失去引用功效並降低了相互參照的價值。
為了讓原留言系統與 Google+ 留言框並存，找到了這個「Chrome 套件」，看了其畫面發現根本與 Google+ 留言框一模一樣，讓我發覺是有機會將其移植到網頁上的。
二、網頁版的原理
以「取代 Blogger 搜尋小工具__新版 Google 自訂搜尋」 這篇為例，使用「Google Chrome 開發人員工具」 看到 Google+ 留言框包在 Iframe 裡面，其網址有編碼，經解碼還原後格式如下：
https://plusone.google.com/_/widget/render/comments?bsv&href=http://wayne-fu.blogspot.com/2013/03/blogger-google-custom-search.html&first_party_property=BLOGGER&legacy_comment_moderation_url=https://www.blogger.com/moderate-legacy-comment.g?blogID=1035379297949976554&view_type=FILTERED_POSTMOD&width=626&hl=zh_TW&origin=http://wayne-fu.blogspot.tw&search=&hash=#gplus_comment_box&gsrc=3p&jsh=m;/_/scs/apps-static/_/js/k=oz.gapi.zh_TW.RS8tfCUpgA0.O/m=__features__/am=UQ/rt=j/d=1/rs=AItRSTOwgNsd3ML2Xtp5iQsLXxMoUeG9OA#_methods=onPlusOne,_ready,_close,_open,_resizeMe,_renderstart,oncircled,scroll,openwindow&id=I0_1366533351846&parent=http://wayne-fu.blogspot.tw&rpctoken=13615444試著把以上字串貼到網址，就可看到該篇文章的所有 G+ 留言──
Bingo！很快就找到關鍵，只不過這字串裡面有很多參數，而這些參數不是每個網站都能通用，那麼要寫一篇教學文章就會很麻煩，說明找到自己網站參數的步驟會很長！
在測試期間，曾到過之前提的「Chrome 套件」原作者(為日本人) G+ 帳號留言，詢問有沒有簡單的安裝方法。原本沒抱什麼希望，沒想到很快就得到作者的回覆，請見「這個討論串」。
原作者給的答案更簡潔，他給的網址格式如下：
https://plusone.google.com/_/widget/render/comments?bsv&href={URL}&first_party_property=BLOGGER&view_type=FILTERED_POSTMOD&width=620&hl=en-US這下要寫本篇說明就簡單地多了，把這個網址包回去 Iframe 裡面，再做一些加工、版面配置，就成了本篇的小工具，以下請見安裝說明。
三、安裝說明
1. 其他部落格平台：這個小工具可以安裝在任何部落格(需支援 js)的任何位置，請將以下的安裝程式碼(有顏色的部分)直接複製到想要顯示的位置即可。
2. Blogger：請到後台範本 → 編輯HTML，以「新範本」為例，如果是裝在留言區塊的話，在範本內搜尋類似以下字串──
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>應該會有兩個搜尋結果，目前先裝在第一個搜尋結果即可；第二個是手機版的內容，這個工具在手機版也許無效(沒測過)。
如果是「舊範本」的話，上面兩個 <b:include data='post' name='comment_picker'/>字串應該都會是 <b:include data='post' name='comments'/>，字串換一下就能找到。
接著在以上 <b:if cond='data:blog.pageType == "item"'>的下一行，插入這個 G+ 留言框網頁版的程式碼──
以上黑字部分為範本裡的原程式碼，有顏色的部分為安裝碼，儲存後即可在每篇文章看到效果。
想看效果範例參考「這篇文章」的留言區塊，若要修改參數請見以下說明。
3. 參數修改：請對照以上行號，藍字部分為優先修改的參數──
AC：設定收合留言框時的高度
AD：設定展開留言框時的高度
AE：設定留言框的寬度
以上三個參數請根據自己的版型來調整到最適大小。
AF～AG：可自訂收合字串
AH：如果不是繁體中文，請修改此行數值，可查閱綠字部分的網址。
L～P：可自訂整個留言區塊的上、下邊界值；設定整個區塊置中等。
Q～U：可自訂外框的 CSS 樣式
V～X：可自訂收合字樣的 CSS
四、一些建議
基本上以大部分的 Blogger 而言，只需要按照官方的方法轉換成 G+ 留言系統即可，不一定需要安裝本文的工具。如果擔心訪客沒有 G+ 帳號而不能留言的話，可在 Blogger 安裝「推文系統」即可。
如果範本常修改，導致原留言系統無法轉換成 G+ 留言系統，我會另外整理一篇簡單的修改方法。
會需要安裝這個工具的族群，反而是其他的部落格平台、或安裝多個留言系統的部落格。另外如果跟我一樣，曾安裝留言編號，為了保存這些編號，那麼也是非常需要本文這個工具。
最後，感謝原作者 +Satoshi Yoshida 的技術指導，讓程式碼得以更加簡潔。