Simplicity2.0.1でこの記事で書かれているカスタマイズ方法を機能化しました。
先日、count.jsoonという廃止されたTwitterのシェア数（ツイート数）を取得できるAPIの存在を知りました。
で、このAPIを利用してjQueryと組み合わせて、ツイート数を取得する方法について書きました。
ただ、この方法は、どんなテーマでもカスタマイズ出来るように、汎用的な書き方をしました。
ですので、Simplicityに適用させるには、具体的にどのようにすればよいかわからない方もおられたかと思います。
そこで、この記事では、Simplicityでどのようにカスタマイズすれば、ツイート数を表示することができるか、具体的に書きたいと思います。
なお、今回のカスタマイズは、Simplicity1.9.3以上推奨です。また、子テーマを利用したカスタマイズを想定して方法を書きます。
主な手順
count.jsoonとPHPでツイート数を取得できるようにカスタマイズするのに必要な主な手順は以下です。
- count.jsoonにウェブサイト登録
- カスタマイザーの設定
- sns-buttons-balloon.phpの編集
- sns-buttons-icon.phpの編集
- javascript.jsにスクリプトをコピペ
登録してシェア数の収集を待つのが一番大変かも。
count.jsoonにウェブサイト登録
まずは、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ボタンも非同期でシェア数を取得できます。
バイラルタイプも同様に非同期取得されます。
モバイル時も同様です。
まとめ
count.jsoonに登録したてならば、あとはひたすらツイート数の収集を待ちます。
数日ほどたてば、少しずつ、ツイート数が反映されるのではないかと思います。
count.jsoonで正しい数字が表示されるかわかりません。ただそれをいえば、Twitterのcount.json自体も正しい数字が出ていたわけではないけど。正しくない数字ということで、辞める理由の一つとなっていたし。その他にも、count.jsoonを利用することによる課題はいくつかあると思います。
あと、count.jsoonを利用してのTwitterシェア数の表示は、Simplicityのデフォルトを機能にするつもりは今のところありません。
というのも、利用するのにサイト登録という初期設定が必要だからです。ブログの初期設定時に、設定することが多すぎると（今でも十分多いのに）、僕だったら、面倒くさくなるので、デフォルト機能にはしないと思います。
ですので、ツイート数を表示させたい場合は、各自の責任で、独自カスタマイズでお願いします。
↑上記のようなサービス固有タイプのボタンにツイート数を表示させるには、以下の方法を行ってください。
