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

よなかのはなし

LifeHacks And Hello!Project Blog

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

ブログ はてなブログ カスタマイズ

f:id:hiroseyonaka:20160907014308p:plain

先月Facebookの仕様が変わり、記事に設置していたボタンでシェアカウントを取得できなくなりました。

この記事でご紹介するのは、ボタンがいつまでもぐるぐる回り続けていたためイラッとしてFacebookのシェア数カウントを非表示にした改良版です。FBは犠牲になったのだ……。


また、旧バージョンのはてなブックマークボタンアイコンを「B!」へ変更し、それに伴ってCSSに修正を加えています。以下に記載してあるものは修正後のコードになりますので、そのままコピペしてお使いください。


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

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

登録方法

f:id:hiroseyonaka:20160512205721p:plain


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


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

jQueryを記入する

count.jsoonの登録が済んだら次は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="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>
    

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

.hatena-bookmark-button::before {
   content: "B!";
   font-weight: bold;
   font-size: 1em;
   padding-right: 0.3em;

}

.lg[class*="blogicon-twitter"] {
    padding-right: 0.5em;
    margin-right: 0px;
}


上記のコードは修正後(9月7日変更)のものになります。シェア数を非表示にしたバージョンの見た目はこんな感じ。


PC

f:id:hiroseyonaka:20160907014308p:plain


スマートフォン

f:id:hiroseyonaka:20160907014318p:plain