2013年5月20日

G+ 留言框「網頁版」__更新版

A+
2016.4.9 公告:因 Google Drive 外連失效,請勿使用本篇的程式碼,請改用新版「Google+留言框__與其他留言外掛並存+留言提醒功能」,當訪客留言時,可自動顯示留言提示訊息,能有效解決站長收不到 G+ 留言通知的問題。


前幾天 G+ 進行大改版,使原本的「Google+ 留言框網頁版」失效(感謝 +Ken Lo 通知),因此程式碼必須進行改版。以下大致說明改版過程,想直接安裝請跳「二、安裝程式碼」。


一、更新版始末

經測試之後,Google 算是封鎖了原本 iframe 的 hack 方法,造成只能從官方的程式碼來 hack。在「How to add Google+ Comments to any website」找到 G+ 留言框的幾種安裝方式,其實各種 G+ 留言框安裝方法的版面效果都一樣──當沒有留言時,下方會有一大塊的空白,讓版面很不美觀

因此我的版本一律將效果改為──自訂留言框高度,讓站長獲得版面的控制權

本篇的原理大致是,等 Google 官方程式碼執行完畢之後,用 jquery 來改變留言框的高度,來達到原本效果。不過 Google 也猜得到有人會這麼做,因此設下不少機關,本文就是我跟這些機關奮戰後的結果。

我只能給自己打 60 分了,在 Chrome、FireFox 下可正常執行,在 IE 會有一點點版面問題,在 Opera 之下失效...處理跨瀏覽器相容性是寫網頁程式永遠的痛~

2013.8.27 補充

新版 Opera 改用新引擎核心後,等於跟 Chrome 是自家人產品,不會再有問題了。新版 Opera 的調校文章請參考:Opera 15 調校心得__首頁+滾輪換頁(滑鼠手勢)+書籤列+Gmail




二、安裝程式碼

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

如果安裝過「原版本」,請將原本程式碼移除,用本文的程式碼代替。

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. 參數修改:請對照以上行號,藍字部分為優先修改的參數──

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

W:設定留言框的寬度

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

R:如果範本中已經裝過 jquery (可搜尋看看有沒有 "jquery" 的字串),那麼可刪除此行

X~Y:可自訂收合字串

L~O:可自訂收合字樣的 CSS



三、一些建議

關於 G+ 留言系統要如何使用、私密留言要怎麼留,+Ala Go 的這兩篇文章描述的滿詳細的,值得參考:

另外,+Mark X 在 G+ 留言框上方放了「G+ 留言注意事項」,使用開合功能來節省空間,請參考「留言版提示 - jQuery 展開收合效果」,可如法炮製將要顯示的注意事項,放在本篇程式碼的 D~F 行之間即可。


更多實用工具:

7 則留言:

  1. 請問Wayne Fu 大哥
    1跑出兩個留言框了請問要從哪邊改呢(一個是原本的,一個是安裝完G+網頁版跑出來了,也就是變成有兩個原本的blogger框)
    http://yunjhong.blogspot.tw/2013/05/365220nexusfont-258.html#more

    2其它自己的網頁部分沒有顯示
    http://yunjhong.blogspot.tw/p/about.html
    如果想在自己新增的網頁中也顯示,請問有什麼辦法呢?謝謝

    回覆刪除
  2. <4883898499102012228>(以上內容請勿刪除,從括號之後開始留言)因為看不到你的範本內容,只能由你自己檢查了,看你是不是複製安裝程式碼(紅色的字)的時候,把黑色的字也複製了,導致原本的程式碼出現了兩次 (例如有兩個 <b:include data='post' name='comment_picker'/>)

    如果有重複的話,刪掉一個就行了。

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

    被大哥說中了>///<謝謝ˇˇ

    回覆刪除
  4. 請問Wayne Fu大哥

    我安裝了有顏色字體部分的程式碼,也成功同時顯示G+留言及一般留言
    但是按"展開G+留言框"時
    會發生開啟後馬上又關閉的情形
    (按到第三次才會順利展開)


    不曉得讓他完全展開不收合的程式碼要怎麼更改?
    謝謝你,每次看你的文章都收穫良多!!

    (我已經先把網誌改回內建G+留言了)

    回覆刪除
  5. <3397167542997407772>(以上內容請勿刪除,從括號之後開始留言)這是正常的情形,在 G+ 留言框開始執行後的 "十秒內",會強制進行收合的動作,為何這麼做的原因請見「一、更新版始末」-->「 Google 也猜得到有人會這麼做,因此設下不少機關,本文就是我跟這些機關奮戰後的結果」

    如果還是看不懂我在說什麼也沒有關係,總之不必擔心這件事,因為沒有讀者會網頁打開後不看文章,而在 "十秒內" 跑去開合「G+ 留言框」,所以請放心使用這個小工具吧 ^^

    回覆刪除
  6. 請問這個沒有像FB一樣的管理功能?

    回覆刪除
  7. <3139724976977449159>(以上內容請勿刪除,從括號之後開始留言)可以直接刪除回覆者的留言

    回覆刪除

張貼留言注意事項:

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