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

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+ 留言框網頁版的程式碼──

1. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
2. <b:include data='post' name='comment_picker'/>
3. </b:if>
4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
5.  
6. <!-- g+ 留言框網頁版 start -->
7. <div id='gplus_comments'></div>
8. <style>
9. #gplus_comments { /* CSS 外框設定*/
10. text-align: center;
11. }
12. #gplus_comment_switch { /* CSS 展開文字設定*/
13. margin-top: 10px;
14. font-size: 14px;
15. }
16. </style>
17. <script src="https://apis.google.com/js/plusone.js">{lang: 'zh-TW'}</script>
18. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
19. <script>
20. //<![CDATA[
21. var gplComm= {};
22. gplComm.minHeight = 250;  /* 留言框高度 px 最小值 */
23. gplComm.width = 570;  /* 留言框寬度 px 值 */
24. gplComm.openText = "︾ 展開 G+ 留言框";  /* 展開字串 */
25. gplComm.closeText = "︽ 收起 G+ 留言框";  /* 收合字串 */
26.  
27. (function () {
28.   var script = document.createElement("script");
29.   script.src = "https://googledrive.com/host/0BykclfTTti-0SlU3SDg5RUVtNlk/gplusComment_min_130520.js";
30.   document.documentElement.firstChild.appendChild(script);
31. } )();
32. //]]>
33. </script>
34. <!-- g+ 留言框網頁版 end -->
35.  
36. <b:include data='post' name='comment_picker'/>
37. </b:if>

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

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

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

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

W：設定留言框的寬度

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

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

X～Y：可自訂收合字串

L～O：可自訂收合字樣的 CSS



三、一些建議

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

• Blogger 可用 Google+ 留言系統了！與舊有原生留言系統併用還是直接取代？補充表格 Google+ 社交圈與 Facebook 社團異同比一比
• Google+ 私密留言方式

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


更多實用工具：

• 本站使用的 Blogger hack 及工具整理