Search in This Site

㊕ 天氣逐漸轉涼,早晚需注意保暖以免著涼:D ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ 本站的留言系統全面採用 Google+ ,歡迎多多與我們互動! ☏ 對網站有任何問題或建議,都非常歡迎使用"Guestbook"留言板,讓我們知道您的想法喔 (。◕∀◕。)

2015年6月23日 星期二

[ Blogger ] [ XML ] 如何在 Blogger 行動版網頁顯示 Google+ 留言板

標籤: , , , , , ,

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 == &quot;item&quot;'>


一般會找到兩個,這邊請找出是被以下 Class 涵括起來的:

<div class='post-footer-line post-footer-line-3'>

如圖所示:(也有可能不是在 footer-line-3 ,敬請依照個人的情況作變通)



請在 <b:if cond='data:blog.pageType == &quot;item&quot;'> 以及 </b:if> 中間新增一道指令:

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

如圖所示:



完成之後按下 " 儲存範本 " ,消失的 Google+ 留言板就會回來囉!


P.S. 如果沒找到 <b:if cond='data:blog.pageType == &quot;item&quot;'> 的話,只要新增以下指令在 <div class='post-footer-line post-footer-line-3'> 這個 Class 內即可!

<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'/>
</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 == &quot;item&quot;'>
<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>
</b:if>

如圖所示:





完成之後按下 " 儲存範本 " ,你的行動版網頁就會顯示 Google+ 留言板了!

請試著使用行動裝置瀏覽你的任何一篇文章, Google+ 留言板就在文章的下方~



如何在 Blogger 行動版網頁顯示 Google+ 留言板的教學就到這邊~

我們下次見~



TOP