Google+ 至今已推行多年，其便利留言系統對 Blogger 經營者的幫助尤其之大。
在網際網路日漸發達的現代社會，幾乎人人都有一組 Google 帳號，而且經常是跟隨著 Chrome 瀏覽器長期處於登入狀態，也因此讀者與網站站長的互動就更為便利。
再者，行動裝置的普及也促進許多網站以及部落格平台推出行動版的網頁，目的當然是讓使用手機或平板閱讀文章的時候，能夠有最好的閱讀體驗。
身為部落格平台的龍頭 Blogger ，當然也順著這波趨勢推出了行動版網頁。
在預設範本中， Blogger 會偵測訪客是否是使用行動裝置進入網站，如果是，就會呈現出行動版的網頁。
Blogger 也讓部落客可以自由的修改行動版的樣式以及排版，甚至是加入廣告盈利。
然而，目前 Blogger 行動版網頁和 Google+ 似乎還沒有連結起來。
站長們都知道，當 Blogger 啟用 Google+ 留言系統之後， Blogger 原本的留言系統就會被 Google+ 留言系統取代掉。
但是 Blooger 行動版網頁卻不會跟著出現 Google+ 留言板！
因此，本篇教學就是要解決這個問題，讓你的 Blogger 行動版網頁也顯示出 Google+ 留言板！
前置步驟：
1. 必須開啟 " 在行動裝置上顯示行動版範本 " 這個功能。
（ Blogger 管理後台 > 範本 > 行動服務 ）
2. 必須已經啟用 Google+ 留言系統。
（ Blogger 管理後台 > Google+ ）
本文開始~
這篇教學的靈感是來自於 「 Google+ 留言板消失 」這個問題，在網路上找到這個問題的解決方法後，就把語法應用在行動版範本上面，果然奏效了！
在這邊分享給大家~
「 Google+ 留言板消失 」這個問題的解決方法如下：
在範本視窗中搜尋以下字串：( Ctrl+F or Cmd+F )
<b:if cond='data:blog.pageType == "item"'>
一般會找到兩個，這邊請找出是被以下 Class 涵括起來的：
<div class='post-footer-line post-footer-line-3'>
如圖所示：(也有可能不是在 footer-line-3 ，敬請依照個人的情況作變通)
請在 <b:if cond='data:blog.pageType == "item"'> 以及 </b:if> 中間新增一道指令：
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
或是使用新版的語法：
<div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
*注意：先使用綠色的指令，如果綠色版本的指令沒有任何作用，再改用藍色新版的！
如圖所示：
完成之後按下 " 儲存範本 " ，消失的 Google+ 留言板就會回來囉！
P.S. 如果沒找到 <b:if cond='data:blog.pageType == "item"'> 的話，只要新增以下指令在 <div class='post-footer-line post-footer-line-3'> 這個 Class 內即可！
<b:if cond='data:blog.pageType == "item"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
</b:if>
如果使用藍色新版的語法會是像這樣：
<b:if cond='data:blog.pageType == "item"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
</b:if>
再來就到本篇文章的重頭戲了~
如何在 Blogger 行動版網頁顯示 Google+ 留言板？
由上述教學可知，
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
這道指令就是 Google+ 留言板的本體，因此只要把這道指令依樣畫葫蘆複製到行動版範本中適當的位置，行動版網頁就能夠顯示 Google+ 留言板囉！
請在範本視窗中搜尋以下字串：
mobile-post
應該會搜尋到 <b:includable id='mobile-post' var='post'>
如下圖所示：
按下 " ... " 展開程式碼！
<b:includable> 以及 </b:includable> 是成對的，請找到與 <b:includable id='mobile-post' var='post'> 配對的 </b:includable> ，然後在其之前插入以下指令：
<b:if cond='data:blog.pageType == "item"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
</b:if>
如果使用藍色新版的語法即插入以下指令：
<b:if cond='data:blog.pageType == "item"'>
<div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
</b:if>
如圖所示：
完成之後按下 " 儲存範本 " ，你的行動版網頁就會顯示 Google+ 留言板了！
請試著使用行動裝置瀏覽你的任何一篇文章， Google+ 留言板就在文章的下方~
如何在 Blogger 行動版網頁顯示 Google+ 留言板的教學就到這邊~
我們下次見~
