Tweet数、いいね数、はてブ数をjQueryのAjaxで取得する方法。

2013/03/02

Written by: EISUKE

Category: IT

NewImage
ブログの記事に対するソーシャルの反応は、気になりますよね。なのでPHPでTweet数、いいね、はてブなどの件数を取得しようと思ったら、異常にサイトが重くなってしまうことがわかりました。
どうしたものかと思ったんですが、jQueryのAjaxを使うことで件数の取得が高速に出来ました。

サンプル

<script type='text/javascript'> var socialCount = function (_id, _url) {
$.ajax({ type: 'GET', url:'http://urls.api.twitter.com/1/urls/count.json', data: { url : encodeURI(pageURL), noncache: new Date() }, dataType: 'jsonp', success: function(data) { $('#twitter' + _id).text(data.count + ' tweets'); }, error: function(data){ $('#' + _id).append('E'); } });
$.ajax({ url : 'https://graph.facebook.com/' + pageURL, dataType : 'jsonp', success : function(data){ $('#share' + _id).text(data.shares + ' shares'); } });
$.ajax({ url : "http://api.b.st-hatena.com/entry.count", data : {url : pageURL}, dataType : "jsonp", success : function(data){ $('#hatebu' + _id).text(data + ' hatebu'); } }); } </script>
<!--html部分-->
<?php if(have_posts()): while(have_posts()): the_post(); ?> <?php $count = 1; $tgt = get_permalink(); ?>
//記事表示
<script> socialCount( '<?php echo $count;?>',　'<?php echo $tgt; ?>' ); </script> <div id="twitter<?php echo $count; ?>" class="tweetcount"></div> <div id="share<?php echo $count; ?>" class="facebookcount"></div> <div id="hatebu<?php echo $count; ?>" class="hatebucount"></div>
<?php $count++; ?> <?php endwhile; endif; ?>

ここで、ポイントとなっているのが、関数に渡す引数が（ID、URL）となっているところです。僕はWordPressのIndex.phpでこのプログラムを回していますが、記事一覧ごとにユニークIDを割り振らないと行けません。
ちょっと、難しいですがPHPで書くより数倍早くなりました！