「Google+留言框__與其他留言外掛並存」+留言提醒功能

(Pic from: google search)安裝本文的工具，可解決訪客使用 G+ 留言框時，站長無法收到留言通知的問題。不過安裝之前，請務必配合閱讀這篇說明，以瞭解 G+ 留言框運作原理、各種可能遇到的狀況、及解決方法：

• 徹底解決 Google+ 留言框無法收到留言通知的問題

另外，本文的工具只適合「Google+ 留言框_多種留言外掛並存的版本」；若使用的是「官方安裝版」(會把在 G+ 留言框下面的其他留言外掛，包含 Blogger 原生留言系統，都自動移除)，請參考這篇文章：

• 「Google+ 留言框_官方安裝版」+留言提醒功能

點此看範例網頁

　

一、什麼是「Google+ 留言框_多種留言外掛並存的版本」？

就是本站所寫的「Google+ 留言框__網頁版」，此版本可以同時與其他的留言外掛在同一個頁面並存。



二、安裝「自動提醒功能」程式碼

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

如果安裝過「Google+ 留言框__網頁版」，請將原本程式碼移除，用本文的程式碼代替。

1. 以 Blogger 的操作為例，到後台「範本」→「編輯 HTML」，請搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼(非 Blogger 平台一樣放在這個位置)：

<style>
.Gplus { /* 開合標題 */
margin: 0px;
padding: 5px;
text-align: center;
background: #eeeeee;
border: solid 1px #000000;
cursor: pointer;
}
.Gnote { /* 留言提示 */
margin: 0px;
padding: 5px;
background: #ffffff;
border: solid 1px #000000;
height: auto;
display: none;
}
#gplus_comments { /* G+留言框 */
text-align: center;
}
#gplus_comment_switch { /* 展開文字設定*/
margin-top: 10px;
font-size: 14px;
}
</style>
<script src="https://apis.google.com/js/plusone.js">{lang: 'zh-TW'}</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

如果範本裡已經安裝過 jqeury 的話(可搜尋看看有沒有 "jquery" 的字串)，可刪除最後面的程式碼 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>。

以上留言提醒區塊的 CSS，想修改樣式的話請參考「G+ 留言版提示 - 展開收合」有進一步說明。


2. Blogger 接著在範本內搜尋類似以下字串──

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>
應該會有兩個搜尋結果，目前先裝在第一個搜尋結果即可；第二個是手機版的內容，這個工具在手機版也許無效(沒測過)。

接著在以上 <b:if cond='data:blog.pageType == "item"'> 的下一行，插入以下有顏色的程式碼(如果非 Blogger 平台，請將有顏色的程式碼貼在欲顯示的位置)──

1. <b:if cond='data:blog.pageType == "static_page"'>
2. <b:include data='post' name='comment_picker'/>
3. </b:if>
4. <b:if cond='data:blog.pageType == "item"'>
5.  
6. <!-- g+ 留言框提醒功能 start -->
7. <div class='Gplus' title='按此展開．收合'>Google+ 留言提示</div>
8. <div class='Gnote'>在此貼上提醒文字的html碼</div>
9. <div id='gplus_comments'></div>
10.  
11. <script>
12. //<![CDATA[
13. var gplComm= {};
14. gplComm.minHeight = 250; /* 留言框高度 px 最小值 */
15. gplComm.width = 570; /* 留言框寬度 px 值 */
16. gplComm.openText = "︾ 展開 G+ 留言框"; /* 展開字串 */
17. gplComm.closeText = "︽ 收起 G+ 留言框"; /* 收合字串 */
18. (function(){gapi.comments.render("gplus_comments",{href:"http://"+top.location.hostname+top.location.pathname,width:gplComm.width,first_party_property:"BLOGGER",view_type:"FILTERED_POSTMOD"});var e=gplComm.minHeight+"px",i=gplComm.width+"px",f=$("#gplus_comments"),d=$("body"),g,a,j,b,c;d.append("<div id='gplus_comments_click' class='item-control blog-admin' style='cursor: pointer; z-index: 5;'></div>");$(".Gplus").click(function(){$(".Gnote").slideToggle("slow")});g=$("#gplus_comments_click");g.click(function(){$(".Gnote").slideToggle("slow");$(this).remove();gplComm.gcMove=function(){};var h=$("#gplus_comments");h.height(gplComm.maxHeight);h.find("iframe").height(gplComm.maxHeight);$("#gplus_comment_switch a").html(gplComm.closeText)});j=g[0];b=(window.getComputedStyle)?(window.getComputedStyle(j).display=="none")?0:1:(j.currentStyle&&j.currentStyle.display=="none")?0:1;c=(b==0)?unescape("%3Cp/%3E%3Cdiv%20style%3D%27text-align%3A%20right%3B%20color%3A%20%23ccc%3B%20font-size%3A%2011px%3B%20text-shadow%3A%201px%201px%201px%20lavender%3B%27%3E%3Ci%3Ereminder%20by%20%3Ca%20href%3D%27http%3A//wayne-fu.blogspot.com/2013/09/blogger-gplus-comment-reminder-2.html%27%20target%3D%27_blank%27%20title%3D%27%u529F%u80FD%u8A2D%u8A08%27%20style%3D%27text-decoration%3A%20none%3B%20color%3A%20%23ccc%27%3EWFU%20BLOG%3C/a%3E%20%26%20%3Ca%20href%3D%27http%3A//xox520.blogspot.com/2013/05/Blogger-comments-tip-jQuery-slide-effect.html%27%20target%3D%27_blank%27%20title%3D%27%u6ED1%u52D5%u6548%u679C%27%20style%3D%27text-decoration%3A%20none%3B%20color%3A%20%23ccc%27%3EDream%20Talker%3C/a%3E%3C/i%3E%3C/div%3E"):"";$(".Gnote").append(c);g.attr("class","");f.append("<div id='gplus_comment_switch'></div>");$("#gplus_comment_switch").html("<a href='#gplus_comments' onclick='gplComm.expand(this)' style='cursor: pointer; text-decoration: none;'>"+gplComm.openText+"</a>");a=f.find("iframe");a[0].onload=function(){var k={height:e,width:i,"margin-top":"15px","margin-bottom":"20px"},h={height:e,width:i,border:"1px solid #dddddd",borderRadius:"10px",boxShadow:"2px 2px 2px #d6d6d6",padding:"5px"},l=0,n=0,m=setInterval(function(){if(f.height()>gplComm.minHeight){gplComm.maxHeight=f.height();f.css(k);a.css(h);n++;if(n>3){clearInterval(m)}}l++;if(l>9){clearInterval(m)}},1000)};gplComm.expand=function(h){var k=$("#gplus_comments"),l=k.find("iframe");k.width(gplComm.width);if(k.height()==gplComm.minHeight){k.height(gplComm.maxHeight);l.height(gplComm.maxHeight);h.innerHTML=gplComm.closeText}else{k.height(gplComm.minHeight);l.height(gplComm.minHeight);h.innerHTML=gplComm.openText}};gplComm.gcMove=function(){var h=d.scrollTop(),m=f.offset().top,l=f.offset().left,k=f.width()-90;if(gplComm.maxHeight&&a.height()>gplComm.maxHeight){gplComm.maxHeight=a.height()}g.css({position:"absolute",top:(m+100)+"px",left:(l+90)+"px",height:"80px",width:k+"px"})};$(window).scroll(function(){gplComm.gcMove()})})();
19. //]]>
20. </script>
21. <!-- g+ 留言框提醒功能 end -->
22.  
23. <b:include data='post' name='comment_picker'/>
24. </b:if>

以上黑字部分為範本裡的原程式碼，有顏色的部分為安裝碼。下面修改請參考以上程式碼行號──

G：藍字「Google+ 留言提示」為留言提示區塊的標題，可改為自訂字串；藍字「按此展開．收合」為提示字串，一樣可自訂。

H：深紅色字串「留言框提示內容」必須填入自訂的提示內容，依照 HTML 格式(內容請使用單引號「'」、勿使用雙引號「"」)。如不清楚要填入什麼內容，可參考「三、留言提示範例」。

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

O：設定留言框的寬度

P～Q：可自訂收合字串



三、留言提示範例

以本站使用的 G+ 留言提示內容為例，效果如下圖──




上圖的 HTML 格式內容如下：

◆ 必須有 G+ 帳號才能留言。<br/>◆ 【公開留言】的分享對象，除了「公開」以外，還必須輸入「<b style='color: #cc0000; font-size: 120%;'>Wayne Fu</b>」之後選擇正確的頭像，我才能收到留言通知，請參考下圖步驟：<p style='text-align: center;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOu1kfPQc2vND4MqMUaGh6K63A8y_hgzhSXu7vCxBsKjcRuZn4yiXReU3D60SAIciG-CE6nF16Qrkd5ANv7DqXc4wkduZlCYpfTgP91jOIiYp0Cfl3BkwzORkCXl4k05vx_cH4oLzKMbFW/s1600/gplus-comment-guide.jpg'/></p>◆【私密留言】請將上圖步驟 1 去除即可<br/>◆ <b style='color: #cc0000; font-size: 120%;'>若需要站長回覆，但萬一分享對象無法選擇正確的「Wayne Fu」頭像時，建議使用 Blogger 留言框。</b>
可以把以上 HTML 碼內容略做修改後，置換 H 行程式碼的紅色字串(以上的字串內容不能按過 Enter 鍵)：

• HTML 碼有個綠色字串的圖片網址，這圖片含有 Wayne Fu 頭像，建議拿這張圖片稍做修改，換成自己的頭像即可。更改後的圖片網址請置換綠色字串的圖片網址。
• HTML 碼裡的紅色字串「Wayne Fu」請換成自己的暱稱。
• 最後一點的內容請依自己的需求修改。

若想先測試一下效果，可前往測試網頁：

點此看範例網頁

訪客想留言時必定會點擊留言輸入框，系統會強制出現留言提示訊息，提示訪客依照正確的流程留言；接著訪客再度點擊留言輸入框時，即可正常留言。


更多實用工具：

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