今回は、ソーシャルサービスのシェア数をjQueryのAjaxを用いて非同期に取得する方法を紹介します。
ページ表示後に、非同期にJavaScriptが実行され、それぞれのサービスからシェア数を取得してくるので、この方法を使えば、体感的にもかなりページが早く表示されるようになると思います。
photo by Dmitry Baranovskiy
目次
JavaScriptでシェア数を取得する利点
先日、PHPでソーシャルサービスのシェア数を取得する方法を書きました。
僕は最初、この方法でシェア数を取得してカスタマイズしようと思っていたのですが、いろいろテストしてみて以下のような難点がありました。
- ページと同時に呼び込まれるので取得が遅いと表示も遅い
- 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のツイート数を取得する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の「いいね！」やシェア数を取得する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＋の+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>これらの方法をうまく利用すれば、こんな感じのシェアボタンも作ることができます。（数字の部分を非同期で取得しています。）
参考ページ
これらの関数は、以下のページを参考にコードを変更して使用させてもらいました。
以下のページの関数のままだと、Wordpressでは使用できませんのでご注意ください。（$→jQueryに変更する必要がある。）
Twitter、Facebook、はてブの取得
Google＋の取得
まとめ
これらの方法で、シェア数を表示するようにした結果、ページ表示がかなり速くなりました。
ソーシャルサービスデフォルトのシェアボタンで取得した場合は、ページ表示に13.4秒かかったのに対して、
今回の方法で取得すると、3.8秒と10秒近く表示時間を改善することができました。（何回か行っても同様の結果）
というわけで、「デフォルトのシェアボタンが重い」とか、「Facebookのシェアボタンの表示が遅すぎる！もっとやる気出せ！」なんて普段から感じている人は、こういったJavaScriptで取得するカスタマイズ、かなり良いですよ。
2014年11月8日現在、当サイトのシェアボタンでも使用しています。
Pocketも含めた全手順のまとめは以下。
とても参考になりました。
SNSボタンの数字読み込みを待つがために、サイトコンテンツが表示されないこともありますから、こういったカスタマイズは必須かもしれませんね。
でもまぁ、各サービスが非同期で提供してくれないかなとも思っちゃいますね。