先日、PHPとWordpress関数を利用して、テーマチェッカーでもエラーが出ない「Google＋シェア数取得関数」を書きました。
今回は、その関数を利用してAjaxでGoogle＋のシェア数を取得する方法を紹介したいと思います。
目次
主な手順
Google＋シェア数をAjaxで取得するための主な手順は以下です。
- Google＋シェア数取得用のPHPファイルを作成する
- カウントを取得するためのJavaScriptを書く
- カウント表示用の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ファイルに以下のようにコードをコピペします。
<?php //Pocketカウントの非同期取得用
//外部のphpからWordpress のAPIを扱う
require_once('../../../../wp-load.php');
//Google＋シェアの取得
function fetch_google_plus_count($url) {
$query = 'https://apis.google.com/_/+1/fastbutton?url=' . urlencode( $url );
//URL（クエリ）先の情報を取得
$result = wp_remote_get($query);
// 正規表現でカウント数のところだけを抽出
preg_match( '/\[2,([0-9.]+),\[/', $result["body"], $count );
// 共有数を表示
return isset($count[1]) ? intval($count[1]) : 0;
}
//URLパラメーターの取得
$url = $_GET['url'];
echo fetch_google_plus_count($url);
以下の部分は、Wordpressのインストールフォルダにあるwp-load.phpファイルを呼び出すことで、Wordpress関数などを使えるようにしています。
//外部のphpからWordpress のAPIを扱う
require_once('../../../../wp-load.php');
カウントを取得するためのJavaScriptを書く
次に、Ajax側からカウント取得用のfetch-google-plus.phpファイルを呼び出して、シェア数を得ます。
フッターの</body>手前あたりで以下のように呼び出します。
<script type="text/javascript">
//Google＋のシェア数を取得
function fetch_google_plus_count(url, selector) {
jQuery.ajax({
url: '<?php echo get_stylesheet_directory_uri(); ?>/lib/fetch-google-plus.php?url='+url,
dataType:'text',
timeout: 10000, //10sec
}).done(function(res){
jQuery( selector ).text( res || 0 );
}).fail(function(){
jQuery( selector ).html('error');
});
}
fetch_google_plus_count(get_permalink(), '.google-plus-count');
</script>
これは、.google-plus-countクラスのある要素にGoogle＋シェア数を取得し表示させています。
上記コードは、「子テーマ」でカスタマイズすることを前提に書いたコードです。親テーマをカスタマイズする場合は、get_stylesheet_directory_uri()ではなく、get_template_directory_uri()関数を利用してください。
カウント表示用のHTML要素を書く
あとは、Google＋シェア数を表示させたい箇所（例えば、single.phpや、page.phpなど）に、以下のようなHTMLを挿入すれば、この部分にカウントが取得され表示されます。
<span class="google-plus-count">0</span>
Font Awesomeのアイコンフォントや、CSSなどで装飾することで以下のようなバルーンボタンなども作ることができます。
読み込み中
↓
Ajaxによりカウント取得
今回はGoogle＋のシェア数取得部分のみに絞って方法を紹介しました。デザイン部分に関しては、自前で行ってください。
バルーンスタイルの書き方などは以下にあります。
まとめ
今回は、前回のfeedly購読者数取得方法に続いて、取得用APIのないシェア数のAjaxでの取得方法を書きました。
クロスドメイン制約を回避しながら、外部サーバーのデータをJavaScriptで読み込むには、この方法が最も適しているのではないかと思います。（その他にも方法はあるものの、サーバーの設定をいじる必要があったりするので）。
