2013年9月9日

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

A+

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


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





一、什麼是「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 平台,請將有顏色的程式碼貼在欲顯示的位置)──


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

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='http://4.bp.blogspot.com/-i3FGz2WR75M/UiFZumjPUII/AAAAAAAAHo8/l8EhTF2ohsM/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」請換成自己的暱稱。
  • 最後一點的內容請依自己的需求修改。

若想先測試一下效果,可前往測試網頁:



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


更多實用工具:

10 則留言:

  1. 報告:好像與 Go Top 的滑動效果(不是貴站的hack) 相衝,就是一按 Go Top 然後導覽列 (貴站的hack)就會一直黏在上面。

    回覆刪除
  2. <3773421378599422193>(以上內容請勿刪除,從括號之後開始留言)看不到你的 go top 按鈕,可能你移除了吧。不然你改裝「我的 go top 按鈕版本」試試看。

    回覆刪除
  3. <9085174532108159473>(以上內容請勿刪除,從括號之後開始留言)我看不需要 Go Top button 了 (有用浮動導覽列 ^^)。

    回覆刪除
  4. Hi Wayne, 昨天在G+留言板留言給你﹐ 沒有收到您的回覆﹐ 不知道您有沒有收到﹐ 今天再用blogger留言板寄一次﹐ 我裝了之後﹐ 還是沒辦法收到留言通知的email耶﹐ 而且完全不知道那裡會還有可能通知我﹐ G+也沒有﹐ blogger後台留言也沒有。能麻煩看一下嗎﹖謝謝。maobaocun.blogspot.com
    如果您願意﹐ 我會很感激的可以給你管理員的權限﹐ 哈哈﹐ 還有﹐ 如果我把這個G+留言板完全去掉﹐ 那可不可以只用blogger的留言板﹖ 主要是希望可以有悄悄話的功能﹐ 當初才會裝G+留言板。謝謝

    回覆刪除
  5. 我剛發現問題在哪了﹐ 是我自己沒有把G+設定弄好。謝謝﹗

    回覆刪除
  6. <3900295155943061407>(以上內容請勿刪除,從括號之後開始留言)你在 g+ 留的問題我回覆你了, 不過我看你應該沒問題了。若還有的話請再提問了~

    回覆刪除
  7. 站長您好:
    我的網站有使用Google+留言板,可是行動版網頁卻顯示不出來
    請問要怎麼做調整呢?

    以這篇文章為例:
    http://lairdstudio.blogspot.tw/2015/04/windows-microsoft-windows.html?m=1

    我有同時使用FB和Google+留言板,兩個都放置在以下的程式區段裡:

    div class='post-footer-line post-footer-line-3'
    span class='reaction-buttons'
    b:if cond='data:blog.pageType == "item"'

    div class='fb-comments' data-colorscheme='dark' data-href='http://lairdstudio.blogspot.tw/' data-numposts='5' data-width='650'/
    div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/

    /b:if

    回覆刪除
  8. <1351357888231912920>(以上內容請勿刪除,從括號之後開始留言)你好,行動版範本文章區塊跟網頁版的文章區塊,在範本中是不同的區塊,想在行動版出現你安裝的工具,得修改行動版範本才行。

    修改行動版的概念,可參考我最近寫的,自訂行動版範本實作的系列文章,也可參考行動版這個標籤所有相關文章。

    回覆刪除
  9. 你好,我按照指示加入編碼後依舊沒有變化,同時會出現div不能在開頭的提醒。

    不知道問題出在哪裡呢?

    部落格 http://wanghenrytw.blogspot.com/

    反倒是另外新增小工具的時候可以成功跑出縮放的留言板,但留言之後依舊沒有收到回應@@

    回覆刪除
  10. <1115953740804761104>(以上內容請勿刪除,從括號之後開始留言)你好,這個版本的安裝方式比較複雜一些,或許比較容易出錯。可以改用這篇「幫 Blogger 安裝三種留言分頁(含 G+ 及 FB 留言板)」的安裝方式試試看~

    回覆刪除

張貼留言注意事項:

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