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

登録方法

フッター

<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>

記事上

記事のタイトル下にソーシャルボタンを表示させたいときは、はてなブログ→スパナマーク→記事上に以下のコードを追加してください。記事上にソーシャルボタンを表示させたくない人は何も記入しないままで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="fa fa-facebook"></i></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="このエントリーをはてなブックマークに追加">
<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="fa fa-facebook"></i></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="このエントリーをはてなブックマークに追加">
<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>