Facebookソーシャルボタン、アクセストークンを使用して
実際の いいね！カウント数 や シェアカウント数 を表示設置する方法
現在、facebook公式のいいねボタンとシェアボタンは共に同じ値のカウント総数が表示される。

実際の いいね！カウント数 や シェアカウント数 を設置する手順｜準 備｜カウントの設置方法

現在、facebook公式のいいねボタンとシェアボタンは共に同じ値のカウント総数が表示されますが、 このカウント総数は、いいね！カウント数、コメントカウント数、シェアカウント数の総和です。
このページは、アクセストークンを使用して、これらのいいね！カウント数やシェアカウント数を別々に表示する方法について説明します。


 実際の いいね！カウント数 や シェアカウント数 を設置する手順

  1. Facebookサイトで、ID登録を行いアクセストークンを取得します。
    アクセストークンの取得方法についてはつぎのサイトを参照してください。
       ≫ Facebookのシェア数を表示させる方法（アクセストークンの取得）wp-cocoon.com
  2. Facebookサイトで、カウント無しの「いいね！ボタン」や「シェアボタン」のHTMLコードを取得コピーします。
  3. 本ページが提供するソーシャルボタンカウント取得PHP(v2)、ソーシャルボタンカウント取得PHP起動関数およびカウント用吹き出しCSSを使用し、Facebookボタンを表示設置するHTMLを作成します。
    Facebookサイトで取得したアクセストークンの値は、「ソーシャルボタンカウント取得PHP」内に設定します。

 準 備

ソーシャルボタンカウント取得PHPの動作の構成は、下図のようになっています。ソーシャルボタンのカウントを取得する処理はPHPで行います。 ただし、ボタンを設置する処理はHTMLで作ることができます。

図 ソーシャルボタンカウント取得PHPの動作構成
  カウント取得PHPの起動方法 
<script>
  buttoncountSet2("SNSサイト名","カウント表示域のID名","カウント取得ページのURL","Facebookカウント種別");
</script>

 必要ファイルのダウンロード

 ソーシャルボタンの準備

SNS公式サイトより、Facebookソーシャルボタンを準備します。ソーシャルボタンカウント取得PHPは、Facebook以外に下表に示すSNSサイトのカウント数も取得表示できます。

   表 SNS１０サイト、ソーシャルボタン公式サイト一覧
SNSサイト名 Twitter Facebook Google+ Hatena Pinerest Feedly LDR
LDR pocket		 Pocket Linkedin Buffer クリックで公式サイトにリンク
（注）Google+およびLDRはサービスを終了しました。また、Linkedinはカウント取得APIが廃止になりました。

 jQueryファイルのインクルード（javascript)

jQueryファイルを、<head>タグ内にインクルードします。

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 ソーシャルボタンカウント取得PHPのアップロード

ダウンロードしたソーシャルボタンカウント取得PHP（socialbutton-count-v2.phpの172行目）に、取得したアクセストークンを設定した後、 ソーシャルボタンカウント取得PHPをPHP動作環境サーバにアップロードします。 

<?php

// Facebookカウント取得関数（アクセストークン版）
function facebook2($url,$c){

	//アクセストークン取得後ここsocialbutton-count-v2.phpの172行目に設定 
        $access_token = 'アクセストークンの値をここに設定';
	// リクエストURL
	$request_url = 'https://graph.facebook.com/?id=' . rawurlencode( $url ) . '&fields=og_object{engagement},engagement&access_token=' . $access_token;

	// データをJSON形式で取得する (cURLを使用)   &access_token="+FB_access_token
	$curl = curl_init() ;
	curl_setopt( $curl, CURLOPT_URL, $request_url ) ;
	curl_setopt( $curl, CURLOPT_HEADER, 1 ) ;						// ヘッダーを取得する
	curl_setopt( $curl, CURLOPT_SSL_VERIFYPEER, false ) ;			// 証明書の検証を行わない
	curl_setopt( $curl, CURLOPT_RETURNTRANSFER, true ) ;			// curl_execの結果を文字列で返す
	curl_setopt( $curl, CURLOPT_TIMEOUT, 15 ) ;					// タイムアウトの秒数
	curl_setopt( $curl, CURLOPT_FOLLOWLOCATION , true ) ;			// リダイレクト先を追跡するか？
	curl_setopt( $curl, CURLOPT_MAXREDIRS, 5 ) ;					// 追跡する回数
	$res1 = curl_exec( $curl ) ;
	$res2 = curl_getinfo( $curl ) ;
	curl_close( $curl ) ;

	// 取得したデータの整理
	$json = substr( $res1, $res2['header_size'] ) ;	        	// 取得したデータ(JSONなど)

	// JSONデータを連想配列に直す
	$array = json_decode( $json , true ) ;
        $count=0; $reaction_count=0; $comment_count=0; $share_count=0;  // カウント数初期値

	// カウントプロパティが存在する場合
	if( isset($array['og_object']) ) { 

                // JSONデータからカウント数取得
	        $count = $array['og_object']['engagement']['count'] ;
                $reaction_count = $array['engagement']['reaction_count'] ; 
                $comment_count = $array['engagement']['comment_count'] ; 
                $share_count = $array['engagement']['share_count'] ;
                if($c == "total"){
                     return $count;
                 } 
                if($c == "reaction"){
                     return $reaction_count;
                 }
                if($c == "comment"){
                     return $comment_count;
                 }
                if($c == "share"){
                     return $share_count;
                 }
  
                //return array ($count, $reaction_count, $comment_count, $share_count);     //配列で返す 
    
	// カウントプロパティが存在しない場合は0扱い
	} else {
                if($c == "total"){
                     return $count;
                 } 
                if($c == "reaction"){
                     return $reaction_count;
                 }
                if($c == "comment"){
                     return $comment_count;
                 }
                if($c == "share"){
                     return $share_count;
                 }
		//return array ($count, $reaction_count, $comment_count, $share_count);    //配列で返す 

	}

} //function end
https://graph.facebook.com/にリクエストすると、つぎのJSONデータが返ってきます。 
{
  "og_object":{
      "engagement":{
          "count":82540,
          "social_sentence":"82K people like this."
      },
      "id":"10150152648618567"
   },
  "engagement":{
         "reaction_count":20887,
         "comment_count":4131,
         "share_count":57522, 
         "comment_plugin_count":2
     },
      "id":"https:\/\/www.yahoo.co.jp\/"
}
なお、総カウント数(count)は、いいねカウント(reaction_count)、コメントカウント(comment_count)およびシェアカウント(share_count)の総和です。

 ソーシャルボタンカウント取得PHP起動関数およびカウント用吹き出しCSSの作成(CSS)

ソーシャルボタンカウント取得PHP起動関数javascriptよよびソーシャルボタンカウント用吹き出しCSSを<head>タグ内に定義します。 ソーシャルボタンカウント取得PHP起動関数javascriptについて、アップロード先の「ソーシャルボタンカウント取得PHP のURL」を設定します（下ソースコード赤字のURL部分）。 CSSについては、(c) 2016 By Simon Hojbergを参考。
下のコードをコピーして使用してください。

<script>
// jquery 1.8以上 facebook API アクセストークン対応
function buttoncountSet2(site,target,url,count){
        var shareurl;
        if(url == "" || url === undefined || url == null ){
             shareurl = document.URL;         
         }
        else{
             shareurl = url;         // ボタン設置ページのURL   
         }
        var site = site;            // SNS サイト名 例：facebook
        var phpurl = "http://.../.../socialbutton-count-v2.php";  // ソーシャルボタンカウント取得PHP URL (要修正）     
        var pw = "H290707";         // パスワード
        $.ajax({
            url: phpurl,            // ソーシャルボタンカウント取得PHP
            dataType: "json",
            data: { url: shareurl, site: site, pass: pw, count: count }, 
              }).done(function(data){
                var res = String(data).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
                //var res = data;
                $(target).text(res);
                var classname = $(target).attr("class");    //吹き出しのCLASS名取得 top/right 
                if(classname == "balloon_right"){           //吹き出しをボタンの右に付ける場合のCLASS名を変えたときはここを修正します-"balloon_right"
                  var obj =  $(target).parent("div");    //親要素OBJ取得、全子要素にFloat属性設定、Float属性解除設定（以下３ステップ）
                  $(obj).children( "div" ).css({ "float": "left", "margin": "2px", "display": "block", "vertical-align": "middle", "cursor": "pointer" });
                  $(target).after("
"); 
                 }
              }).fail(function(data){
                var res = "error";
                $(target).text(res);
                console.log(obj);
             });
}

</script>


 Facebook（アクセストークン使用）カウントの設置方法

APIでyahoo!サイトのカウント数を取得した公式ボタン デモ（カウント数はボタンの右に表示）- ボタン画像のみ公式サイトより

0
0

 ソーシャルボタンおよびカウント設置手順

 設置手順

 ボタンHTML/javascriptコード - Facebookの例

<div style="width:ボタンの大きさ２">
 <!-- Facebook 公式ボタン -->
 <div class="fb-like" data-href="https://www.yahoo.co.jp/" data-width="" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false">
 </div>
 
 <!-- ボタンカウント DIV領域 -->
 <div id="id_name" class="balloon_right"><script>buttoncountSet2("facebook","#id_name","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php","カウント種別");</script>
 </div>
</div>

「Facebookソーシャルボタン、アクセストークンを使用して実際の いいね！カウント数 や シェアカウント数 を表示設置する方法」のデモにつきましては、 アクセストークンが見えてしまうため、デモのキャプチャー画像に代えさせていただきます。


 Facebook（アクセストークン未使用）およびTwitterなどボタンカウントの設置デモ

Facebook（アクセストークン未使用）およびアクセストークンに無関係なTwitterなどボタンカウントの設置方法について述べます。
ボタン画像はすべて公式サイトより取得しています。

faccebook ボタンの上の例

0

hatena ボタンの右の例

26

pinterest ボタンの上の例

190

feedly ボタンの右の例

follow us in feedly
null

pocket ボタンの上の例

1,345

buffer ボタンの右の例

6,037

twitter ボタンの上の例

-
Tweet

つぎに、デモのソースコードについて、ボタンHTMLコードおよびボタン用javascriptコードを示します。 

 <!--Faccebook ボタンの上にカウント数の例-->
 <!-- Facebook ボタンカウント -->
 <div id="facebook-ct" class="balloon_top" style="width:67px"><script>buttoncountSet2("facebook","#facebook-ct");</script>
 </div>
 <!-- Facebook 公式ボタン -->
 <div class="fb-share-button" data-href="http://urbanqee.com/webutil/sns/social-officialbutton-countphp.html" data-layout="button" data-size="large" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Furbanqee.com%2Fwebutil%2Fsns%2Fsocial-officialbutton-countphp.html&src=sdkpreparse">シェア</a>
 </div>

 <!--Hatena ボタンの右にカウント数の例-->
 <div style="width:120px">
  <!-- Hatena 公式ボタン -->
  <div><a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="touch" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="32" height="32" style="border: none;" /></a>
  </div>
  <!-- Hatena ボタンカウント -->
  <div id="hatena-cr" class="balloon_right"><script>buttoncountSet2("hatena","#hatena-cr","http://urbanqee.com/webutil/photo/shadowbox/photo-shadowbox.html");</script>
  </div>
 </div>

 <!--Pinterest ボタンの上にカウント数の例-->
 <!-- Pinterest ボタンカウント -->
 <div id="pinterest-ct" class="balloon_top" style="width:40px"><script>buttoncountSet2("pinterest","#pinterest-ct","http://pinplugins.com/pincount/");</script>
 </div>
 <!-- Pinterest 公式ボタン -->
 <a data-pin-do="buttonBookmark" data-pin-lang="ja" data-pin-save="true" href="https://jp.pinterest.com/pin/create/button/"></a>

 <!--Feedly ボタンの右にカウント数の例-->
 <div style="width:130px">
  <!-- Feedly 公式ボタン -->
  <div>
  <a href='https://feedly.com/i/subscription/feed%2Fhttp%3A%2F%2Frssblog.ameba.jp%2Fske48official%2Frss20.xml'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
  </div>
  <!-- Feedly ボタンカウント -->
  <div id="feedly-cr" class="balloon_right"><script>buttoncountSet2("feedly","#feedly-cr","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
  </div>
 </div>

 <!--Pocket ボタンの上にカウント数の例-->
 <!-- Pocket ボタンカウント -->
 <div id="pocket-ct" class="balloon_top" style="width:55px"><script>buttoncountSet2("pocket","#pocket-ct","https://www.google.com/?hl=ja");</script>
 </div>
 <!-- Pocket 公式ボタン -->
 <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>

 <!--Buffer ボタンの右にカウント数の例-->
 <div style="width:130px">
  <!-- Buffer 公式ボタン -->
  <div>
  <a href="http://bufferapp.com/add" class="buffer-add-button" data-url="http://urbanqee.com/webutil/sns/social-officialbutton-countphpt.html" data-count="none" ></a>
  </div>
  <!-- Buffer ボタンカウント -->
  <div id="buffer-cr" class="balloon_right"><script>buttoncountSet2("buffer","#buffer-cr","https://www.google.com/");</script>
  </div>
 </div>

 <!--Twitter ボタンの上にカウント数の例-->
 <!-- Twitter ボタンカウント -->
 <div id="twitter-ct" class="balloon_top" style="width:66px"><script>buttoncountSet2("twitter","#twitter-ct","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
 </div>
 <!-- Twitter 公式ボタン -->
 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://urbanqee.com/webutil/sns/social-officialbutton-countphp.html" data-via="hanaranzan" data-size="large">Tweet</a>


実際の いいね！カウント数 や シェアカウント数 を設置する手順｜準 備｜カウントの設置方法｜TOP

 ソーシャルボタン関連サイト内リンク

  1. オリジナルデザインのソーシャルボタンにカウントを設置する方法 - デザインボタン ９サイト - Twitter, Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket, Linkedin
  2. 公式サイトへ行かずに、簡単に手元でソーシャルボタンをまとめて設置する Lightboxなどのモーダルウィンドウ上にも設置できる ～公式ボタン、非公式デザインボタンどちらでも１７SNS/RSSサイト！ ３４種類余り～
  3. ソーシャルボタンカウント取得PHPの使い方 ～ カウントのない公式ソーシャルボタンにカウントを付ける ～ Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer, Twitter - １０サイト - （本ページ）
  4. ソーシャルボタン、カウントをボタンの中に付ける ～ 公式ボタン、デザインボタン ～ Twitter, Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer - １０サイト -
  5. １０サイト、ソーシャルボタンのカウント設置を、５つのパターンから好きな場所に付ける ソーシャルボタンのカウントを、ボタンの右、ボタンの左、ボタンの上、ボタンの下、ボタンの中の５つのパターンから好きな場所に付ける - 公式ボタン、デザインボタン 10サイト - Twitter, Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer
  6. Lineで送るカスタムボタンのリンクウインドウを小窓で表示する
  7. 自分のページの いいね！ボタン の設置方法
  8. できる！ブログなどのレス記事に、自作のいいねボタンを動的に設置する。 KENTWEB ASKA BBS のレス記事に自作のいいねボタンといまいちボタンをカスタマイズできる。 ～ CGI + PHP + MySQL + jQuery + Ajax ～
  9. できる！自分のページの「いいね！ボタン」を設置する 新バージョン - いいね！ボタン Ver2 投票数のカウントは、データベースMySQLが使用できる。 いいね！ボタンをレス記事などに動的配置できる。～ PHP + MySQL + jQuery + Ajax ～
  10. まとめて設置のデモ - モーダルウィンドウにも
  11. Facebookソーシャルボタン、アクセストークンを使用して 実際の いいね！カウント数 や シェアカウント数 を表示設置する方法 現在、facebook公式のいいねボタンとシェアボタンは共に同じ値のカウント総数が表示される。（本ページ）
  12. 公式ソーシャルボタンのカウントをカラー吹き出しで表示する ―ソーシャルボタンカウント取得PHPとカラー吹き出しCSSの使い方 ～ カウントのないソーシャルボタンにカラフルなカウントを付ける ～ Facebook, Hatena, Pinerest, Feedly, Pocket, Buffer, Twitter ７ サイト
urbanqee.com   最終更新日：2019.7.11(初版）
アクセス解析 _