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

太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログでTwitterのシェア数を文字列取得(カウントAPI廃止対応)

f:id:bulldra:20160113091142j:plain

TwitterのカウントAPIの廃止に対応

 2015年11月20日からTwitterのカウントAPIが廃止された影響で、はてなブログ内のTwitterのシェアボタンからシェア数の表示が消えた。はてなブックマークやFacebookがあるとはいえ、ソーシャルの反響を測るための指標としてツイート数は重要な要素であった。今回紹介するのは、カウントAPIの廃止後もはてなブログでTwitterのシェア数を取得する方法である。

count.jsoonに登録

 ツイート数を取得する方法はいくつかあるが、今回は『widgetoon.js & count.jsoon | digitiminimi』を利用する。

「widgetoon.js」と「count.jsoon」は、TwitterのAPIを使ってツイートを収集、ツイート内のURL情報をカウントしています。APIは、このURL情報を元にツイートされた件数と、公式RTと非公式RTの数を集計、総カウント数を算出します。

利用するためには、まずウェブサイトを登録します。登録することで、収集の対象となるツイートを限定することができます。さらにサービス側では、登録されたURLを元に検索に使用できるキーワードを選別、収集対象に追加していきます。

サービスについて | widgetoon.js & count.jsoon

 まずは収集対象とするブログのURLを登録する。

f:id:bulldra:20160113083348j:plain

 1営業日ほど待つと登録完了メールが届く。自分のTwitterアカウントを連携することでクロール速度を早めることができる。

はてなブログでcount.jsoonを利用するスクリプト

 count.jsoonを利用するためのURL形式は以下の通り。

http://jsoon.digitiminimi.com/twitter/count.json?url={エンコード済みURL}

 利用する場合にはデザイン画面の記事下に以下のようなスクリプトを設置。

<script type="text/javascript">
function appendTwShareCount(clazz, permalink) {
  $.ajax({
    url: 'http://jsoon.digitiminimi.com/twitter/count.json?url=' + permalink,
    dataType: 'jsonp' ,
    success:function(obj)    {
      var count = 0 ;
      if(obj.count) {
        count = obj.count ;
      }
      $(clazz).append('(' + count + ')') ;
    },
    error:function() { $(clazz).append('(0)'); } ,
    complete:function() { return false ; }
  }) ;
}

appendTwShareCount('.share_tw','{URLEncodedPermalink}');
</script>

バイラルメディア風シェアボタンにツイート数を表示

 このブログではバイラルメディア風のシェアボタンにしているため、単純に文字列を足しているが、設置するボタンによってsuccess内のcountを利用すればOK。

 通常のウィジットを表示させる場合には『APIの使い方 | widgetoon.js & count.jsoon』にある手順を参照のこと。最近流行りのスタリッシュなシェアボタンであれば、ゆきひー(id:ftmaccho) さんが対応してくれるだろうと思ったら既に同じ方法で作られていた事にいま気付いた。。。この記事はもっと低レベルな処理を作るための備忘録ということで。

ほかのサービスでも同じように表示

 Facebookとはてなブックマークも同じ仕組で表示させているので、そちらのスクリプトもついで貼り付けておく。サービスごとに微妙に違うのがいやらしい。

/* facebook */
function appendFbShareCount(clazz, permalink) {
  $.ajax({
    url: 'https://graph.facebook.com/?id=' + permalink,
    dataType: 'jsonp' ,
    success:function(obj) {
      var count = 0 ;
      if( obj.shares ) {
        count = obj.shares ;
      }
      $(clazz).append('(' + count + ')');
    },
    error:function() { $(clazz).append('0'); },
    complete:function() { return false ; }
  });
}

/* はてなブックマーク */
function appendHbShareCount(clazz, permalink) {
  $.ajax({
    url: 'http://api.b.st-hatena.com/entry.count?url=' + permalink,
    dataType: 'jsonp' ,
    success:function(obj) {
      var count = 0;
      if(obj) {
        count = obj;
      }
      $(clazz).append('(' + count + ')');
    },
    error:function() { $(clazz).append('(0)'); },
    complete:function() { return false ; }
  });
}

 カウントAPI廃止後もTwitterのシェア数を文字列として取得してごにょごにょするためにはcount.jsoonがいいぞということで。

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)