Blogger 轉換為 G+ 留言系統的各種方法

Blogger 最近推出的 G+ 留言框，如果是未修改的新範本，都可順利轉換留言系統；但如果是修改過的範本、或舊範本的話，就不一定能成功轉換。

如果不介意另外安裝程式碼，可參考「Google+ 留言框 "網頁版" 安裝說明」；如果想使用官方的版本，可參考本文提供的數種方法，請 "依照順序" 執行測試，例如當第一種不可行時，再測試第二種，以此類推直到找到適合自己範本的修改方式。


一、官方解決方案

1. 依照「在 Blogger 嵌入 Google+ 留言板，自動整合 G+ 中對同一篇文章的全部留言！」 這篇文章，到後台 Google+ 的選項開啟 G+ 留言系統。

2. 「官方文件」提供了一組程式碼，但未明示應該放在什麼位置。請到後台範本 → 編輯 HTML，搜尋以下字串──

<b:include data='post' name='post'/>
找到後，正常來說往下四行應該會看到這個字串(如果不是的話在附近找一找)──

<b:if cond='data:blog.pageType == &quot;item&quot;'>
緊接在這個字串的下一行，插入官方提供的程式碼──

<div class='cmt_iframe_holder'
expr:data-href='data:post.canonicalUrl'
expr:data-viewtype='data:post.viewType'/>
存檔後，可以看看 G+ 留言框是否出現，應該八成可以出現。萬一沒出現，大概是官方文件說的情形「Unfortunately, we cannot guarantee the experience with heavily customized templates.」，範本改到無法辨識的地步了。

方案一無效時，請參考方案二。



二、簡易轉換方案

1. 這是最簡單的轉換方式，到後台範本 → 編輯 HTML → 將迷你組件範本回覆為預設值 → 勾選「Blog1」→ 還原所選小工具。



2. 接著執行「一、官方解決方案」的第 1 個步驟即可。

不過如此一來「文章及留言區塊」的所有 hack 都會消失，相信在非萬不得已的情形下，這不會是常改範本的站長之選擇。

因此，方案三雖然比較複雜，但是比較值得參考。



三、進階修改方案

1. 跟「一、官方解決方案」的第 2 個步驟一樣，先找到 <b:include data='post' name='post'/> 這組字串。

2. 緊接其後的，通常會有兩組連續的程式碼──

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>....</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>....</b:if>
如果找不到的話，請一直往下找，一直找到 </b:includable> 為止。如果真的找不到，請自行把以上兩組字串補進去。

3. 檢查以上這兩組字串的「....」部分，如果都是以下字串的話──

<b:include data='post' name='comment_picker'/>
那麼就是 OK 的。

如果是舊範本、或改過的範本，可能就不是以上字串，請改成以上的字串即可，再到後台將 Google+ 的選項開啟 G+ 留言系統試試看。

4. 如果還不行，那代表連「comment_picker」這個區塊的程式碼也被改過，只好自己開一個"全新、乾淨的 blogger"，在範本裡找到 <b:includable id='comment_picker' var='post'>....</b:includable> 這個區間──



複製這個區間的乾淨程式碼，貼到目前部落格裡對應的區間(覆蓋掉)，這樣應該就沒問題了。



四、各種網頁都能安裝的方法

以上是 Blogger 平台的轉換方法，以下根據這個網頁「How to add Google+ Comments to any Website」，提供所有網頁都能安裝 G+ 留言板的程式碼，請放在想顯示的位置即可：

<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
gapi.comments.render('comments', {
href: window.location,
width: '624',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>

更多 Google+ 相關文章：