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で書くより数倍早くなりました!

河村 嘉之,川尻 剛,福沢 知海
技術評論社 2007-11-23
¥ 3,570

Back To Top