オリジナルデザインのソーシャルボタンにカウントを設置する方法 v3
カラー吹き出し対応 - デザインボタン ７サイト -
Twitter, Facebook, Hatena, Pinterest, Feedly, Buffer, Pocket

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

function buttoncountSet13(url2,site,pos,bw,bh,target){
        var shareurl = url2;         // ボタン設置ページのURL    buttoncountSet13(url2,"facebook",count,w,h,target);  
        var site = site;             // SNS サイト名 例：facebook
        var pos = pos;               // countの設置位置 top, right
        var bwidth = bw;             // ボタン画像の横幅
        var bwidth2 = bw + bw;
        var bheight = bh;            // ボタン画像の高さ
        var phpurl = "http://.../.../socialbutton-count.php";  // ソーシャルボタンカウント取得PHP URL (要修正） 
        if(pos == "top" || pos == "bottom" || pos == "right" || pos == "left" ){ pos = "balloon_" + pos; }  
        //var encodeurl = encodeURIComponent(shareurl);  // エンコードはPHP側で行う
        //alert(pos+"/"+site);
    if(pos.match(/top/) || pos.match(/right/) || pos.match(/left/) || pos.match(/bottom/)){

        $.ajax({
            url: phpurl,  // ソーシャルボタンカウント取得PHP
            dataType: "json",
            data: { url: shareurl, site: site, pass: "H290707" },

            success: function(data) {
                var res = data;
                if( pos.match(/top/) || pos.match(/bottom/) ){
                   var oyadiv = $('
'); //親要素追加
                   $(target).wrap(oyadiv);
                   $(target).css( {'float': 'none', 'margin-top' : '2px','margin-bottom' : '3px'} ); // button div float none in top bottom
                   var countTag = '
' + res + '
';
                   if( pos.match(/top/) ){ $(target).before(countTag); }
                   else{ $(target).after(countTag); } 
                  }
                else if( pos.match(/right/) || pos.match(/left/) ){
                   var oyadiv = $('
'); //親要素追加
                   $(target).wrap(oyadiv);
                   var countTag = '
' + res + '
';
                   var countTagL1 = '
' + res + '
';
                   var countTagL2 = '
';
                   if( pos.match(/right/) ){ 
                         $(target).after(countTag); 
                     }
                   else{ $(target).before(countTagL1); 
                         $(target).after(countTagL2);
                     }
                   //$(".baloon-right").css( {'height': bheight ,'float': 'left' } );
                   $(target).css( {'float': 'left', 'margin-left' : '5px','margin-right' : '5px'} );  // button div float left in right left 
                  }
                else{ return false; }
             },
	   error: function(obj) {
                console.log(obj);
		alert("通信に失敗しました…。");

           }
         });
    }

}

})(jQuery);

<!-- カラー吹き出しCSS 10 ファイル  -->
<link href="http://.../.../socialbutton-balloon.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-red.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-blue.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-green.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-orange.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-yellow.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-lime.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-aqua.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-fuchsia.css" rel="stylesheet" type="text/css">
<link href="http://.../.../socialbutton-balloon-maru.css" rel="stylesheet" type="text/css">

<!-- Twitterデザインボタン設置域 -->
<div class="c-twitter-t"></div>

<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
  $('.c-twitter-t').snsbutton('twitterShare', 
    { img: 'images/Twitter.png', alt: 'このページの情報を Twitter で共有する',
      button: "balloonr_right", url: "http://urbanqee.com/" 
    });
});
</script>

<!-- Facebookデザインボタン設置域 -->
<div class="c-facebook-r"></div>

<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
 $('.c-facebook-r').snsbutton('facebookShare',
    { img: 'images/Facebook.png', alt: 'このページの情報を Facebook - count付き で共有する',
      button: "balloonor_top", url: "http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php"
    });
});
</script>

<!-- Hatenaデザインボタン設置域 -->
<div class="c-hatena-r"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
 $('.c-hatena-r').snsbutton('hatenaBookmark', { img: 'images/hatena-bookmark.jpg', 
     alt: 'このページの情報を はてなブックマーク に追加する',
     url: 'http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php', width: '88', height: '19', 
     button: "balloonli_bottom" });
});
</script>

<!-- Pinterestデザインボタン設置域 -->
<div class="c-pinterest-t"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
 $('.c-pinterest-t').snsbutton('pinTerest', { img: 'images/pinterest3.png', 
   alt: 'このページの情報を Pinterest で共有する',
   media: 'http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg', width: '32', height: '32', 
   button: 'balloonbl_bottom', url: 'http://pinplugins.com/pincount/' });
});
</script>

<!-- Feedlyデザインボタン設置域 -->
<div class="c-feedly-t"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
 $('.c-feedly-t').snsbutton('feedlyRss', { 
    img: 'http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png', 
    alt: 'Feedly - RSSフィードを使用して、このページの情報を共有する',
    url: 'http://rssblog.ameba.jp/ske48official/rss20.xml', width: '71', height: '28', 
    button: "balloonaq_bottom"  });
});
</script>

<!-- Bufferデザインボタン設置域 -->
<div class="c-buffer-t"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
 $('.c-buffer-t').snsbutton('buffer', 
   { img: 'images/buffer174840.png', alt: 'このページの情報を Buffer で共有する',
   button: "balloonye_left",  url: 'https://www.google.com/' });
});
</script>

<!-- Pocketデザインボタン設置域 -->
<div class="c-pocket-t"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得表示 javascript -->
<script>
$(function(){
 $('.c-pocket-t').snsbutton('pocketButton', { img: 'images/getpocket.png', 
    alt: 'このページの情報を pocket に保存する', width: '32', height: '32', 
    button: "balloongr_bottom", url: 'https://www.google.co.jp/' });
});
</script>

<!-- 1 Twitterデザインボタン設置域 -->
<div class="f-twitter-share"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-twitter-share').snsbutton('twitterShare', 
   { img: 'images/Twitter.png', alt: 'このページの情報を Twitter で共有する' 
    });
});
</script> 

<!-- 2 Facebookデザインボタン設置域 -->
<div class="f-facebook-share"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-facebook-share').snsbutton('facebookShare', { img: 'images/Facebook.png', alt: 'このページの情報を Facebook - No count で共有する' });
});
</script>

<!-- 3 Lineデザインボタン設置域 -->
<div class="f-line-it"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
  $('.f-line-it').snsbutton('lineIt', { img: 'images/line-share-d.png', alt: 'このページの情報を LINE で共有する',
   clientid: '1341209950', state: '1409338029' });
});
</script>

<!-- 4 Hatenaデザインボタン設置域 -->
<div class="f-hatena-bookmark"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-hatena-bookmark').snsbutton('hatenaBookmark', { img: 'images/hatena-bookmark.png', alt: 'このページの情報を はてなブックマーク に追加する' });
});
</script>

<!-- 5 Pocketデザインボタン設置域 -->
<div class="f-pocket-post"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-pocket-post').snsbutton('pocketButton', { img: 'images/getpocket.png', alt: 'このページの情報を pocket に保存する' });
});
</script>

<!-- 6 Mixiデザインボタン設置域 -->
<div class="f-mixi-check"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-mixi-check').snsbutton('mixiCheck', { img: 'images/mixi-check.gif', alt: 'このページの情報を mixi で共有する',
    key: 'mixi99999' });
});
</script>

<!-- 7 Tumlrデザインボタン設置域 -->
<div class="f-tumblr-post"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-tumblr-post').snsbutton('tumblrShare', { img: 'images/tumblr-logo-whiteonblue-512.png', alt: 'このページの情報を Tumblr で共有する'});
});
</script>

<!-- 8 Greeデザインボタン設置域 -->
<div class="f-gree-share"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-gree-share').snsbutton('greeSf', { img: 'images/gree-btn_logo_32.png', alt: 'このページの情報を GREE で共有する'});
});
</script>

<!-- 9 Pinterestデザインボタン設置域 -->
<div class="f-pinterest-share"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-pinterest-share').snsbutton('pinTerest', { img: 'images/pinterest3.png', alt: 'このページの情報を Pinterest で共有する',
   media: 'http://urbanqee.com/webutil/photo/fancybox/demo/people/girl-pixabay-03.jpg' });
});
</script>

<!-- 10 Feedlyデザインボタン設置域 -->
<div class="f-feedly-rss"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-feedly-rss').snsbutton('feedlyRss', { img: 'images/feedly-follow-square-volume_2x.png', alt: 'Feedly - RSSフィードを使用して、このページの情報を共有する',
    url: 'http://rssblog.ameba.jp/ske48official/rss20.xml' });
});
</script>

             
<!-- 11 Inoreaderデザインボタン設置域 -->
<div class="f-inoreader-rss"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-inoreader-rss').snsbutton('inoreaderRss', 
      { img: 'images/inoreader.png', alt: 'Inoreader - RSSフィードを使用して、このページの情報を共有する',
      url: 'http://rssblog.ameba.jp/ske48official/rss20.xml' });
});
</script> 

<!-- 12 RSSデザインボタン設置域 -->
<div class="f-rss-rss"></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-rss-rss').snsbutton('rssFeed', { img: 'images/rss-Feed-icon_svg.png', alt: 'RSSフィードを使用して、このページの情報を共有する',
       url: 'http://rssblog.ameba.jp/ske48official/rss20.xml' });
});
</script>

<!-- 13 Amebaデザインボタン設置域 -->
<div class="f-ameba-share"></a></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
var text = encodeURIComponent($('.entry-text').html());
 $('.f-ameba-share').snsbutton('amebaBlog', { img: 'images/ameba-icon_app.png', alt: 'このページの情報を Amebaブログ にPOSTする',
       entrytext: text });
});
</script>

<!--   アメーバブログPOST用データ YouTube埋め込みコード        -->
<div class="entry-text" style="display:none">
<iframe width="560" height="315" src="https://www.youtube.com/embed/sP_xJscd_w0" frameborder="0" allowfullscreen></iframe>
</div>

<!-- 14 Evemoteデザインボタン設置域 -->
<div class="f-evernote-clip"></a></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-evernote-clip').snsbutton('evernoteClip', { img: 'images/evernote.png', 
    alt: 'このページの情報を evernote で共有する' }); 
});
</script>

<!-- 15 Bufferデザインボタン設置域 -->
<div class="f-buffer-share"></a></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-buffer-share').snsbutton('buffer', 
   { img: 'images/buffer174840.png', alt: 'このページの情報を Buffer で共有する' 
    });
});
</script>

<!-- 16 Gooデザインボタン設置域 -->
<div class="f-goo-blog"></a></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-goo-blog').snsbutton('gooBlog', { img: 'images/gooblog.jpg', alt: 'このページの情報を gooブログ にPOSTする'
       });
});
</script>

<!-- 17 LinkedInデザインボタン設置域 -->
<div class="f-linkedin"></a></div>
<!-- デザインボタン有効化、ボタン表示、カウント取得なし javascript -->
<script>
$(function(){
 $('.f-linkedin').snsbutton('linkedIn', { img: 'images/in/In-2C-54px-R.png', alt: 'このページの情報を Linkedin で共有する'       
       });
});
</script>