Simplicityの独自Twitterボタン(バルーンやバイラルボタン)に非同期でツイート数を表示するカスタマイズ方法

Simplicity2.0.1でこの記事で書かれているカスタマイズ方法を機能化しました。

先日、count.jsoonという廃止されたTwitterのシェア数(ツイート数)を取得できるAPIの存在を知りました。

で、このAPIを利用してjQueryと組み合わせて、ツイート数を取得する方法について書きました。

count.jsoon APIを用いて、Twitterのcount.json APIのようにツイート数を取得する方法です。今回は、Wordpress上でjQueryを用いてシェア数を取得します。

ただ、この方法は、どんなテーマでもカスタマイズ出来るように、汎用的な書き方をしました。

ですので、Simplicityに適用させるには、具体的にどのようにすればよいかわからない方もおられたかと思います。

そこで、この記事では、Simplicityでどのようにカスタマイズすれば、ツイート数を表示することができるか、具体的に書きたいと思います。

なお、今回のカスタマイズは、Simplicity1.9.3以上推奨です。また、子テーマを利用したカスタマイズを想定して方法を書きます。

主な手順

count.jsoonとPHPでツイート数を取得できるようにカスタマイズするのに必要な主な手順は以下です。

  1. count.jsoonにウェブサイト登録
  2. カスタマイザーの設定
  3. sns-buttons-balloon.phpの編集
  4. sns-buttons-icon.phpの編集
  5. javascript.jsにスクリプトをコピペ

登録してシェア数の収集を待つのが一番大変かも。

count.jsoonにウェブサイト登録

まずは、count.jsoonにウェブサイトを登録する必要があります。

登録方法については、以下に書いてあるので手順に従って登録してください。

widgetoon.jsスクリプトと、count.jsoonAPIサービスを利用して、サイトやページごとのツイート数を取得するWordpressカスタマイズ方法の紹介です。count.jsoonコードの使い方など。

count.jsoonは、登録してからシェア数情報を収集するので、カウントが反映するまで結構時間がかかります。(だいたい3日~10日くらい?)

カスタマイザーの設定

まずは、PHPで直接表示するのにSNSボタンは「Simplicity独自ボタン」を

表示させます。

「外観→カスタマイズ→SNS」から「シェアボタンのタイプ(PC)」を「デフォルト(サービス固有のボタン)」以外を設定してください。

シアバターのタイプをサービス固有ボタン以外にする

「デフォルト(サービス固有のボタン)」以外ならどれでもいいです。今回は「テーマカラータイプ」を例にして説明したいと思います。

「テーマカラータイプ」というのは、このタイプのボタンのことです。

カスタマイザー前のテーマカラーボタン

sns-buttons-balloon.phpの編集

まずは親テーマから子テーマフォルダ内にsns-buttons-balloon.phpファイルをコピペします。

子テーマ内のsns-buttons-balloon.phpファイルをエディターで開いて以下の部分を探して

<span class="fa fa-comments"></span><!-- <span class="fa fa-spinner fa-pulse"></span> --></span>

以下のように変更します。

<span class="fa fa-spinner fa-pulse"></span>

sns-buttons-icon.phpの編集

こちらも先程と同様に、親テーマから子テーマフォルダ内にsns-buttons-icon.phpファイルをコピペします。

子テーマ内のsns-buttons-icon.phpファイルをエディターで開いて、以下の部分を探し

<!-- <span class="social-count twitter-count"><span class="fa fa-spinner fa-pulse"></span></span> -->

コメントアウトして以下のように変更します。

<span class="social-count twitter-count"><span class="fa fa-spinner fa-pulse"></span></span>

javascript.jsにスクリプトをコピペ

最後に、子テーマ内のjavascript.js内に以下のコードをコピペで追記します。

function fetch_twitter_count_from_count_jsoon(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(){
  if (typeof social_count_config !== 'undefined') {
    //シェアボタンを全部表示しているとき
    if ( social_count_config.all_sns_share_btns_visible &&
         social_count_config.all_share_count_visible ) {

      fetch_twitter_count_from_count_jsoon(social_count_config.permalink, '.twitter-count');

    };
  }
});

動作

このカスタマイズを行うと、以下のようにTwitterボタンも非同期でシェア数を取得できます。

Twitterボタンも非同期読み込みがされる

バイラルタイプも同様に非同期取得されます。

バイラルタイプでも同様に非同期取得される

モバイル時も同様です。

モバイルボタンも同様に非同期取得される

まとめ

count.jsoonに登録したてならば、あとはひたすらツイート数の収集を待ちます。

数日ほどたてば、少しずつ、ツイート数が反映されるのではないかと思います。

count.jsoonで正しい数字が表示されるかわかりません。ただそれをいえば、Twitterのcount.json自体も正しい数字が出ていたわけではないけど。正しくない数字ということで、辞める理由の一つとなっていたし。その他にも、count.jsoonを利用することによる課題はいくつかあると思います。

あと、count.jsoonを利用してのTwitterシェア数の表示は、Simplicityのデフォルトを機能にするつもりは今のところありません。

というのも、利用するのにサイト登録という初期設定が必要だからです。ブログの初期設定時に、設定することが多すぎると(今でも十分多いのに)、僕だったら、面倒くさくなるので、デフォルト機能にはしないと思います。

ですので、ツイート数を表示させたい場合は、各自の責任で、独自カスタマイズでお願いします。

Simplicityの独自Twitterボタンにcount.jsoonを用いて非同期でツイート数を表示するカスタマイズ方法

↑上記のようなサービス固有タイプのボタンにツイート数を表示させるには、以下の方法を行ってください。

Simplicity2.0.1でこの記事で書かれているカスタマイズ方法を機能化しました。 先日、count.jsoonという廃止された...
Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)