2011年10月3日 星期一

在部落格單篇文章新增Google Plus button的按鈕


應讀者要求來寫Google Plus新社交工具的按鈕吧,其實網路上已經有很多文章,不過還是來寫一下,畢竟Google的Blogger不用這工具,實在是說不過去,尤其最近全面開放後,聽說已經有5000萬人加入了,後勢可期啊。

按鈕的語法,在Google官網已有說明,請參考+1您的網站


覺得哪種格式適合你的部落格,就選那種樣式,綸太郎覺得目前Facebook是主流,所以配合FB按鈕的大小,也是選擇長 (60 像素)的按鈕。

其他的設定都不用管(綸太郎也不曉得那做什麼用),維持原始的狀態,例如剖析,你如果選了"explicit",則按鈕無法顯示。

你可以看見有顯示兩段程式碼,很多人可能就是這裡發生錯誤,不知道要怎樣放程式碼在你的後台Html裡,


官方提供的程式碼如下,
<!-- 請將這組標籤置於 <head> 標籤之後或 </body> 標籤之前。 -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- 請將這組標籤置於 +1 按鈕該出現的位置。 -->
<g:plusone size="tall"></g:plusone>


進入Blogger 後台,選擇設計→修改Html,然後勾選展開小裝置範本

將第一段程式碼,放在
</head>
之前,像下圖這樣


而重要的就是顯示位置放那裡,就是第二段程式碼,綸太郎的部落格G+的顯示位置是在單篇文章的日期後頭,文章標題之前,如果不熟悉Html架構的自己放可能有些困難,但之前你已經有這些社交按鈕,就找到同樣位置把它插入即可,如果沒有的,仔細看以下的文章。

請參考此圖對照說明,


找到以下這段語法,這是主要文章區(淺綠色那行)
<b:include data='post' name='post'/>
然後在上方幾行部分,就是這段<b:if cond='data:post.isDateStart'>程式碼的上方,新增以下社交工具程式碼

將第二段程式碼, 淺粉紅色的程式碼放上,
<g:plusone size="tall"></g:plusone>
你會發現怎我的程式碼沒有後面的結束語法,例如</g:plusone>,因為Blogger儲存後會自動把這段刪掉,另外我用
<span style='padding-left: 3px; padding-right:3px;'>....第二段程式碼....</span>
這是樣式碼,調整跟左右圖片的距離,如果有需要再加入。

而Google Plus的程式碼前面是Facebook按鈕的語法,後面則是Plurk的語法。

到目前為止,加完後程式碼會在各個頁面出現,例如主頁,或是分類頁面,如果要在單篇文章出現,則前後要用以下程式碼圍起來,就是圖片上淺橘色的部份
<b:if cond='data:blog.pageType == &quot;item&quot;'>
.
...你的程式碼...
.
</b:if>

以上這樣修改就完成了,每個模版的語法可能不盡相同,可以多自己試看看,多操作幾次應該就可成功,記得修改程式碼之前要儲存原有的模板,才不會改壞了,有需要的朋友可以試看看。

8 則留言:

  1. 感謝您的教學,
    先前試了很久都無效,
    看了您的方法,這+1按扭才出現.

    回覆刪除
  2. 有效就好,我以為你不裝這些的。

    回覆刪除
  3. 我也成功了,謝謝您。

    回覆刪除
  4. 成功就好,也不枉費我寫這篇了。

    回覆刪除
  5. 請問要怎麼隱藏原有的+1與其他圖示? 謝謝

    回覆刪除
  6. 後台→設計→文章編輯,把"顯示分享按鈕 "勾選拿掉即可。

    回覆刪除
  7. 好久沒來報到了,最近又開始拾回寫格文的習慣了。先過來您這取經。

    回覆刪除
    回覆
    1. 真的好久不見,我這裡也荒廢很久了,哈哈。

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能