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

今回は、ソーシャルサービスのシェア数をjQueryのAjaxを用いて非同期に取得する方法を紹介します。

ページ表示後に、非同期にJavaScriptが実行され、それぞれのサービスからシェア数を取得してくるので、この方法を使えば、体感的にもかなりページが早く表示されるようになると思います。

photo by Dmitry Baranovskiy

スポンサーリンク
レクタングル(大)広告

JavaScriptでシェア数を取得する利点

先日、PHPでソーシャルサービスのシェア数を取得する方法を書きました。

昨日、試しに作っているカスタマイズテーマに直接APIなどから取得した、ツイートカウント数などを表示させたくなりました。それで...

僕は最初、この方法でシェア数を取得してカスタマイズしようと思っていたのですが、いろいろテストしてみて以下のような難点がありました。

  • ページと同時に呼び込まれるので取得が遅いと表示も遅い
  • Facebookのシェア数の取得が特に遅い
  • PHPのfile_get_contents()、curl_init()、curl_exec()あたりは、Wordpress的には非推奨な関数(テーマチェッカーなどで怒られる)
  • サーバーによっては使えない(file_get_contents()関数とかは、サーバーのphp.iniファイルで外部ファイルを開く設定がオンになっていないと使用できない)

とりあえず、ちょっとテストしただけでこれだけの難点があったので、自作のテーマに取り入れることはできませんでした。

その点、JavaScript(jQuery)で取得すると以下のような利点があります。

  • ページが読み込まれてからシェア数を取得しに行くので表示が速い
  • WordPressの非推奨PHP関数を使用することがないのでテーマチェッカーにも怒られない
  • サーバーの環境に左右されない

ということで、JavaScriptで非同期処理による取得方法を採用することにしました。以下では、Twitter、Facebook、Google+、はてブのシェア数を取得する関数をまとめて紹介したいと思います。

jQueryの関数は、Wordpressでも使用できるようにWordpress仕様になっています。もちろん通常のサイトにも使えると思います。

[注意点] 当然ですが、JavaScriptを使用しているためJavaScriptがオフになっているブラウザではカウントが取得されません。

Twitterでツイート数を取得する関数

Twitter

Twitterのツイート数を取得するjQueryの関数は以下です。

//Twitterのシェア数を取得
function get_social_count_twitter(url, selector) {
  jQuery.ajax({
  url:'http://urls.api.twitter.com/1/urls/count.json',
  dataType:'jsonp',
  data:{
    url:url
  },
  success:function(res){
    jQuery( selector ).text( res.count || 0 );
  },
  error:function(){
    jQuery( selector ).text('0');
  }
  });
}

使用方法

使用するには、ツイート数を表示させたい箇所に以下のようなコードを埋め込みます。

<span class="twitter-count"></span>

あとは、上記のHTML要素にツイート数が取得されるように関数を実行するだけです。

以下をheader.phpの<head></head>の間あたりに埋め込みます。

<div style="float: none; margin: 0px"><script>
jQuery(function(){
  get_social_count_twitter('<?php the_permalink(); ?>', '.twitter-count');
});
</script></div>

関数の第1引数にURLを、第2引数にCSSセレクターを指定します。

Facebookのいいねとシェアの数を取得する方法

Facebook

Facebookの「いいね!」やシェア数を取得するjQueryの関数は以下です。

//Facebookのシェア数を取得
function get_social_count_facebook(url, selector) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      if ( res.share && res.share.share_count ) {
        jQuery( selector ).text( res.share.share_count );
      } else {
        jQuery( selector ).text( '0' );
      }
    },
    error:function(){
      jQuery( selector ).text('0');
    }
  });
}

※2016年8月19日のFacebookシェア数取得APIの仕様変更に対応

使用方法

使用するには、ツイート数を表示させたい箇所に以下のようなコードを埋め込みます。

<span class="facebook-count"></span>

あとは、上記のHTML要素にシェア数が取得されるように関数を実行するだけです。

以下をheader.phpの<head></head>の間あたりに埋め込みます。

<script>
jQuery(function(){
  get_social_count_facebook('<?php the_permalink(); ?>', '.facebook-count');
});
</script>

関数の第1引数にURLを、第2引数にCSSセレクターを指定します。

Google+の+1数を取得する方法

Google+

Google+の+1数を取得するjQueryの関数は以下です。

//Google+のシェア数を取得
function get_social_count_googleplus(url, selector) {
  jQuery.ajax({
    type: "get", dataType: "xml",
    url: "http://query.yahooapis.com/v1/public/yql",
    data: {
      q: "SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&url=" + url + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
      format: "xml",
      env: "http://datatables.org/alltables.env"
    },
    success: function (data) {
      var content = jQuery(data).find("content").text();
      var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
      var count = (match != null) ? match[1] : 0;

      jQuery( selector ).text(count);
    }
  });
}

Google+にはAPIがないので、Yahoo! Pipesを経由してXMLを取得することによって、シェア数を入手しています。

使用方法

使用するには、シェア数を表示させたい箇所に以下のようなコードを埋め込みます。

<span class="googleplus-count"></span>

あとは、上記のHTML要素にシェア数が取得されるように関数を実行するだけです。

以下をheader.phpの<head></head>の間あたりに埋め込みます。

<script>
jQuery(function(){
  get_social_count_googleplus('<?php the_permalink(); ?>', '.googleplus-count');
});
</script>

関数の第1引数にURLを、第2引数にCSSセレクターを指定します。

はてなのはてなブックマーク数を取得する方法

はてなブックマーク

はてブ数を取得するjQueryの関数は以下です。

//はてなブックマークではてブ勝を取得
function get_social_count_hatebu(url, selector) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selector ).text( res || 0 );
    },
    error:function(){
      jQuery( selector ).text('0');
    }
  });
}

使用方法

使用するには、はてブ数を表示させたい箇所に以下のようなコードを埋め込みます。

<span class="hatebu-count"></span>

あとは、上記のHTML要素にシェア数が取得されるように関数を実行するだけです。

以下をheader.phpの<head></head>の間あたりに埋め込みます。

<script>
jQuery(function(){
  get_social_count_hatebu('<?php the_permalink(); ?>', '.hatebu-count');
});
</script>

関数の第1引数にURLを、第2引数にCSSセレクターを指定します。

4つのソーシャルサービス全てまとめて

最後に、Twitter、Facebook、Google+、はてなブックマーク、全てまとめたものを以下に載せておきます。

WordPressで、jQueryを使用するには、あらかじめ、<head></head>内に以下のように書いて、jQueryを読み込んでおく必要があります。

<?php wp_enqueue_script('jquery'); ?>

jQueryで作った関数

javascript.jsなどの外部ファイルを作成して、以下を書き込みます。

//Twitterのシェア数を取得
function get_social_count_twitter(url, selector) {
  jQuery.ajax({
  url:'http://urls.api.twitter.com/1/urls/count.json',
  dataType:'jsonp',
  data:{
    url:url
  },
  success:function(res){
    jQuery( selector ).text( res.count || 0 );
  },
  error:function(){
    jQuery( selector ).text('0');
  }
  });
}

//Facebookのシェア数を取得
function get_social_count_facebook(url, selector) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selector ).text( res.shares || 0 );
    },
    error:function(){
      jQuery( selector ).text('0');
    }
  });
}

//Google+のシェア数を取得
function get_social_count_googleplus(url, selector) {
  jQuery.ajax({
    type: "get", dataType: "xml",
    url: "http://query.yahooapis.com/v1/public/yql",
    data: {
      q: "SELECT content FROM data.headers WHERE url='https://plusone.google.com/_/+1/fastbutton?hl=ja&url=" + url + "' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
      format: "xml",
      env: "http://datatables.org/alltables.env"
    },
    success: function (data) {
      var content = jQuery(data).find("content").text();
      var match = content.match(/window\.__SSR[\s*]=[\s*]{c:[\s*](\d+)/i);
      var count = (match != null) ? match[1] : 0;

      jQuery( selector ).text(count);
    }
  });
}

//はてなブックマークではてブ勝を取得
function get_social_count_hatebu(url, selector) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selector ).text( res || 0 );
    },
    error:function(){
      jQuery( selector ).text('0');
    }
  });
}

作成した「javascript.js」ファイルを<head></head>の間か、フッターの</body>手前で以下のように呼び出すます。

<!--親テーマで呼び出す場合-->
<script src="<?php echo get_template_directory_uri(); ?>/javascript.js"></script>
<!--子テーマで呼び出す場合-->
<!--<script src="<?php echo get_stylesheet_directory_uri(); ?>/javascript.js"></script>-->

うまく動作しない場合は、<head></head>で呼び出した方が良いかもしれません。

テンプレートに埋め込むHTML要素

シェア数を表示させたい場所に記入するHTML要素。

<span class="twitter-count"></span>
<span class="facebook-count"></span>
<span class="googleplus-count"></span>
<span class="hatebu-count"></span>

jQuery関数を呼び出す

関数を表示したいページ内に埋め込んでシェア数表示関数を実行。

<script>
jQuery(function(){
  get_social_count_twitter('<?php the_permalink(); ?>', '.twitter-count');
  get_social_count_facebook('<?php the_permalink(); ?>', '.facebook-count');
  get_social_count_googleplus('<?php the_permalink(); ?>', '.googleplus-count');
  get_social_count_hatebu('<?php the_permalink(); ?>', '.hatebu-count');
});
</script>

これらの方法をうまく利用すれば、こんな感じのシェアボタンも作ることができます。(数字の部分を非同期で取得しています。)

JavaScriptでシェア数取得例

参考ページ

これらの関数は、以下のページを参考にコードを変更して使用させてもらいました。

以下のページの関数のままだと、Wordpressでは使用できませんのでご注意ください。($→jQueryに変更する必要がある。)

Twitter、Facebook、はてブの取得

Google+の取得

Google+のシェアカウント数をJavascriptで取得する方法です。この方法を使えばオリジナルのGoogle+ボタンが作れます!

まとめ

これらの方法で、シェア数を表示するようにした結果、ページ表示がかなり速くなりました。

ソーシャルサービスデフォルトのシェアボタンで取得した場合は、ページ表示に13.4秒かかったのに対して、

ソーシャルボタンデフォルトの表示時間

今回の方法で取得すると、3.8秒と10秒近く表示時間を改善することができました。(何回か行っても同様の結果)

非同期での取得時間

というわけで、「デフォルトのシェアボタンが重い」とか、「Facebookのシェアボタンの表示が遅すぎる!もっとやる気出せ!」なんて普段から感じている人は、こういったJavaScriptで取得するカスタマイズ、かなり良いですよ。

2014年11月8日現在、当サイトのシェアボタンでも使用しています。

Pocketも含めた全手順のまとめは以下。

ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか? 特にFacebookのボタンとか。シェアボタンが表示さ...
スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク

『サイトの高速化に!Twitter、Facebook、Google+、はてブのシェア数をJavaScriptで非同期に取得する方法まとめ』へのコメント

  1. 名前:ケイタ 投稿日:2014/11/10(月) 16:31:36 ID:02cfdc8d2

    とても参考になりました。
    SNSボタンの数字読み込みを待つがために、サイトコンテンツが表示されないこともありますから、こういったカスタマイズは必須かもしれませんね。

    でもまぁ、各サービスが非同期で提供してくれないかなとも思っちゃいますね。

  2. アバター画像 名前:わいひら 投稿日:2014/11/10(月) 16:45:19 ID:61e202763

    ですよねー。
    特に読み込み時にかなりの確率で引っ掛かるFacebookは非同期のボタンを出すべき。

  3. 名前:やまかん 投稿日:2015/05/03(日) 14:45:52 ID:bf7cfa82a

    わいひらさん
    こちらの記事を参考にしてWordpressにのせるソーシャルカウンターを作りたいのですがJQueryの関数の使い方がよくわかりません。
    上記にあるJQueryの関数は.jsの外部ファイルに書き込んで保存し、Wordpressテンプレート内で外部ファイルを読み込むようにしたらいいのでしょうか?

  4. アバター画像 名前:わいひら 投稿日:2015/05/03(日) 19:28:26 ID:fb8539195

    そうです。
    一応、「jQueryで作った関数」項目に加筆してみました。

  5. 名前:やまかん 投稿日:2015/05/05(火) 11:50:48 ID:d465f9927

    わいひらさん

    わかりやすい説明ありがとうございました。
    なんとかカウント数を取得することができるようになりました。
    同様にPocketのカウント数も取得したいのですが、Pocketのシェア数をJavaScriptのAjaxで取得する方法の記事を参考に.jsファイルに「Javascriptの編集」にある内容を書き込んだのですがこちらはエラーになってしまいました。
    お手数で申し訳ないですが、よろしければ.jsファイルに書き込む内容を教えていただけますと大変助かります。

  6. アバター画像 名前:わいひら 投稿日:2015/05/05(火) 12:20:01 ID:76f16fea5

    それでしたら、こちらを参考にした方が良いかもしれません。
    jQueryでシェア数を取得し表示を高速化!Wordpressに自作バルーンボタンを作成する全手順まとめ

  7. 名前:てこ 投稿日:2016/11/20(日) 01:31:58 ID:2f469ee0b

    ツイート数やシェア数の取得の仕方について大変参考になりました。最近自作したサイトでノウハウを活用させていただいています。

    さて、寝ブログさんのこの記事をツイートさせていただいたのですが、このページのツイート数にまだ変化がありません。ツイート数を新たに取得するまでは少し時間がかかるものなのでしょうか。

  8. 名前:にこ 投稿日:2016/11/20(日) 12:40:23 ID:2f469ee0b

    一晩経ったら変わってました。自分のサイトでも試してみて、何かあったら質問させていただきます。有益な情報ありがとうございます。

  9. アバター画像 名前:わいひら 投稿日:2016/11/20(日) 18:04:23 ID:ea2b46cc4

    当サイトの場合は、現在よりサーバー負荷軽減のため、SNS Count Cacheというシェア数を決まった時間にサーバー上にキャッシュ化するプラグインと併用しています。
    なので、キャッシュが更新される時間が来ないと、カウント数は変化しないように今はしています。

    当記事のやり方だと、JavaScriptで概ね直ぐにシェア数が反映されると思います。

  10. 名前:にこ 投稿日:2016/11/20(日) 19:06:11 ID:2f469ee0b

    丁寧なご説明ありがとうございました! 今、PHPを使わずにサイトを構築しているのですが、そのうちwordpressに乗り換えようと思っています。snsカウントもそうですが、それ以外で疑問が出てきたら寝ブログさんの記事を参考にさせていただきます。

  11. 名前:さっし 投稿日:2017/05/29(月) 08:33:41 ID:f642aa5d3

    丁寧な説明ありがとうございます。とても参考になり助かります。
    細かい点なのですが、上の方で個別で書かれているfacebookシェアの関数の中で、引数が”selcter”に対して関数内で使われている変数が”selector”でした><

  12. アバター画像 名前:わいひら 投稿日:2017/05/29(月) 16:46:40 ID:364ac68d2

    いえいえ、こういった間違いは、一度書いてしまうとまず気づかないので教えていただけると本当に助かります。
    どうやら以前、中途半端に綴りの間違いに気づいてselcter→selectorに変更したのが良くなかったようです。
    その他にもあった、綴りの間違いも含めて全部修正しておきました。
    ありがとうございます!