ソーシャルボタンカウント取得PHPの使い方
~ カウントのない公式ソーシャルボタンにカウントを付ける ~
Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer, Twitter
- 10サイト -

準備カウントの設置方法

Facebook, Google+, Hatena, Pinterest, Feedly, LDR, Pocket, Linkedin, Buffer, Twitter 10サイトのソーシャルボタンのカウントを取得するPHP関数(ソーシャルボタンカウント取得PHP)の使い方を説明します。 ソーシャルボタンカウント取得PHPを使うと、設置したカウントのない公式ボタンやデザインボタンに、カウントを付けることができます。

▼ ソーシャルボタン-デザインボタンにカウントを付ける 7サイト(デザインボタンのデモ)

(注)ここに表示されているカウントは、このページのものではなく、デモのためのサンプルページのカウント値です。 デザインボタン解説ページ

 準 備

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

図 ソーシャルボタンカウント取得PHPの動作構成

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

 ソーシャルボタンの準備

SNS公式サイトより、ソーシャルボタンを準備します。

   表 SNS9サイト、ソーシャルボタン公式サイト一覧
SNSサイト名 Facebook Google+ Hatena Pinerest Feedly LDR
LDR pocket
Pocket Linkedin Buffer クリックで公式サイトにリンク

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

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

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

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

ソーシャルボタンカウント取得PHPをPHP動作環境サーバにアップロードします。

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

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

<script>
// jquery 1.8以上
function buttoncountSet(site,target,url){
        var shareurl;
        if(url == "" || url === undefined || url == null ){
             shareurl = document.URL;         
         }
        else{
             shareurl = url;         // ボタン設置ページのURL   
         }
        var site = site;            // SNS サイト名 例:facebook
        var phpurl = "http://urbanqee.com/webutil/sns/js/socialbutton-count.php";  // ソーシャルボタンカウント取得PHP URL (要修正)     
        var pw = "H290707";         // パスワード
        $.ajax({
            url: phpurl,            // ソーシャルボタンカウント取得PHP
            dataType: "json",
            data: { url: shareurl, site: site, pass: pw }, 
              }).done(function(data){
                var res = data;
                $(target).text(res);

                var obj =  $(target).parent("div");    //親要素OBJ取得、全子要素にFloat属性設定、Float属性解除設定(以下3ステップ)
                $(obj).children( "div" ).css({ "float": "left", "margin": "2px", "display": "block", "vertical-align": "middle", "cursor": "pointer" });
                $(target).after("<div style='content: ; clear: both; display: block;'></div>"); 

              }).fail(function(data){
                var res = "error";
                $(target).text(res);
                console.log(obj);
             });
}
</script>
<style>
/*  ボタンの上に置く top */
.balloon_top {
	position: relative;
	background: #fcfcfc;
	border: 1px solid gray; /*#242a2e;*/
        font-size:11px;
        text-align:center;
        margin-bottom:5px; padding:3px;
        font-family: arial, "MS ゴシック",sans-serif;
        border-radius: 5px;        
}
.balloon_top:after, .balloon_top:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_top:after {
	border-color: rgba(252, 252, 252, 0);
	border-top-color: #fcfcfc;
	border-width: 5px;
	margin-left: -5px;
}
.balloon_top:before {
	border-color: rgba(36, 42, 46, 0);
	border-top-color: gray; /*#242a2e;*/
	border-width: 6px;
	margin-left: -6px;
}

/* ボタンの右に置く right */
.balloon_right {
	position: relative;
	background: #ffffff;
	border: 1px solid gray; /*#0a0c0d;*/
        font-size:11px;
        text-align:center;
        margin-left:5px; padding:3px; margin-top:30px;
        font-family: arial, "MS ゴシック",sans-serif;
        border-radius: 5px;
}
.balloon_right:after, .balloon_right:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.balloon_right:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 3px; /*5px;*/
	margin-top: -3px; /*5px;*/
}
.balloon_right:before {
	border-color: rgba(10, 12, 13, 0);
	border-right-color: gray; /*#0a0c0d;*/
	border-width: 4px; /*6px;*/
	margin-top: -4px;  /*6px;*/
}
/*     */

</style>

 カウントの設置方法

ボタンの上の例

シェア

ボタンの右の例

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

 設置手順

 HTML/javascriptコード - Facebookの例

<!-- ボタンカウント DIV領域 -->
<div id="id_name" class="吹き出しのclass_name" style="width:ボタンの大きさ1px">
<script>buttoncountSet("facebook","#b1","ソーシャルボタンを設置したページのURL");</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>
<div style="width:ボタンの大きさ2px">
<!-- 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>
<!-- ボタンカウント DIV領域 -->
<div id="b2" class="balloon_right"><script>buttoncountSet("facebook","#id_name","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
</div>
</div>
<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>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 7サイト公式ボタンにカウント設置

カウント取得対応サイトの一覧をつぎに示します。
なお、以下のカウント設置の中で表示されている「カウント」は、このページのものではなく、 デモのためのサンプルページのカウント値です。

   表 カウント取得対応サイト一覧
SNSサイト名 Facebook Google+ Hatena Pinerest Feedly LDR
LDR pocket
Pocket Linkedin Buffer Twitter ←公式サイトにリンク
カウント取得PHP起動名 facebook google hatena pinerest feedly livedoor pocket linkedin buffer twitter ←ページ内カウント設置方法にリンク

 (1)Facebook

ボタンの上の例

シェア

ボタンの右の例

<!-- Facebook ボタン カウント -->
<div id="facebook-ct" class="balloon_top" style="width:67px"><script>buttoncountSet("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>
<!-- Facebook 公式ボタン -->
<div style="width:105px">
<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>
</div>
<!-- Facebook ボタン カウント -->
<div id="facebook-cr" class="balloon_right"><script>buttoncountSet("facebook","#facebook-cr","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script></div>
</div>
<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>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 (2)Google+

ボタンの上の例

ボタンの右の例

<!-- google ボタン カウント -->
<div id="google-ct" class="balloon_top" style="width:100px"><script>buttoncountSet("google","#google-ct","https://plus.google.com/101748015513264110691");</script>
</div>
<!-- 共有ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<div style="width:150px">
<!-- 共有ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div><div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
</div>
<!-- google ボタン カウント -->
<div id="google-cr" class="balloon_right"><script>buttoncountSet("google","#google-cr","https://plus.google.com/101748015513264110691");</script>
</div>
</div>
<!-- 共有ボタン を表示したい位置に次のタグを貼り付けてください。 -->
<div><div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div></div>
<!-- head 内か、body 終了タグの直前に次のタグを貼り付けてください。 -->
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'ja'}
</script>

 (3)Hatena

ボタンの上の例

このエントリーをはてなブックマークに追加

ボタンの右の例

このエントリーをはてなブックマークに追加
<!-- hatena ボタンカウント -->
<div id="hatena-ct" class="balloon_top" style="width:32px"><script>buttoncountSet("hatena","#hatena-ct","http://urbanqee.com/");</script>
</div>
<!-- hatena 公式ボタン -->
<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="20" height="20" style="border: none;" /></a>
<div style="width:100px">
<!-- 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="20" height="20" style="border: none;" /></a>
</div>
<!-- hatena ボタンカウント -->
<div id="hatena-cr" class="balloon_right"><script>buttoncountSet("hatena","#hatena-cr","http://urbanqee.com/webutil/photo/shadowbox/photo-shadowbox.html");</script>
</div>
</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="20" height="20" style="border: none;" /></a>

<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

 (4)Pinterest

ボタンの上の例

ボタンの右の例

<!-- pinterest ボタンカウント -->
<div id="pinterest-ct" class="balloon_top" style="width:40px"><script>buttoncountSet("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>

<div style="width:90px">
<!-- pinterest 公式ボタン -->
<div>
<a data-pin-do="buttonBookmark" data-pin-lang="ja" data-pin-save="true" href="https://jp.pinterest.com/pin/create/button/"></a>
</div>
<!-- pinterest ボタンカウント -->
<div id="pinterest-cr" class="balloon_right"><script>buttoncountSet("pinterest","#pinterest-cr","http://pinplugins.com/pincount/");</script>
</div>
</div>
  
<a data-pin-do="buttonBookmark" data-pin-lang="ja" data-pin-save="true" href="https://jp.pinterest.com/pin/create/button/"></a>

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

 (5)Feedly (RSS)

ボタンの上の例

follow us in feedly

ボタンの右の例

follow us in feedly
<!-- feedly ボタンカウント -->
<div id="feedly-ct" class="balloon_top" style="width:60px"><script>buttoncountSet("feedly","#feedly-ct","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
</div>
<!-- feedly 公式ボタン -->
<a href='http://cloud.feedly.com/#subscription%2Ffeed%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 style="width:130px">
<!-- feedly 公式ボタン -->
<div>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%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>buttoncountSet("feedly","#feedly-cr","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
</div>
</div>
  
<a href='http://cloud.feedly.com/#subscription%2Ffeed%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>

 (6)LDR - Live Dwango Reader (RSS)

ボタンの上の例

Subscribe with Live Dwango Reader

ボタンの右の例

Subscribe with Live Dwango Reader
<!-- LDR ボタンカウント -->
<div id="livedoor-ct" class="balloon_top" style="width:80px"><script>buttoncountSet("livedoor","#livedoor-ct","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
</div>
<!-- LDR 公式ボタン -->
<a href="http://reader.livedwango.com/subscribe/http://rssblog.ameba.jp/ske48official/rss20.xml" target="_blank" title="Subscribe with Live Dwango Reader"><img src="http://image.reader.livedwango.com/img/banner/91_17_2.gif" border="0" width="91" height="17" alt="Subscribe with Live Dwango Reader"></a>
<div style="width:130px">
<!-- LDR 公式ボタン -->
<div>
<a href="http://reader.livedwango.com/subscribe/http://rssblog.ameba.jp/ske48official/rss20.xml" target="_blank" title="Subscribe with Live Dwango Reader"><img src="http://image.reader.livedwango.com/img/banner/91_17_2.gif" border="0" width="91" height="17" alt="Subscribe with Live Dwango Reader"></a>
</div>
<!-- LDR ボタンカウント -->
<div id="livedoor-cr" class="balloon_right"><script>buttoncountSet("livedoor","#livedoor-cr","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
</div>
</div>
  
<a href="http://reader.livedwango.com/subscribe/http://rssblog.ameba.jp/ske48official/rss20.xml" target="_blank" title="Subscribe with Live Dwango Reader"><img src="http://image.reader.livedwango.com/img/banner/91_17_2.gif" border="0" width="91" height="17" alt="Subscribe with Live Dwango Reader"></a>

 (7)Pocket

ボタンの上の例

ボタンの右の例

<!-- Pocket ボタンカウント -->
<div id="pocket-ct" class="balloon_top" style="width:55px"><script>buttoncountSet("pocket","#pocket-ct","https://www.google.co.jp/");</script>
</div>
<!-- Pocket 公式ボタン -->
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
<div style="width:130px">
<!-- Pocket 公式ボタン -->
<div>
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
</div>
<!-- Pocket ボタンカウント -->
<div id="pocket-cr" class="balloon_right"><script>buttoncountSet("pocket","#pocket-cr","https://www.google.co.jp/");</script>
</div>
</div>
  
<a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>

<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>

 (8)Linkedin

ボタンの上の例

ボタンの右の例

<!-- Linkedin ボタンカウント -->
<div id="linkedin-ct" class="balloon_top" style="width:55px"><script>buttoncountSet("linkedin","#linkedin-ct","https://www.yahoo.com/");</script>
</div>
<!-- Linkedin 公式ボタン -->
<script type="IN/Share" data-url="http://urbanqee.com/webutil/sns/social-officialbutton-countphp.html"></script>
<div style="width:130px">
<!-- Linkedin 公式ボタン -->
<div>
<script type="IN/Share" data-url="http://urbanqee.com/webutil/sns/social-officialbutton-countphp.html"></script>
</div>
<!-- Linkedin ボタンカウント -->
<div id="linkedin-cr" class="balloon_right"><script>buttoncountSet("linkedin","#linkedin-cr","https://www.yahoo.com/");</script>
</div>
</div>
  
<!-- 公式ボタン -->
<script type="IN/Share" data-url="http://urbanqee.com/webutil/sns/social-officialbutton-countphp.html"></script>
<!-- ボタン生成javascript -->
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: ja_JP</script>

 (9)Buffer

ボタンの上の例

ボタンの右の例

<!-- buffer ボタンカウント -->
<div id="buffer-ct" class="balloon_top" style="width:45px"><script>buttoncountSet("buffer","#buffer-ct","https://www.google.com/");</script>
</div>
<!-- buffer 公式ボタン -->
<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 style="width:130px">
<div>
<!-- buffer 公式ボタン -->
<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>buttoncountSet("buffer","#buffer-cr","https://www.google.com/");</script>
</div>
</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>

<script type="text/javascript" src="https://static.buffer.com/js/button.js"></script>

 (10)Twitter

Twitterのカウントを自サイトに設置する場合、事前にサイト登録が必要です。

ボタンの上の例

Tweet

ボタンの右の例

<!-- twitter ボタンカウント -->
<div id="twitter-ct" class="balloon_top" style="width:65px"><script>buttoncountSet("twitter","#twitter-ct","https://www.google.com/");</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> 
<div style="width:160px">
<!-- twitter 公式ボタン -->
<div>
<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> 
</div>
<!-- twitter ボタンカウント -->
<div id="twitter-cr" class="balloon_right"><script>buttoncountSet("twitter","#twitter-cr","https://www.google.com/");</script>
</div>
</div>
  
<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> 

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

準備カウントの設置方法


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

  1. 公式サイトへ行かずに、簡単に手元でソーシャルボタンをまとめて設置する Lightboxなどのモーダルウィンドウ上にも設置できる ~17SNS/RSSサイト、31種類余りの公式ボタン、非公式デザインボタンどちらでも!~ 
  2. まとめて設置のデモ - モーダルウィンドウにも(1.関連) 
  3. オリジナルデザインのソーシャルボタンにカウントを設置する方法 - デザインボタン 7サイト - Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket  
  4. ソーシャルボタンカウント取得PHPの使い方 - カウントのない公式ソーシャルボタンにカウントを付ける - Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer, Twitter - 10サイト - (本ページ) 

urbanqee   最終更新日:2017.8.1(初版)