2013年4月1日 星期一

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

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

Wayne Fu 0 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 的技術指導,讓程式碼得以更加簡潔。


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP