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

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

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

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

スポンサーリンク
レクタングル(大)広告

主な手順

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

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

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

count.jsoonにWEBサイト登録

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

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

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

登録後に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()で条件分岐してあります。

ツイート数を表示させたい箇所に要素を挿入

あとは、ツイート数を表示したい箇所に以下のコードを書きます。

<span class="twitter-count">0</span>

先程の関数呼び出しで、第2引数のCSSセレクタに「.twitter-count」クラスを使ったので、それに対応したHTMLを挿入します。

適用例

例えば、CSSで以下のようなボタンを作成して、バルーン内に「.twitter-count」クラスを持った要素を置けば、その要素内にツイート数が表示されます。

表示例

count.jsoonでバルーン内にツイート数を呼び出した場合

動作例

このページのツイート数→

↑上記のツイート数は、最初は0ですが、このURLがツイートされ、count.jsoonによってツイート数が集計されれば、そのうち反映されると思います。

このページの上下にある、Twitterボタンにも、このページのツイート数が表示されていると思います。

ツイート数を取得する前 → ツイート数を取得した後

上記で利用しているバルーンスタイルの例は以下。

先日、自分のサイトテーマで使おうと思ってバルーン型のソーシャルボタンを作ってみました。ソーシャルサービス純正のバルーン型シェ...

まとめ

count.jsoonのAPIは、Twitterの「非公式ツイート数取得API」であったcount.jsonと、ほとんど使い方が同じです。

なので、以前の取得用コードを少し手直しするだけでjQueryからも、簡単に非同期でツイート数を取得することができました。

手順だけに限って言えば、特に難しいカスタマイズでもないと思います。

一番大変なのは、count.jsoonに登録して、ツイート数を収集するまで何日かかかるので、それを待つことかもしれません。

これでとりあえず、count.jsoonの一般的な使用方法について書きたいことは書きました。Simplicityでのカスタマイズ方法は、後でテーマ配布サイトの方で書きたいと思います。

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

  1. 名前:ボヘミアン 投稿日:2015/12/11(金) 08:55:42 ID:f7596c8f1

    こちらの記事のおかげで、ツイート数を取得することができました。
    ありがとうございます。

  2. アバター画像 名前:わいひら 投稿日:2015/12/12(土) 13:55:58 ID:9b2d25622

    記事がお役にたててよかったです。
    他の方が行っても、うまく動作することが確認できて安心しました。