カスタマイズ3：記事の上下にシェア用ソーシャルボタンを設置

はてなブログにはTwitterなどのシェアボタンが標準で付いていますが、読み込み速度やデザインの関係からオリジナルのものに差し替えたい場合もあります。ZENO TEALではあらかじめスタイリングしたシェアボタンを用意してあります。

シェアボタンの設置方法

まずはブログのデザイン設定を開き、スパナマークのカスタマイズタブを開きます。

その中の記事にある記事上の入力欄をクリックします。

そしてここにhtmlコードを入力します。入力するコードは以下を参考にしてください。

<div class="snsbtns1">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="sns-fb">Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}', '', 'width=500,height=400'); return false;" class="sns-tw">Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="sns-po">Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button sns-hb" data-hatena-bookmark-layout="simple">Hatebu</a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div>

記事上の場合はタイトル下に表示されますが、記事終わりに表示したいときは同じコードを記事下に入力してください。

表示デザイン

シェアボタンは「Facebook」「Twitter」「Pocket」「はてなブックマーク」のみです。他のものを使いたいときは、アイコンフォントがないのでFontawesomeなどを使ってください。

デザインは4つ用意してあります。コードの最初の<div class=“snsbtns1”>の最後の数字部分を変えれば別のデザインになります。

snsbtns1

Facebook Twitter Pocket Hatebu

これが基本ですね。

snsbtns2

Facebook Twitter Pocket Hatebu

それぞれのアイコンを大きく薄く、そしてちょっとはみ出させてみました。

snsbtns3

Facebook Twitter Pocket Hatebu

背景色の彩度を落として落ち着かせてみました。

snsbtns4

Facebook Twitter Pocket Hatebu

角丸にして、フラットな色ながら立体的にしてみました。押せるボタンというのが分かりやすいデザインです。

まとめ

もちろん、これに限らずほかにもはてなブログ用にシェアボタンを公開しているブログがたくさんありますので、それらを使ってもいいでしょう。うまく似合うものを探してください。

追記

2017.04.09

はてなブックマーク部分のコードを変更しました。（一部環境でうまく動作しない場合がありました。）
旧

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="sns-hb">Hatebu</a>

新

<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button sns-hb" data-hatena-bookmark-layout="simple">Hatebu</a>

classにhatena-bookmark-buttonを追加、またdata-hatena-bookmark-layout=“simple"も追加。

参考

www.foxism.jp