【修正済】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置する

はてなブログに設置されているソーシャルボタンは、分かりやすい反面読み込みが遅く、何よりレスポンシブデザインに対応していないというデメリットがありました。今回はこの２つを解決してくれる超絶シンプルなマテリアル風ソーシャルボタンのカスタマイズ方法をご紹介します。

【８月２３日追記】

今月Facebookの仕様が変わりシェア数を取得できなくなったため、コードを修正しました。以下に記載してあるものは修正後のコードになりますので、そのままコピペしてお使いください。

【９月７日追記】

Facebookのシェア数がいつまでもぐるぐる回り続けるため、現在当ブログではシェア数非表示バージョンにカスタマイズしています。実装方法については以下の記事をご覧ください。

【シェア数非表示版】はてなブログにレスポンシブ対応のフラットなソーシャルボタンを設置する

【事前準備】count.jsoonに登録する
- 登録方法
jQueryを記入する
- フッター
- 記事下
HTMLを記入する
- 記事上
- 記事下
CSSを記入する
【備考】各種ソーシャルボタンのカラーを変更する
- 参考にしたソーシャルボタンのコードカラー
- 当ブログ用にカスタマイズしたコードカラー

【事前準備】count.jsoonに登録する

Twitterは昨年から仕様が変更され、カウント数が表示されなくなってしまいました。そこでまずはこのツイート数を取得するためにcount.jsoonに登録します。

登録方法

１はてなブログフラットソーシャルボタン

①widgetoon.jsにアクセスし、使用するサイト名、メールアドレスを入力。
②登録したアドレスに「ユーザー登録完了メール」が送られてくるので、ここに記載されているURLから自身のユーザーページへアクセス。
③ユーザーページでは「Twitter連携」を「連携する」にし変更

上記の３ステップでcount.jsoonの登録作業は完了です。

count.jsoonの登録が済んだら次はjQueryを入力していきます。
今回実装するボタンは、Twitter・Facebook・はてなブックマーク・Pocketの４つ。これ以上実装するとスマホで見た時にボタンが小さくなりすぎてしまうので、当サイトでは主要なこの４つのソーシャルボタンだけを表示させています。

jQueryを記入する

フッター

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.entry-header').after($('.sns-header'));
$('.entry-footer').before($('.sns-footer'));
});
</script>

記事下

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Twitterのシェア数を取得
function get_social_count_twitter(url, selcter) {
jQuery.ajax({
url:'https://jsoon.digitiminimi.com/twitter/count.json',
dataType:'jsonp',
data:{
url:url
},
success:function(res){
jQuery( selcter ).text( res.count || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
jQuery.ajax({
url:'https://graph.facebook.com/',
dataType:'jsonp',
data:{
id:url
},
success:function(res){
jQuery( selcter ).text( res.share.share_count || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'http://api.b.st-hatena.com/entry.count?callback=?',
dataType:'jsonp',
data:{
url:url
},
success:function(res){
jQuery( selcter ).text( res || 0 );
},
error:function(){
jQuery( selcter ).text('0');
}
});
}
jQuery(function(){
get_social_count_twitter('{Permalink}', '.twitter-count');
get_social_count_facebook('{Permalink}', '.facebook-count');
get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

HTMLを記入する

記事上

記事のタイトル下にソーシャルボタンを表示させたいときは、はてなブログ→スパナマーク→記事上に以下のコードを追加してください。記事上にソーシャルボタンを表示させたくない人は何も記入しないままでOK。

<div class="sns-header">
<ul class="sns-area">
<li>
<a class="sns-twitter sns-link"
      href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
      class="sns-facebook sns-link"
      href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
<i class="blogicon-facebook lg" ></i><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
      href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}"
      class="hatena-bookmark-button sns-bookmark sns-link"
      data-hatena-bookmark-title="{Title}"
      data-hatena-bookmark-layout="simple"
      title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
      class="sns-pocket sns-link"
      href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
      onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      >
<i class="blogicon-chevron-down"></i></a>
</li>
</ul>
</div>

記事下

ソーシャルボタンを記事下に表示させたいときは、以下のコードをはてなブログ→スパナマーク→記事下に追加してください（上で追加したjQueryコードのすぐ下に入力）。

<div class="sns-footer">
<ul class="sns-area">
<li>
<a class="sns-twitter sns-link"
      href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank">
<i class="blogicon-twitter lg" ></i><span class="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
      class="sns-facebook sns-link"
      href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="facebook-button" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      target="_blank">
<i class="blogicon-facebook lg" ></i><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
      href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}"
      class="hatena-bookmark-button sns-bookmark sns-link"
      data-hatena-bookmark-title="{Title}"
      data-hatena-bookmark-layout="simple"
      title="このエントリーをはてなブックマークに追加">
<i class="blogicon-bookmark lg"></i><span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
</li>
<li>
<a
      class="sns-pocket sns-link"
      href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}"
      onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"
      >
<i class="blogicon-chevron-down"></i></a>
</li>
</ul>
</div>

CSSを記入する

count.jsoon、ソーシャルボタンのコード、jQueryを追加したら、最後にCSSでレスポンシブに対応させていきます。

.sns-header, .sns-footer {
padding: 0px;
}
.sns-area {
padding: 0;
overflow: hidden;
table-layout: fixed;
display: table;
width: 100%;
}
.sns-area li {
list-style-type: none;
display: table-cell;
vertical-align: middle;
}
.sns-area li:last-child {
margin-right: 0
}
.sns-link {
position: relative;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
outline: none;
overflow: hidden;
height: 42px;
line-height: 42px;
}
.sns-link:hover {
text-decoration: none;
opacity: 0.8;
color:#fff;
}
.sns-twitter {
background: #55ACEE;
}
.sns-facebook {
background: #16528e;
}
.sns-bookmark {
background: #0082c8;
}
.sns-pocket {
background: #e8846b;
}

これでディスプレイによってサイズが変わる、可変のソーシャルボタンの実装が完了します。

PCとスマホでの見え方はこんな感じ。

スマートフォン

記事タイトル周辺をごちゃごちゃさせたくない時や、ミニマルサイトのようなすっきりしたブログデザインにはこのようなマテリアル風のソーシャルボタンがとてもマッチします。
当ブログではボタンのカラーを少し暗めにしているので、もっとボタンを目立たせたいときは変更前のカラーコードに戻してみてくださいね。（※備考参照）

【備考】各種ソーシャルボタンのカラーを変更する

当ブログではあまりソーシャルボタンを目立たせなくなかったため、ボタンのカラーの明度を少し低めにしています。
ボタンカラーのコードは以下。

参考にしたソーシャルボタンのコードカラー

４はてなブログフラットソーシャルボタン

.sns-twitter {
background: #55acee;
}
.sns-facebook {
background: #3a5795;
}
.sns-bookmark {
background: #00A5DE;
}
.sns-pocket {
background: #ED4055;
}

当ブログ用にカスタマイズしたコードカラー

５はてなブログフラットソーシャルボタン

.sns-twitter {
background: #55ACEE;
}
.sns-facebook {
background: #16528e;
}
.sns-bookmark {
background: #0082c8;
}
.sns-pocket {
background: #e8846b;
}

参考記事

ウェブ学のススメ

Yukihy Life