ソーシャルボタン、カウントをボタンの中に付ける
～ 公式ボタン、デザインボタン ～
Twitter, Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer
- １０サイト -

準備｜ボタンの中にカウントを設置する方法 ｜1. jQuery-snsbuttonプラグインで取得したデザインボタン
｜2. jQuery.socialbuttonプラグインで取得した公式ボタン ｜3. SNSサイトから取得した公式ボタン

ソーシャルボタンを設置する方法は、Webサイトを検索すると多数あります。このサイトは扱っている設置の方法はつぎのとおりです。

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

表１ jQuery.socialbuttonプラグインおよびjQuery-snsbuttonプラグインのソーシャルボタン設置サイト一覧 （：カウント取得PHP対応-１０サイト）
SNSサイト→
ボタンの種類↓		Twitter
 Facebook
LINEGgoogle
Hatena
Pocket
 mixiTumblr GREEPinterest
公式ボタン
jQuery.socialbuttonプラグイン
(プラグイン機能名）		1.
△共有
(twitter)		2. / 3.
いいね！/シェア
(facebook_share/
facebook_like)		4. / 5.
いいね！/
line it
(linelike/
lineit)		6.
共有
(google_plus1)		7.
共有
(hatena)		8.
共有
(pocket)		9.
チェック
(mixi_check)		10. / 11.
△POST/
follow
(tumblr_post/
tumblr_follow)		12.
共有
(gree_sf)		13.
保存
(pinterest)
デザインボタン
jQuery-snsbuttonプラグイン
(プラグイン機能名）		1.
共有
(twitterShare)		2.
共有
(facebookShare)		3.
共有
(lineIt)		4.
共有
(googlePlus1)		5.
共有
(hatenaBookmark)		6.
共有
(pocketButton)		7.
チェック
(mixiCheck)		8.
共有
(tumblrShare)		9.
共有
(greeSf)		10.
共有
(pinterest)
SNSサイト→
ボタンの種類↓		Linkedin
feedly
InoreaderRSSAmebaSkypeEvernote LDR
goo blogBuffer
公式ボタン
jQuery.socialbuttonプラグイン
(プラグイン機能名）		14.
共有
(linkedin)		15.
RSS
(feedly_rss)		---16.
共有
(skype)		17.
共有
(evernote)		 18.
RSS
(ldrbannar/
ldrpocket)		19.共有
(buffer)
デザインボタン
jQuery-snsbuttonプラグイン
(プラグイン機能名）		-11.
RSS
(feedlyRss)		12.
RSS
(inoreaderRss)		13.
RSS
(rssFeed)		14.
post
(amebaBlog)		-15.
共有
(evernoteClip)		 16.
RSS
(idrRss)		17.
post
(gooBlog)
△：クリックして起動したモーダルウインドウ上に設置したボタンは表示できない。起動元の親ページのボタンは表示できる。(公式ボタン）
（javascriptがうまく動作しない）
- ：ここでは未対応

▼ ソーシャルボタン-デザインボタンにカウントを付ける １０サイト（デザインボタンの吹き出し例のデモ）

（注１）ここに表示されているカウントは、このページのものではなく、デモのためのサンプルページのカウント値です。 デザインボタン解説ページ≫
（注２）Google+ おおび LDRはサービス終了し、LinkedinはカウントAPIが廃止になりました。（2019年6月現在）

 準 備

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

図 ソーシャルボタンカウント取得PHP（左）およびjQuery-snsbuttonプラグイン（右）の動作構成

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

 ソーシャル公式ボタン、デザインボタン画像などの準備

SNS公式サイトの公式ボタンを使いたい場合は、SNS公式サイトソーシャルボタンHTMLを取得しておきます。
また、デザインボタンを使いたい場合は、ボタン画像を準備しておきます（jQuery-snsbuttonプラグイン使用の場合）。

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

 jQueryファイルおよびjQuery.socialbuttonプラグインのインクルード（javascript)

jQueryファイルを、<head>タグ内にインクルードします（必須）。また、jQuery.socialbuttonプラグインを使用する時は、インクルードします。

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- jQuery.socialbuttonプラグイン -->
<script src="js/jquery-snsbutton-1.2.js"></script>

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

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

 ソーシャルボタンカウント取得PHP起動関数(Javascript)

ソーシャルボタンカウント取得PHP起動関数javascriptを<head>タグ内に定義します。 ソーシャルボタンカウント取得PHP起動関数javascriptについて、アップロード先の「ソーシャルボタンカウント取得PHP のURL」を設定します（下ソースコード赤字のURL部分）。 

<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属性解除設定（以下３ステップ）
                $(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>

 ボタンの中にカウントを設置する方法

ボタンの中にカウントを設置する方法について、つぎの３つのソーシャルボタンについて説明します。

  1. jQuery-snsbuttonプラグインで取得したデザインボタン
  2. jQuery.socialbuttonプラグインで取得した公式ボタン
  3. SNSサイトから取得した公式ボタン

１．jQuery-snsbuttonプラグインで取得したデザインボタン

カウント Twitter

    設置手順

   HTML/javascript/CSSコード - Twitterの例

<!-- HTML/CSS -->
<DIV style="position: relative;width: 100px; height: 30px; border: none;">
    <div class="button-twitter"></div> <!-- ボタン -->
    <div id="count_twitter" 
         style="position: absolute; top: 25%; right: 0; color: #ffffff; padding: 1px;
         font-size: 12px; font-style:italic;"> <!-- カウント -->
    </div> 
</DIV>

<!-- javascript カウント取得 -->
<script>buttoncountSet("twitter","#count_twitter","http://jsoon.digitiminimi.com/");</script>
<!-- javascript デザインボタン設置 -->
<script>
 $(function(){
    $('.button-twitter').snsbutton('twitterShare', { img: 'images/twitter-count.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '135', height: '30' });
 });
<script>

<script>
 $(function(){
    $('.button-twitter').snsbutton('twitterShare', { img: 'images/twitter-count.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '135', height: '30' });
 });
<script>

<script>buttoncountSet("twitter","#count_twitter","http://jsoon.digitiminimi.com/");</script>

▼ a. HTML/Javascript/CSS

２．jQuery.socialbuttonプラグインで取得した公式ボタン

カウント Facebook

    設置手順（前項jQuery-snsbuttonプラグインに同様）

３．SNSサイトから取得した公式ボタン

カウント Hatena

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

    設置手順

準備｜ボタンの中にカウントを設置

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

  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   最終更新日：2017.8.10(初版）,2019.6.30