jQueryとcount.jsoonを用いてTwitterのシェア数を取得するWordPressカスタマイズ方法

前回、count.jsoonのAPIとPHPでツイート数を取得する方法を紹介しました。

PHPとcount.jsoonを用いてTwitterのシェア数を取得するWordPressカスタマイズ方法

前回、count.jsoonを用いてシェア数付きのバルーンボタンを設置する方法を書きました。ただ、上記の記事では、count.j...

nelog.jp

2015-11-27 18:53

今回は、ツイート数（シェア数）の取得を、jQueryで非同期的に取得する方法の紹介です。

主な手順

count.jsoon APIをjQueryから利用して、ツイート数を取得するには、主に以下の手順が必要です。

count.jsoonにWEBサイト登録
フッター手前にjQueryコードを貼り付ける
ツイート数を表示させたい箇所に要素を挿入

count.jsoonにサイト登録さえしてあれば、2回のコピペでカスタマイズできます。

count.jsoonにWEBサイト登録

まず、count.jsoonでツイート数を取得するには、該当サイトを登録してある必要があります。

登録方法は、以下に書いてあるので、とりあえずWEBサイト登録をしてください。

廃止されたTwitterの「シェア数付きボタン」を表示させる方法、「count.jsoon」の基本的な使い方

先日、Twitterのカウント数が取得できなくなりました。その代替案として、ツイート数のバルーンが無くなって崩れたデザインを...

nelog.jp

2016-01-12 20:33

登録後にcount.jsoonは、ツイート数を収集するので、ある程度（数日ぐらい）待たないと、ツイート数が反映されないと思います。

フッター手前にjQueryコードを貼り付ける

あとは、通常のテーマならば、footer.phpあたりにある</body>タグ手前あたりに以下のコードをコピペしてください。

<?php if ( is_singular() )://投稿・固定ページのみ ?>
<script type="text/javascript">
//Twitterのツイート数取得関数（URLのツイート数を指定したCSSセレクタに表示）
function fetch_twitter_count(url, selector) {
  jQuery.ajax({
    url:'http://jsoon.digitiminimi.com/twitter/count.json',
    dataType:'jsonp',
    timeout: 10000, //10sec
    data:{
      url:url
  },
  success:function(res){
    jQuery( selector ).html( res.count || 0 );
  },
  error:function(){
    jQuery( selector ).html('error');
  }
  });
}

jQuery(function(){
  //ツイート数取得関数の呼び出し
  fetch_twitter_count('<?php echo get_permalink(); ?>', '.twitter-count');
});
</script>
<?php endif ?>

関数の1つ目の引数には、ツイート数を取得したいURLを指定します。

2つ目の引数には、取得したツイート数を表示する要素を指定するCSSセレクタを指定してください。

jQueryのスクリプトは、投稿・固定ページのみで利用するのでis_singular()で条件分岐してあります。