JavaScriptでSNSのカウンターを取得する

fujihara

2015.07.09

どうもfujiharaです。
連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。
本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3

めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、
カウント数のみをJSONで取得する仕様に変更

についての実装方法を説明します。

流れ

たいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。

はてブ数の取得

はてブ数の取得方法です。


// 問い合わせURL は "http://api.b.st-hatena.com/entry.count"
// クエリーは url となります。
<script>
$.ajax({
  url:'http://api.b.st-hatena.com/entry.count' + '?url=' + '取得したい記事のURL',
  dataType: 'jsonp'
}).done(function(data) {                     // 取得したデータ
  alert(data)
});
</script>

取得したデータはカウントした数字のみが取得できます。

Facebook のいいね！数

次はFacebookのいいね！数を取得します。


// 問い合わせURL は "http://graph.facebook.com/"
// クエリーは id となります。
<script>
$.ajax({
  url:'http://graph.facebook.com/' + '?id=' + '取得したい記事のURL',
  dataType: 'jsonp'
}).done(function(data) {                     // 取得したデータ
  if (typeof data.shares !== 'undefined') {  //いいね！があるとき
    alert(data.shares);
  } else {                                   //いいね！がないとき
    alert(0);
  }
});
</script>

取得したデータは、はてブの時とは違っていいね!されているときは、data.shares で取得できますが、そうでない時は data.shares が存在しないので 0とする必要があります。

Tweet数の取得

最後はTweet数を取得します。


// 問い合わせURL は "http://urls.api.twitter.com/1/urls/count.json"
// クエリーは url となります。
<script>
$.ajax({
  url:'http://urls.api.twitter.com/1/urls/count.json' + '?url=' + '取得したい記事のURL',
  dataType: 'jsonp'
}).done(function(data) {                     // 取得したデータ
  alert(data.count);
});
</script>

Tweet数はdata.count でTweetされていようがされていまいが取得が可能です。