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

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

どうも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されていようがされていまいが取得が可能です。

まとめ

いかがでしたでしょうか、他のSNSサイトもAPIが公開されていればこのような方法で取得が可能ですね。ぜひお試し下さい。
注意点はAPIの仕様が変わって取得ができなくなることです。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ