注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。(それについての記事)その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。

さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつけてください。

よくオリジナルのデザインでツイート数とかを表示しているサイトを見かけませんか? ブランドやマッシュアップ系サイトでは、サービスとデザインをマッチさせていてかっこいいですよね。 そこで今回はjQueryを使って各SNSのカウント数を直接取得して表示する方法をご紹介。 このブログのトップページもこのコードで取得しています(画像をつけたり改変はしてます。) トップの表示

実装方法

サンプルコード

JavaScript #1

// Facebookの反応(いいねとシェアの数)を取得
function get_social_count_facebook(url, counterId) {
	$.ajax({
		url:'https://graph.facebook.com/',
		dataType:'jsonp',
		data:{
			id:url
		},
		success:function(res){
			$('#' + counterId + ' .count').text( res.shares || 0 );
		},
		error:function(){
			$('#' + counterId + ' .count').text('?');
		}
	});
}
// Twitterの反応(ツイートやリツイート数)を取得
function get_social_count_twitter(url, counterId) {
	$.ajax({
		url:'http://urls.api.twitter.com/1/urls/count.json',
		dataType:'jsonp',
		data:{
			url:url
		},
		success:function(res){
			$('#' + counterId + ' .count').text( res.count || 0 );
		},
		error:function(){
			$('#' + counterId + ' .count').text('?');
		}
	});
}
// はてなブックマークでブックマークされている数を取得
function get_social_count_hatebu(url, counterId) {
	$.ajax({
		url:'http://api.b.st-hatena.com/entry.count?callback=?',
		dataType:'jsonp',
		data:{
			url:url
		},
		success:function(res){
			$('#' + counterId + ' .count').text( res || 0 );
		},
		error:function(){
			$('#' + counterId + ' .count').text('?');
		}
	});
}

※訂正情報(13年5月3日 00:52) JavaScript #1 のコードに誤りがあったため訂正しました。訂正箇所は7行目。 訂正前: url:url 訂正後: id:url

JavaScript #2

/*
  # JavaScriptを実行する部分
  ↓のように指定します。
  get_social_count_facebook("ページのURL", "書き換えるID");
*/
$(function(){
	get_social_count_facebook("{URL}", "socialarea_facebook");
	get_social_count_twitter("{URL}", "socialarea_twitter");
	get_social_count_hatebu("{URL}", "socialarea_hatebu");
});

HTML #1

<div id="socialarea_hatebu"><span class="count"></span></div>
<div id="socialarea_facebook"><span class="count"></span></div>
<div id="socialarea_twitter"><span class="count"></span></div>

使い方

  1. JavaScript #2 の {URL}をカウントを取得するページのURLに変更
  2. headタグ内にJavaScript #1 と #2 の両方を記述
  3. カウント数を表示したい場所に HTML #1 を記述
そのページを表示すると、HTMLの指定したID内のClass“count”に数値に書き込まれるわけです。

1ページ内でいくつも使いたいとき

リンク先の数を取得したいだとか、たとえばブログとかだと1ページに記事がいくつか表示されて、記事ごとにカウントしたりしますよね。 そんな1ページにいくつかのURLのカウントを表示する時は↓みたいにしてください。

HTML #2

<div id="socialarea_hatebu_{記事のID}"><span class="count"></span></div>
<div id="socialarea_facebook_{記事のID}"><span class="count"></span></div>
<div id="socialarea_twitter_{記事のID}"><span class="count"></span></div>
<script type="text/javascript">
get_social_count_facebook("{記事のURL}", "socialarea_facebook_{記事のID}");
get_social_count_twitter("{記事のURL}", "socialarea_twitter_{記事のID}");
get_social_count_hatebu("{記事のURL}", "socialarea_hatebu_{記事のID}");
</script>
IDを記事ごとに作るために記事のIDを付与。ソレに合わせてJavaScriptも変更しています。これを記事ごとに繰り返すわけです。 あ、前述のJavaScript #1 はheadタグ内に記述してくださいね。

WordPressのループ内で使う時

HTML #3

<div id="socialarea_hatebu_<?php echo $post->ID;?>"><span class="count"></span></div>
<div id="socialarea_facebook_<?php echo $post->ID;?>"><span class="count"></span></div>
<div id="socialarea_twitter_<?php echo $post->ID;?>"><span class="count"></span></div>
<script type="text/javascript">
get_social_count_facebook("<?php the_permalink(); ?>", "socialarea_facebook_<?php echo $post->ID;?>");
get_social_count_twitter("<?php the_permalink(); ?>", "socialarea_twitter_<?php echo $post->ID;?>");
get_social_count_hatebu("<?php the_permalink(); ?>", "socialarea_hatebu_<?php echo $post->ID;?>");
</script>
各カウントごとに記事のID(普通なら$post->IDで表示されるはず?)を付与してthe_permalink()で記事のURLを出力しています。 あ、前述のJavaScript #1 はheadタグ内に記述してくださいね(2回目)

デザインしちゃう

JavaScriptで指定しているIDがHTMLあって、その中にclass”count”さえあれば表示されます。IDを指定するなり新たにclassを指定するなりして、自由にデザインしてください。

まとめ

公式のLikeボタンとかってワンテンポ遅れて表示されることありませんか?(特にFacebookなんてゲンナリするほどの遅さでもう) あの遅さの原因の一つにボタンの部分をインラインフレームで表示させていることが挙げられます。インラインフレームは最後に読み込まれるので↓みたいな動作をしてるんです。
ボタン表示までのだいたいの流れ
ボタン表示までのだいたいの流れ
これをSNSのボタンごとにやっています。遅いわけです。(すべてのSNSじゃないですが) カウント数の他に投稿ボタンとかも表示するので仕方がないのですが、どうしても描写まで時間がかかります。 表示が遅くなるから使うのは避けたいけど、記事の一覧や記事ページの上部に表示させれば、読者に記事の人気の指標にしてもらえるので表示させたいというジレンマ。 記事の上部でシェアしたりする人はあまり居ないと思われるので、今回の方法でカウント数だけサクっ表示させればそこまで重くはならないですね。

JavaScriptとPHPの動作の違い

SNSの反応をPHPとかサーバーサイドで取得する方法を紹介してる記事とかもありますが、実はその方法では表示するまでの順番が変わります。 PHPで取得してしまうと冒頭の図の1.よりも前で取得することになります。 取得の速度はそこそこ速いので体感的には違いはないはずですが、もし取得が遅れた時はそれ以降の処理もすべて遅れてしまいます。そうなってしまうと取得されるまでは画面が真っ白ということに。 JavaScriptの場合はページが表示されてから取得するので、もし取得が遅れてもページは表示されているので記事を読むことができます。 PHPで取得するときはそれなりのメリットがあります。ただカウントを表示させたいだけなら今回の方法を使うのも有用かと思われます。

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

14 件のコメント

  1. よっしー 投稿作成者

    Google+とPocketは取得できるAPIがないのでムリなんですよね_(_ 、`、)

  2. ピンバック: *la casa de nieve* » Blog Archive » twitterのURLシェア数をAPI変更後でも(たぶん)取得できる方法

  3. ピンバック: すごい便利!WordPressでブログをリニューアルするときに役立つ30 | コムテブログ

  4. JavaScript #2の
    get_social_count_twitter(“{URL}”, “socialarea_twitterx”);
    の最後に不要な”x”が入っています

    1. よっしー 投稿作成者

      さこだ様
      ご指摘ありがとうございます。修正しました!

      しかしなんでこんなところにxが・・・コピペみすってたのかな・・?(‘A`)

  5. ピンバック: Twitterのツイート数やFacebookのいいね!数、はてブ数をjQueryで取得する方法。SNSでのシェア数のデザインを自由にカスタマイズする | 五目あんかけぶろぐ

  6. ピンバック: jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス | count話題情報まとめ広場

  7. ピンバック: サイトの高速化に!Twitter、Facebook、Google+、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ

  8. ピンバック: WordPressの記事一覧で投稿毎にSNSのカウント数をAPIを利用して取得し表示する方法 - WEB帳

  9. ピンバック: 2015/05/04のアフィリエイト結果と作業 – 副業アフィリエイト対決!犬仙人vs猿仙人

  10. フェイスブックの仕様変更により
    数が取得できなくなっています。
    改善していただければ幸いです。