2011/06/03

Bloggerの共有ボタン

Googleの+1ボタンを設置してみた。

Bloggerでは標準の機能として共有ボタンの1つに既に用意されているけれど、
このテンプレートもそうなのだが、共有ボタンはチェックを入れても表示されない場合がある。
そういう機能に頼らず+1ボタンを設置する方法もあるが、
その共有ボタンを表示させる方法があるようなので、そちらでやってみた。


テンプレートによっては共有ボタンなどが表示されない場合の解決方法

「ウィジェットのテンプレートを展開」にチェック

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

などに以下のコードを追加する。

<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>


さらに任意の共有ボタンを消したい場合は


]]></b:skin>
    <b:template-skin>

<![CDATA[

を探して

]]>
    </b:template-skin>

とで挟まれた部分、後者の直前あたりに以下のコードなどを追加する。

.sb-blog{display:none}
.sb-email{display:none}
.sb-twitter{display:none}
.sb-facebook{display:none}
.sb-buzz{display:none}

なお、テンプレートによってコードが微妙に異なるので、挿入場所など少し異なる場合がある。

追記)
このままではAutopagerize系で追加表示されたページで、ボタンが表示されない。
さらに読み込みに時間が少しかかり、特に設置する意味もないのですぐに外すかもしれない。
またこのテンプレートでは表示されなかったリアクションという機能を表示するためのコードを
書いてくれている人がいたのでそれも追加してみた。
(Bloggerの公式ヘルプフォーラム)

<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'>
<tr>
<td valign='center'><span class='reactions-label'> <data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr>
</table>
</b:if>
</span>