コピペで簡単!WordPressでFacebookのシェア数を取得する方法【2016年8月仕様変更対応版】

最近、自ブログのFacebookのシェア数を取得できていないことに気づきました。

その現象は自サイトだけの現象なのかといろいろ見てみたら、他サイトも表示されていない模様です。

いろいろ調べてみると、どうやらFacebook APIのシェア数取得に仕様変更があったようです。

なので早速自分の使用しているテーマを仕様変更に対応させてみました。ついでに、新しいFacebookシェア数の取得方法を書いたのでメモがてら残しておこうと思います。

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

Facebookの仕様変更

Facebookは、以下のようにリクエストを送ることで、シェア数を取得できます。

[URL]
http://graph.facebook.com/?id=[URLエンコードしたURL]

以前は上記のようなリクエストを送ることで、以下のようなJSON結果が返されていました。

{
  id:http://www.yahoo.co.jp/
  shares:313158
  comments:33
}

けれど、2016年8月に行われた仕様変更により、以下のようなJSONが返されるようになりました。

{
   "og_object": {
      "id": "400186308976",
      "description": "\u65e5\u672c\u6700\u5927\u7d1a\u306e\u30dd\u30fc\u30bf\u30eb\u30b5\u30a4\u30c8\u3002\u691c\u7d22\u3001\u30aa\u30fc\u30af\u30b7\u30e7\u30f3\u3001\u30cb\u30e5\u30fc\u30b9\u3001\u5929\u6c17\u3001\u30b9\u30dd\u30fc\u30c4\u3001\u30e1\u30fc\u30eb\u3001\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0\u306a\u3069\u591a\u6570\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u5c55\u958b\u3002\u3042\u306a\u305f\u306e\u751f\u6d3b\u3092\u3088\u308a\u8c4a\u304b\u306b\u3059\u308b\u300c\u8ab2\u984c\u89e3\u6c7a\u30a8\u30f3\u30b8\u30f3\u300d\u3092\u76ee\u6307\u3057\u3066\u3044\u304d\u307e\u3059\u3002",
      "title": "Yahoo! JAPAN",
      "type": "article",
      "updated_time": "2016-08-19T22:26:54+0000"
   },
   "share": {
      "comment_count": 33,
      "share_count": 313158
   },
   "id": "http://www.yahoo.co.jp/"
}

これにより、PHPやJavaScriptでのシェア数の取得方法も変わってしまったので、以下では仕様変更後の取得方法について紹介します。

以下で紹介する取得方法は、Wordpress用の取得方法になっています。

PHPでFacebookシェア数を取得する

PHPでFacebookからシェア数を取得するには、まずfunctions.phpに以下のような関数を書きます。

/////////////////////////////////
//Facebookシェア数を取得する
/////////////////////////////////
function fetch_facebook_count($url) {
  //URLをURLエンコード
  $encoded_url = rawurlencode( $url );
  //Facebookにリクエストを送る
  $response = wp_remote_get( 'http://graph.facebook.com/?id='.$encoded_url );
  $res = 0;

  //取得に成功した場合
  if (!is_wp_error( $response ) && $response["response"]["code"] === 200) {
    $body = $response['body'];
    $json = json_decode( $body ); //ジェイソンオブジェクトに変換する
    $res = ($json->{'share'}->{'share_count'} ? $json->{'share'}->{'share_count'} : 0);
  }
  return $res;
}

あとは、シェア数を表示したい場所に、以下のようにURLを指定して上記の関数を呼び出すだけです。

<?php //Facebookシェア数の取得
echo fetch_facebook_count('http://www.yahoo.co.jp/'); ?>

現在表示中の投稿・固定ページのシェア数を取得したい場合は、single.php、page.phpなどの表示たい箇所に、以下のように記述します。

<?php //現在のページのFacebookシェア数の取得
echo fetch_facebook_count(get_permalink()); ?>

試しに、Yahoo!のトップページのシェア数を取得させてみると以下のように表示されます。

FacebookシアボタンでYahoo!トップページのシェア数表示

JavaScript(jQuery)でFacebookシェア数を取得する

jQueryで取得するには、まずはシェア数を表示したいHTML要素を以下のように用意しておきます。

<div class="facebook_count">0</div>

あとは、Wordpressテンプレートで言えばfooter.phpの</body>手前あたりに以下のように記述します。

<script type="text/javascript">
//Facebookのシェア数を取得
function fetch_facebook_count(url, selector) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    timeout: 10000, //10sec
    data:{ id:url }
  }).done(function(res){
    if ( res.share && res.share.share_count ) {
      jQuery( selector ).text( res.share.share_count );
    } else {
      jQuery( selector ).text( 0 );
    }
  }).fail(function(){
    jQuery( selector ).html('error');
  });
}

(function($){
    //Facebookシェア数を取得する
    //第1引数にはURLを、第2引数には表示箇所のCSSセレクタを指定してください
    fetch_facebook_count('<?php the_permalink() ?>', '.facebook_count');
})(jQuery);
</script>

fetch_facebook_count関数の第1引数には、シェア数を取得したいページのURLを。第2引数には、シェア数を表示したいHTML要素のCSSセレクタを指定してください。

本来なら、JavaScript用のJSファイルなどにwp_localize_script関数などを用いて、URL情報を送信して実装するのがスマートな方法なのかもしれません。ただ、この方法説明しだすと長くなってややこしいので割愛します。詳しくは関数リファレンス/wp localize scriptを参照してください。

まとめ

今回は、Wordpress上のPHPと、JavaScript(jQuery)を用いた方法を紹介しました。

WordPressであれば、どちらかの手法を用いれば、2016年8月仕様変更後のFacebookシェア数を取得できるかと思います。

どちらの方法も、基本的にコピペでできるので実装はそれほど難しくないかと思います。

というわけで「最近自分のサイトのFacebookシェア数が全部0になっている」なんて方は、上記の方法を試してみると改善されるかもしれません。

『コピペで簡単!WordPressでFacebookのシェア数を取得する方法【2016年8月仕様変更対応版】』へのコメント

  1. アバター画像 名前:わいひら 投稿日:2016/08/24(水) 19:46:33 ID:aa10fbea4

    関連トピック
    Facebook8月仕様変更の件

  2. 名前:サイラス 投稿日:2016/08/25(木) 14:07:14 ID:aeb7517b7

    こんにちは。いつも拝見させてもらってます。
    ブログ読んでて思った質問が2点あります。

    ・昔の記事で「Amivoiceというソフトでブログの記事の9割以上を書いている」とありました。驚きました。音声入力って実用に足るレベルの技術があるんですね。
    今も音声入力でブログを書かれているのですか?

    ・ブログが最近になって1カラムに変更されましたが、実験ですか?
    1カラムだとサイドが有効利用できないと思ったんですが、どういう意図からの変更なのでしょうか?

    以上の2点が気になりました。お答え頂ければ幸いです。

  3. アバター画像 名前:わいひら 投稿日:2016/08/25(木) 18:08:38 ID:d2af57c93

    今も音声入力でブログを書かれているのですか?

    はい。今もAmiVoiceを使って音声入力しています。
    このコメントも、全て音声入力です。
    もはや音声入力なしでは、ブログを書く気にならないレベルです。今はもう99%は音声入力なんじゃないかと思います。
    ただ、音声入力は、たまにありえない誤入力をしてしまうので、それだけが難点かもしれません。例:(正)サイトを→(誤)斎藤

    ブログが最近になって1カラムに変更されましたが、実験ですか?

    変更は全くしていません。
    おそらく、ブラウザをズームするか、ブラウザの幅が狭いとかが原因でレスポンシブスタイルが適用されて、サイドバーが表示されてないだけではないかと思います。

  4. 名前:サイラス 投稿日:2016/08/25(木) 22:03:05 ID:aeb7517b7

    返信ありがとうございます。
    あらためてプロフ欄を見させて頂きました。
    指が使えない状態なのですね。
    そのような状態でsimplicityなどを開発されているとは思いませんでした。
    頭が下がる思いです。
    カラムの件については、恥ずかしながら仰る通りでした。

    これからもブログの方、購読させていただきます。
    自己ペースでお続けください。応援しています。
    失礼いたします。

  5. アバター画像 名前:わいひら 投稿日:2016/08/26(金) 16:40:23 ID:a9bf5e5a2

    そうなんです。
    なので音声入力がないと何もできない感じです^^;
    仕方なく使用し始めた音声入力ではありますが、音声入力を使うと、自然と話し言葉になるので、多少は読みやすくなって、その点においては使っててよかったかもしれません。

    ありがとうございます。
    ブログの方もSimplicityの方もゆるゆると無理のない程度にやっていければと思います。