【Blogger】ソーシャルボタンを配置してみた

Bloggerのデフォルトで表示されるSNSのボタンがイケてないなぁと感じていたので、
なんとかならんかなぁと調べて変えてみた。

参考サイト

Blogger にソーシャルボタンを設置する際に参考になったページとノウハウ
Blogger に Twitter & Hatena & Google+1 & Facebook のボタンを設置する
Bloggerへ各種ソーシャルボタンを各記事ごとに設置する方法

ホントはタイトルの下に配置したかったんだけど、
どこに配置すればよいのかわからなかったので、
とりあえず、コメント投稿のところに配置してみた。

<!-- Twitter & Hatena & Google+1 & Facebook -->
<div style='margin: 4px 0px 0px 0px;'>
<table><tr>
<td style='vertical-align:top;'>
<a class='twitter-share-button' data-lang='ja' data-via='自分のアカウント' href='https://twitter.com/share'>ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</td>
<td style='vertical-align:top;'>
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:post.title + &quot; : &quot; + data:title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.url' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;'/></a>
<b:if cond='data:post.isFirstPost'>
<script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>
</b:if>
</td>
<td style='vertical-align:top;'>
<script src='http://static.evernote.com/noteit.js' type='text/javascript'/><a expr:onclick='&quot;Evernote.doClip({providerName:\&quot;&quot; + data:title + &quot;\&quot;, title:\&quot;&quot; + data:post.title + &quot;\&quot;, url:\&quot;&quot; + data:post.url + &quot;\&quot;}); return false;&quot;' href='#'><img alt='Clip to Evernote' src='http://static.evernote.com/article-clipper.png'/></a>
</td>
<td style='vertical-align:top;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</td>
</tr>
</table>
</div>

案外簡単でしたー。