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

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

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

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

表1 jQuery.socialbuttonプラグインおよびjQuery-snsbuttonプラグインのソーシャルボタン設置サイト一覧 (カウント取得PHP対応-10サイト
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がうまく動作しない)
- :ここでは未対応

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

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

 準 備

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

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

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

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

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

   表 SNS 10サイト、ソーシャルボタン公式サイト一覧
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属性解除設定(以下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>

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

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

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

1.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

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

カウント Facebook

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

3.SNSサイトから取得した公式ボタン

カウント Hatena

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

    設置手順

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


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

  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サイト -  
  5. ソーシャルボタン、カウントをボタンの中に付ける ~ 公式ボタン、デザインボタン ~ Twitter, Facebook, Google+, Hatena, Pinerest, Feedly, LDR, Pocket, Linkedin, Buffer - 10サイト - (本ページ) 

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