読者です 読者をやめる 読者になる 読者になる

FutureInsight.info

AI、ビッグデータ、ライフサイエンス、テクノロジービッグプレイヤーの動向、これからの働き方などの「未来」に注目して考察するブログです。

はてなブログの記事上に吹き出し型のソーシャルボタンを設置する方法

ちょっとブログのデザインをいじっていまして、記事上に吹き出し型のソーシャルボタンを設置してみました。

その他にも、Feedlyの登録ボタンとFacebookページのいいねボタンも設置していますが、そちらは人によって、何を設置したいか様々でしょうが、ソーシャルボタンは自分も設置してみたいと思う人がいるかもしれないので、簡単に自分の方法を説明しておきます。

方法は簡単で、ブログの設定画面から「デザイン」を選択し、PC画面のカスタマイズを行います。「記事」にある「記事上下のカスタマイズ」の「記事上」を以下に設定するだけ。

<table border=0 cellspacing=10>
<tr>
  <th><a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></th>
  <th><div class="fb-like" data-href="{Permalink}" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
</th>
  <th><a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></th>
  <th><div class="g-plusone" data-size="tall" data-href="{Permalink}"></div></th>
  <th><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script></th>
</tr>
</table>

はてなブログの中で、ソースの中の{Permalink}が勝手に、記事のURLに置換されるので、上のコードでどのはてなぶブログの記事上でも汎用的に動くはず。

とりあえず、どんな環境でも使えるようにTableレイアウトにしていますが、弄りたい人はスタイルシートで頑張ってもらえば良いかとおもいます。ボタン増やしたい時はtableのthタグを増やしてください。