2013年4月21日

G+ 留言框「網頁版」安裝說明

A+
Blogger 最新推出的功能──將 Google+ 留言系統取代原留言系統,其功能十分強大,知名部落格們在這幾天已經有好幾篇介紹,可參考「邀請大家協助電腦玩物測試 Google+ 全新網誌留言系統」、「Blogger 與 Google+ 新增留言外掛深度結合」即可瞭解這個系統的操作方式及優點。這個系統最吸引我的點是:
  • 留言者可選擇私密留言
  • 有誰分享、按過 +1 一目了然
  • 所有單一頁面的 G+ 討論串整合在一起

以上這三點,讓我想不安裝 G+ 留言框都不行。可惜的是,在 Blogger 安裝 G+ 留言框後,其壟斷性太強悍,不但原生留言系統消失,連其他留言板例如 FB、DISQUS 也一併被驅逐出場。


2013.5.20 公告

由於最近 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://www.wfublog.com&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://www.wfublog.com&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 == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == &quot;item&quot;'> 的下一行,插入這個 G+ 留言框網頁版的程式碼──


以上黑字部分為範本裡的原程式碼有顏色的部分為安裝碼,儲存後即可在每篇文章看到效果。

想看效果範例參考「這篇文章」的留言區塊,若要修改參數請見以下說明。

3. 參數修改:請對照以上行號,藍字部分為優先修改的參數──

AC:設定收合留言框時的高度

AD:設定展開留言框時的高度

AE:設定留言框的寬度

以上三個參數請根據自己的版型來調整到最適大小。

AF~AG:可自訂收合字串

AH:如果不是繁體中文,請修改此行數值,可查閱綠字部分的網址。

L~P:可自訂整個留言區塊的上、下邊界值;設定整個區塊置中等。

Q~U:可自訂外框的 CSS 樣式

V~X:可自訂收合字樣的 CSS



四、一些建議

基本上以大部分的 Blogger 而言,只需要按照官方的方法轉換成 G+ 留言系統即可,不一定需要安裝本文的工具。如果擔心訪客沒有 G+ 帳號而不能留言的話,可在 Blogger 安裝推文系統」即可。

如果範本常修改,導致原留言系統無法轉換成 G+ 留言系統,我會另外整理一篇簡單的修改方法。

會需要安裝這個工具的族群,反而是其他的部落格平台、或安裝多個留言系統的部落格。另外如果跟我一樣,曾安裝留言編號,為了保存這些編號,那麼也是非常需要本文這個工具。

最後,感謝原作者 +Satoshi Yoshida 的技術指導,讓程式碼得以更加簡潔。


更多實用工具:

20 則留言:

  1. 我還是比較喜歡用 Blogger 的留言系統(我是跟不上潮流的老人家 XD)。

    回覆刪除
  2. <6519727199482815974>(以上內容請勿刪除,從括號之後開始留言)用原來的留言系統才能看"最新回應"啊~ G+ 留言系統還需要加強!

    回覆刪除
  3. 回報問題: 現在好像用不到, 按了後一直出現 '開啟中'

    回覆刪除
  4. <619891799485340494>(以上內容請勿刪除,從括號之後開始留言)請給我出問題的網址看看

    回覆刪除
  5. <2647184794250765588>(以上內容請勿刪除,從括號之後開始留言)貴站好像也是

    回覆刪除
  6. <4919964975400683085>(以上內容請勿刪除,從括號之後開始留言)終於知道你的意思了,是指「按了留言框後出現"開啟中"的字樣」

    也許是這兩天G+改版的關係 再來研究看看怎麼解決

    回覆刪除
  7. <122722510912967478>(以上內容請勿刪除,從括號之後開始留言)那請問問題容易解決嗎?

    回覆刪除
  8. <2484280561610096601>(以上內容請勿刪除,從括號之後開始留言)找到方法了,過一兩天發佈更新版。

    回覆刪除
  9. <3237489601938323908>(以上內容請勿刪除,從括號之後開始留言)請問要更新是否要很複雜? 跟現在的版面會不一樣嗎?

    回覆刪除
  10. 這一篇借我引用參考, 謝謝. :)

    回覆刪除
  11. <7779148172569342127>(以上內容請勿刪除,從括號之後開始留言)版面大致上差不多

    回覆刪除
  12. <6616631723325033873>(以上內容請勿刪除,從括號之後開始留言)出更新版了,請改用新版網址,謝謝!

    回覆刪除
  13. <5599676859255159200>(以上內容請勿刪除,從括號之後開始留言)宜在此文章加上新文連結 ^^

    http://wayne-fu.blogspot.hk/2013/05/gplus-comments-box-update.html

    回覆刪除
  14. <7379856516010555424>(以上內容請勿刪除,從括號之後開始留言)感謝,已發公告 ^^

    回覆刪除
  15. <4830459729164040441>(以上內容請勿刪除,從括號之後開始留言)^^ 恩! 不得不讚你的回覆速度!很快啊~

    回覆刪除
  16. 不過我想說: 你試試 F5 這篇文章然後按按 '︾ 展開 G+ 留言框'~

    頭幾次會失常 T_T --> 閃了幾下卻展不開留言框...

    是留言過多嗎?

    回覆刪除
  17. <6192006368761706416>(以上內容請勿刪除,從括號之後開始留言)10秒內強制收合留言框,這是正常的。

    Don't worry,沒有人會不看文章而 10 秒內跑來展開留言框的。

    回覆刪除
  18. <3517970095220813876>(以上內容請勿刪除,從括號之後開始留言)明白~ 但這用意何在?

    回覆刪除
  19. <6002712910968734339>(以上內容請勿刪除,從括號之後開始留言)更新版的內文可以解釋你的疑問~

    回覆刪除
  20. <1765827161441418202>(以上內容請勿刪除,從括號之後開始留言)OK ^^

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。