以前行ったブログカスタマイズにて…

コメント欄のタブ切替化

タブ切替でコメント欄をコンパクト化 | ひいろんＢＬＯＧ

タブにSNSコメント数を表示

ここ最近のブログカスタマイズ | ひいろんＢＬＯＧ

を済ませましたが、唯一Twitterのツイート数のみ未対応でして
若干モヤモヤした状態で放置していましたが…

ここ最近Wordpressで構築したパズドラ日記ばかりでなく
こちらのブログの方も動かしていこう…って事で
重い腰を上げて(?)スッキリさせてみようと思います[icon:音符]

ツイート数がTwitter提供のAPI廃止によって表示されなくなったのは
サイト運営者の方でしたらご承知の通り。。

参考リンク
持続的なプラットフォームのための難しい決断【Twitter開発者ブログ】

って事で「widgetoon.js & count.jsoon」なるサービスを利用してツイート数を取得します。

「widgetoon.js & count.jsoon」登録方法

「widgetoon.js & count.jsoon」にアクセスして
サイトＵＲＬをメールアドレスをフォームに入力するだけでＯＫ。
その後登録したメールアドレス貼られたマイページのＵＲＬにアクセスし


ツイッターと連携させるだけです。
連携させなくても使えるみたいですがツイート回収速度が違うそうなので
（比較してないのでどの程度なのかは謎…爆）
連携させて使います。。

ちなみに１サイトにつき１アカウントのみとなるので（多分）
ひいろんの場合パズドラ日記用と別にツイッターアカウントを作る事に。。。

ツイート数表示方法

「widgetoon.js & count.jsoon」のAPIを使ってツイート数の表示を行います。

APIサンプル

http://jsoon.digitiminimi.com/twitter/count.json?url=【取得したいＵＲＬ】

っつ〜事で
下記サイトさんを参考に…
jQueryコードを使ってツイート数の表示をさせます。

んで、ひいろんが施したのが下記になります。。

</body>の手前に…

<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('{entry_permalink}', '.twitter-count');
});
</script>

※Serene Bachの独自タグ{entry_permalink}を使用してます。

表示させたい所に…

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

こんな風に記してあげればＯＫです。

っつ〜事で…


無事に反映されました(^▽^

こうなってくるとカウント数付きオリジナルSNSボタンとか作りたくなってきちゃいますが…

まぁ、それは今後のお楽しみというところで（爆