2013年5月1日 星期三

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

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

Wayne Fu 0 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 行之間即可。


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

沒有留言:

張貼留言注意事項:

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

TOP