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

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

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

photo by Dmitry Baranovskiy

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

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

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

Twitter、Facebook、Google+、はてブのソーシャルカウント数をWordpressで直接取得する関数まとめ
昨日、試しに作っているカスタマイズテーマに直接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の関数は以下です。

使用方法

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

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

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

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

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

Facebook

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

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

使用方法

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

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

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

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

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

Google+

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

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

使用方法

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

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

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

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

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

はてなブックマーク

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

使用方法

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

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

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

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

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

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

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

jQueryで作った関数

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

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

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

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

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

jQuery関数を呼び出す

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

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

JavaScriptでシェア数取得例

参考ページ

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

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

Twitter、Facebook、はてブの取得

12436288584_94d6bc46d2_b.jpg
ソーシャルサービスのシェア数をJavaScriptから取得する方法。

Google+の取得

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

まとめ

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

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

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

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

非同期での取得時間

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

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

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

jQueryでシェア数を取得し表示を高速化!Wordpressに自作バルーンボタンを作成する全手順まとめ
ソーシャルサービス固有のシェアのボタンって表示が重たいと感じる時はないでしょうか? 特に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に自作バルーンボタンを作成する全手順まとめ