count.jsoonを使って当ブログのシェアボタンを使っている方のTwitterカウント数を取得する方法

注：この記事は、元記事の補完的な役割をしています。
元記事：「【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 - Yukihy Life」「はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life」

昨年の11月に、Twitterがシェア数の表示がなくなりました。

www.yukihy.com

正直Twitterのシェア数は、その記事の人気度を測るものとして役立っていたため、めちゃくちゃ痛かったのですが、実はそれに関する代替案はいろいろ出ていました。

遅れながらもやっとこさ手をつけ、今ではシェア数の表示がほとんど戻ってきたのではないかと思います。

そこで、はてなブログで、さらに当ブログのボタンを使用している方に、シェア数を表示させる方法を書いていきたいと思います。

ちなみにアカウント登録などいろいろやらなければいけないことがあるので、以前のボタンをバージョンアップするようなことはしません。シェア数を表示させたい方のみ、適宜やっていただければと思います。

アカウント取得

今回使うサービスは、「count.jsoon」というものです。

FAQ | widgetoon.js & count.jsoon

まずはアカウントをつくらなければいけないのですが、下に参考記事を貼っておきます。僕自身こちらを見ながら行いました。ありがとうございます！

参考：Twitterのツイート数取得API「count.json」の代替手段「count.jsoon」を使ってみた | parmy683 Blog

アカウント登録を行った後

上のサイトのように「count.jsoon」に登録をすると、サイトから数日間以内にメールが届きます。僕の場合は翌日にきました。

ここからURLに入ると、下のような表示が出てくると思いますが、Twitter連携をしておくことをオススメします。（必ず、連携することを承諾する前に、連携をする上でcount.jsoonに見られるデータを確認の上、承諾してください。）

なぜ連携をすることをオススメするかと言うと、下にスクロールするとこういったことが書かれています。

つまりTwitter連携をしないと、Tweetの収集数がとてつもなく遅くなります。というか、数日たっても全然表示されません。

例えば多くのはてブをいただいたこちらの記事

www.yukihy.com

Tweet数取得をはじめて数日間は、こんな感じでした。

な、なぬー！2Tweetだとー！

このへんでおかしいと思い、Twitter連携をしたら、１日後にはこんな感じに。

ほっと安心( ^ω^ )。ということで、Twitter連携はすることをオススメします。

当ブログのシェアボタンを使っていただいている方

Twitter連携を行ったら、あとは今までのシェアボタンに変更を加えていきます。

jQuery

元記事に書いたjQueryのコードを、こんな感じに貼り替えてください。おそらく「記事下」に貼り付けられていると思います。（Twitterの部分を追加しただけなので、そちらのみ追加していただけてもできるかと思います。２箇所あるので注意してください。）

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

次にHTMLです。これも「Twitter」のところだけ変えていただければOKです。自分がシェアボタンを貼り付けたところの中に、

Before

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>

と書いてあるところがあると思うので、

After

<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" class="twitter-button" target="_blank"><i class="blogicon-twitter lg"></i><br><span class="twitter-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>

に貼り替えていただくと、表示されると思います。

まとめ

以上が、Twitterのシェア数の取得方法となります。

これもTwitterの公式機能ではないので、サービス停止になる可能性は０ではないですが、Twitterの数字ってやっぱりあった方が良いですよね。

っということで、アカウント作成など手順は踏まなければいけないですが、表示させたい方はお試しください！

不具合・質問・改善点などありましたらコメントよりお願いします。また設置代行などはお問い合わせ - Yukihy Lifeからどうぞ〜。

カスタマイズ一覧はこちら。

www.yukihy.com