Googleのシェア数をAjaxで非同期に取得するWordPressカスタマイズ方法

先日、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「Google+シェア数取得関数」を書きました。

Wordpressテーマチェッカーでエラーの出ないGoogle+共有カウントの取得方法
最近知ったんですが、Yahoo! Pipesが9月30日でサービス停止となるようです。 Yahoo Pipesを使った開発は今年の8月...

今回は、その関数を利用してAjaxでGoogle+のシェア数を取得する方法を紹介したいと思います。

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

主な手順

Google+シェア数をAjaxで取得するための主な手順は以下です。

  1. Google+シェア数取得用のPHPファイルを作成する
  2. カウントを取得するためのJavaScriptを書く
  3. カウント表示用のHTML要素を書く

基本的にコピペだけで、Ajaxでのカウント取得部分を実装することができます。

Google+シェア数取得用のPHPファイルを作成する

まずは、自分のドメイン内(テーマ内)にカウント取得用のPHPファイルを作成します。

このPHPファイルをJavaScriptで呼び出すことで、カウントを取得します。

テーマ内に、カウント取得用のPHPファイルを置いて、それをJavaScriptで呼び出すことによって、同一ドメイン内で呼び出されることにより、クロスドメイン制約を回避します。

クロスドメイン制約とは、ブラウザの機能で、閲覧しているページのドメイン以外のドメインからは、Ajax通信をさせないというセキュリティー上の制約です。

PHPファイルの作成

まずは、PHPファイルを作成します。

とりあえず僕は、テーマ(子テーマ)内に「lib」というフォルダを作成して、その中に「fetch-google-plus.php」というファイルを作成します。

構造としては以下のようになります。

テーマフォルダ/lib/fetch-google-plus.php

libフォルダに入れたのは、他のテーマテンプレートと、ごっちゃにしないためです。

コードを記入

で、先程作成したfetch-google-plus.phpファイルに以下のようにコードをコピペします。

以下の部分は、Wordpressのインストールフォルダにあるwp-load.phpファイルを呼び出すことで、Wordpress関数などを使えるようにしています。

カウントを取得するためのJavaScriptを書く

次に、Ajax側からカウント取得用のfetch-google-plus.phpファイルを呼び出して、シェア数を得ます。

フッターの</body>手前あたりで以下のように呼び出します。

これは、.google-plus-countクラスのある要素にGoogle+シェア数を取得し表示させています。

上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。

カウント表示用のHTML要素を書く

あとは、Google+シェア数を表示させたい箇所(例えば、single.phpや、page.phpなど)に、以下のようなHTMLを挿入すれば、この部分にカウントが取得され表示されます。

Font Awesomeのアイコンフォントや、CSSなどで装飾することで以下のようなバルーンボタンなども作ることができます。

Google+のシェア数取得中
読み込み中

Google+のシェア数取得後

Ajaxによりカウント取得

今回はGoogle+のシェア数取得部分のみに絞って方法を紹介しました。デザイン部分に関しては、自前で行ってください。

バルーンスタイルの書き方などは以下にあります。

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

まとめ

今回は、前回のfeedly購読者数取得方法に続いて、取得用APIのないシェア数のAjaxでの取得方法を書きました。

feedlyの購読者数をAjaxで非同期に取得するWordpressカスタマイズ方法
以前、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「feedly購読者数取得関数」を書きました。 ...

クロスドメイン制約を回避しながら、外部サーバーのデータをJavaScriptで読み込むには、この方法が最も適しているのではないかと思います。(その他にも方法はあるものの、サーバーの設定をいじる必要があったりするので)。