v 在部落格單篇文章新增Google Plus button的按鈕 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...