公式ソーシャルボタンのカウントをカラー吹き出しで表示する
―ソーシャルボタンカウント取得PHPとカラー吹き出しCSSの使い方
～ カウントのないソーシャルボタンにカラフルなカウントを付ける ～
Facebook, Hatena, Pinerest, Feedly, Pocket, Buffer, Twitter
- ７ サイト -

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

<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://.../.../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);
                $(target).css({'margin-top':'2px' , 'margin-bottom':'5px'});            //カウントDIVのmargin 3px
                var classname = $(target).attr("class");    //吹き出しのCLASS名取得 top/right/bottom/left 
                if(classname.match(/right/) || classname.match(/left/)){ 
                  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>");
                  $(obj).append("<div style='content: ; clear: both; display: block;'></div>"); 
                 }
                //if(site == "pinterest"){
                //console.log($(obj).html());}
              }).fail(function(data){
                var res = "error";
                $(target).text(res);
                console.log(obj);
             });
}
</script>

<!-- カラー吹き出し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">

<!-- jQuery-snsbuttonプラグインライブラリー -->
<script src="http://.../.../jquery-snsbutton-1.2.js"></script>

<p>1. ボタンの上の例</p>
 <!-- カウント -->
 <div id="twitter_count1" class="balloon_top" style="width:65px;margin:3px"><script>buttoncountSet("twitter","#twitter_count1","http://urbanqee.com/");</script>
 </div>
 <!-- 公式ボタン -->
 <div>
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="urban_qee" data-lang="ja">ツイート</a>
 </div>

<p>2. ボタンの下の例</p>
 <!-- 公式ボタン -->
 <div>
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="urban_qee" data-lang="ja">ツイート</a>
 </div>
 <!-- Facebook カウント -->
 <div id="twitter_count2" class="balloon_bottom" style="width:65px"><script>buttoncountSet("twitter","#twitter_count2","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
 </div>
  

<p>3. ボタンの右の例</p>
<DIV style="width:120px"><!-- 親要素 -->
 <!-- 公式ボタン -->
 <div>
 <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://urbanqee.com/webutil/sns/social-officialbutton-countphp.html" data-via="urban_qee" data-size="large">Tweet</a> 
 </div>
 <!-- カウント -->
 <div id="twitter_count3" class="balloon_right"><script>buttoncountSet("twitter","#twitter_count3","http://urbanqee.com/");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:120px"><!-- 親要素 -->
 <!-- カウント -->
 <div id="twitter_count4" class="balloon_left"><script>buttoncountSet("twitter","#twitter_count4","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
 </div>
 <!-- 公式ボタン -->
 <div>
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="urban_qee" data-lang="ja">ツイート</a>
 </div>
</DIV>

<DIV style="position: relative;width: 135px; height: 30px; border: none;">
 <!-- デザインボタン -->
 <div class="twitter-button5"></div> 
 <!-- カウント -->
 <div id="twitter_count5" 
         style="position: absolute; top: 25%; right: 2%; color: #ffffff; padding: 1px;
         font-size: 10px; font-style:italic;"> 
         <script>buttoncountSet("twitter","#twitter_count5","https://www.youtube.com/");</script>
 </div> 
</DIV>

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

</body>

<!-- Twitter 公式 javascript -->
<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>

<p>1. ボタンの上の例</p>
<!-- カウント -->
<div id="buffer_count1" class="balloonr_top" style="width:45px"><script>buttoncountSet("buffer","#buffer_count1","https://www.google.com/");</script>
</div>
<div><!-- 公式ボタン -->
 <a href="http://bufferapp.com/add" class="buffer-add-button" data-text="Hi" data-url="http://urbanqee.com/webutil/sns/socialbutton-count-5positions.html" data-count="none" ></a>
</div>

<p>2. ボタンの下の例</p>
<div><!-- 公式ボタン -->
 <a href="http://bufferapp.com/add" class="buffer-add-button" data-text="Hi" data-url="http://urbanqee.com/webutil/sns/socialbutton-count-5positions.html" data-count="none" ></a>
</div>
<!-- カウント -->
<div id="buffer_count2" class="balloonr_bottom" style="width:45px"><script>buttoncountSet("buffer","#buffer_count2","https://www.google.com/");</script>
</div>
  

<p>3. ボタンの右の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <div><!-- 公式ボタン -->
  <a href="http://bufferapp.com/add" class="buffer-add-button" data-text="Hi" data-url="http://urbanqee.com/webutil/sns/socialbutton-count-5positions.html" data-count="none" ></a>
 </div>
 <!-- カウント -->
 <div id="buffer_count3" class="balloonr_right"><script>buttoncountSet("buffer","#buffer_count3","https://www.google.com/");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- カウント -->
 <div id="buffer_count4" class="balloonr_left"><script>buttoncountSet("buffer","#buffer_count4","https://www.google.com/");</script>
 </div>
 <div><!-- 公式ボタン -->
  <a href="http://bufferapp.com/add" class="buffer-add-button" data-text="Hi" data-url="http://urbanqee.com/webutil/sns/socialbutton-count-5positions.html" data-count="none" ></a>
 </div>
</DIV>

<DIV style="position: relative;width: 58px; height: 30px; border: none;"> <!-- 親DIV要素 -->
   <div><!-- 公式ボタン -->
    <a href="http://bufferapp.com/add" class="buffer-add-button" data-text="Hi" data-url="http://urbanqee.com/webutil/sns/socialbutton-count-5positions.html" data-count="none" ></a>
   </div> 
    <!-- カウント -->
    <div id="buffer_count5" 
         style="position: absolute; bottom: 5%; right: 0%; color: red; padding: 1px;
         font-size: 11px; font-family: arial, "ＭＳ ゴシック",sans-serif;">
         <script>buttoncountSet("buffer","#buffer_count5","https://www.google.com/");</script>
    </div> 
</DIV>

<!-- ボタン生成 -->
<script type="text/javascript" src="https://static.buffer.com/js/button.js"></script>

</body>

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

<p>1. ボタンの上の例</p>
<!-- カウント -->
 <div id="facebook_count1" class="balloonbl_top" style="width:55px"><script>buttoncountSet("facebook","#facebook_count1","https://www.yahoo.co.jp/");</script>
 </div>
<!-- 公式ボタン -->
 <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>

<p>2. ボタンの下の例</p>
<!-- 公式ボタン -->
 <div class="fb-share-button" data-href="https://www.yahoo.co.jp/" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.yahoo.co.jp%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">シェア</a>
 </div>
<!-- カウント -->
 <div id="facebook_count2" class="balloonbl_bottom" style="width:55px"><script>buttoncountSet("facebook","#facebook_count2","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
 </div>
  

<p>3. ボタンの右の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- Facebook 公式ボタン -->
 <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" 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=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">シェア</a>
 </div>
 <!-- Facebook カウント -->
 <div id="facebook_count3" class="balloonbl_right"><script>buttoncountSet("facebook","#facebook_count3","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- Facebook カウント -->
 <div id="facebook_count4" class="balloonbl_left"><script>buttoncountSet("facebook","#facebook_count4","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");</script>
 </div>
 <!-- Facebook 公式ボタン -->
 <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" 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=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse">シェア</a>
 </div>
</DIV>

<DIV style="position: relative;width: 135px; height: 30px; border: none;"> <!-- 親DIV要素 -->
    <!-- ボタン -->
    <div class="facebook-button5"></div> 
    <!-- カウント -->
    <div id="facebook_count5" 
         style="position: absolute; top: 25%; right: 5%; color: #ffffff; padding: 1px;
         font-size: 11px; font-family: arial, "ＭＳ ゴシック",sans-serif;">
         <script>buttoncountSet("facebook","#facebook_count5","https://www.youtube.com/");</script>
    </div> 
</DIV>

<!-- ボタン生成 -->
<script> 
 $(function(){
    $('.facebook-button5').snsbutton('facebookShare', { img: 'images/facebook-count.jpg', 
       alt: 'このページの情報を カウント付きFacebook で共有する', 
       width: '135', height: '30' });
  });
</script>

</body>

<!-- facebook javascript -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.3"></script>

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

<p>2. ボタンの下の例</p>
<!-- 公式ボタン -->
<div>
  <a href="https://b.hatena.ne.jp/entry/s/www.yahoo.co.jp/" class="hatena-bookmark-button" data-hatena-bookmark-layout="touch" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</div>
<!-- カウント -->
<div id="hatena_count2" class="balloongr_bottom" style="width:32px"><script>buttoncountSet("hatena","#hatena_count2","http://urbanqee.com/");</script>
</div>
  

<p>3. ボタンの右の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- 公式ボタン -->
 <div>
  <a href="https://b.hatena.ne.jp/entry/s/www.yahoo.co.jp/" class="hatena-bookmark-button" data-hatena-bookmark-layout="touch" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
 </div>
 <!-- カウント -->
 <div id="hatena_count3" class="balloongr_right"><script>buttoncountSet("hatena","#hatena_count3","http://urbanqee.com/webutil/photo/shadowbox/photo-shadowbox.html");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- カウント -->
 <div id="hatena_count4" class="balloongr_left"><script>buttoncountSet("hatena","#hatena_count4","http://urbanqee.com/");</script>
 </div>
 <!-- 公式ボタン -->
 <div>
  <a href="https://b.hatena.ne.jp/entry/s/www.yahoo.co.jp/" class="hatena-bookmark-button" data-hatena-bookmark-layout="touch" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
 </div>
</DIV>

<DIV style="position: relative;width: 64px; height: 64px; border: none;"> <!-- 親DIV要素 -->
    <!-- ボタン -->
    <div class="hatena-button5"></div> 
    <!-- カウント -->
    <div id="hatena_count5" 
         style="position: absolute; bottom: 5%; right: 40%; color: #ffffff; padding: 1px;
         font-size: 11px; font-family: arial, "ＭＳ ゴシック",sans-serif;">
         <script>buttoncountSet("hatena","#hatena_count5","http://urbanqee.com/webutil/photo/shadowbox/photo-shadowbox.html");</script>
    </div> 
</DIV>

<!-- ボタン生成 -->
<script> 
    $('.hatena-button5').snsbutton('hatenaBookmark', { img: 'images/icons-type3/Hatebu.png', 
       alt: 'このページの情報を カウント付きHatena で共有する',
       width: '64', height: '64' });
  });
</script>

</body>

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

<p>1. ボタンの上の例</p>
<!-- カウント -->
 <div id="pinterest_count1" class="balloonor_top" style="width:38px;"><script>buttoncountSet("pinterest","#pinterest_count1","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>
 </div>

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

<p>3. ボタンの右の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- 公式ボタン -->
 <div>
  <a data-pin-do="buttonBookmark" data-pin-lang="ja" data-pin-save="true" href="https://jp.pinterest.com/pin/create/button/"></a>
 </div>
 <!-- カウント -->
 <div id="pinterest_count3" class="balloonor_right"><script>buttoncountSet("pinterest","#pinterest_count3","http://pinplugins.com/pincount/");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- カウント -->
 <div id="pinterest_count4" class="balloonor_left"><script>buttoncountSet("pinterest","#pinterest_count4","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>
 </div>
</DIV>

<DIV style="position: relative;width: 64px; height: 64px; border: none;"> <!-- 親DIV要素 -->
    <!-- ボタン -->
    <div class="pinterest-button5"></div> 
    <!-- カウント -->
    <div id="pinterest_count5" 
         style="position: absolute; bottom: 5%; right: 30%; color: #ffffff; padding: 1px;
         font-size: 11px; font-family: arial, "ＭＳ ゴシック",sans-serif;">
         <script>buttoncountSet("pinterest","#pinterest_count5","http://pinplugins.com/pincount/");</script>
    </div> 
</DIV>

<!-- ボタン生成 -->
<script> 
    $('.pinterest-button5').snsbutton('pinTerest', { img: 'images/icons-type7/Pinterest.png', 
       alt: 'このページの情報を カウント付きPinterest で共有する',
       width: '64', height: '64' });
  });
</script>

</body>

<!-- Pinterest javascript -->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<p>1. ボタンの上の例</p>
<!-- カウント -->
 <div id="feedly_count1" class="balloon-maru_top" style="width:32px;margin-left:18px"><script>buttoncountSet("feedly","#feedly_count1","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
 </div>
<!-- 公式ボタン -->
 <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-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
 </div>

<p>2. ボタンの下の例</p>
<!-- 公式ボタン -->
 <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-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
 </div>
<!-- カウント -->
 <div id="feedly_count2" class="balloon-maru_bottom" style="width:32px;margin-left:18px"><script>buttoncountSet("feedly","#feedly_count2","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
 </div>
  

<p>3. ボタンの右の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- 公式ボタン -->
 <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-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
 </div>
 <!-- カウント -->
 <div id="feedly_count3" class="balloon-maru_right"><script>buttoncountSet("feedly","#feedly_count3","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:150px"> <!-- 親DIV要素 -->
 <!-- カウント -->
 <div id="feedly_count4" class="balloon-maru_left"><script>buttoncountSet("feedly","#feedly_count4","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
 </div>
 <!-- 公式ボタン -->
 <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-flat-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
 </div>
</DIV>

<DIV style="position: relative;width: 145px; height: 36px; border: none;"> <!-- 親DIV要素 -->
    <!-- ボタン -->
    <div class="feedly-button5"></div> 
    <!-- カウント -->
    <div id="feedly_count5" 
         style="position: absolute; top: 45%; right: 2%; color: #ffffff; padding: 1px;
         font-size: 11px; font-family: arial, "ＭＳ ゴシック",sans-serif;">
         <script>buttoncountSet("feedly","#feedly_count5","http://rssblog.ameba.jp/ske48official/rss20.xml");</script>
    </div> 
</DIV>

<!-- ボタン生成 -->
<script> 
    $('.feedly-button5').snsbutton('feedlyRss', { img: 'images/feedly-count2.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '145', height: '36' });
  });
</script>

</body>

javascriptなし

<p>1. ボタンの左上の例</p>
<!-- カウント -->
 <div id="pocket_count1" class="balloon-maru_topl2" style="font-size:10px; margin-bottom: -3px; margin-left:25px;border:0px solid red"><script>buttoncountSet("pocket","#pocket_count1","http://urbanqee.com/doga/dl/youtube-video_downloader.php");</script>
 </div>
<!-- 公式ボタン -->
 <div class="pocket-button1" style="width:px;">
  <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
 </div>

<p>2. ボタンの右上の例</p>
<!-- カウント -->
 <div width=32 id="pocket_count2" class="balloon-maru_topr2" style="margin-bottom: -3px; margin-left:75px;border:0px solid red"><script>buttoncountSet("pocket","#pocket_count2","https://www.google.co.jp/");</script>
 </div>
<!-- 公式ボタン -->
 <div  width=32 class="pocket-button1" style="width:px;">
  <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
 </div>
  

<p>3. ボタンの左下の例</p>
<!-- 公式ボタン -->
 <div class="pocket-button1" style="width:px;">
  <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
 </div>
<!-- カウント -->
 <div id="pocket_count3" class="balloon-maru_bottoml2" style="margin-top: -5px; margin-left:25px;border:0px solid red"><script>buttoncountSet("pocket","#pocket_count3","https://www.google.co.jp/");</script>
 </div>

<p>4. ボタンの右下の例</p>
<!-- 公式ボタン -->
 <div  width=32 class="pocket-button1" style="width:px;">
  <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a>
 </div>
<!-- カウント -->
 <div width=32 id="pocket_count4" class="balloon-maru_bottomr2" style="margin-top: -5px; margin-left:75px;border:0px solid red"><script>buttoncountSet("pocket","#pocket_count4","https://www.google.co.jp/");</script>
 </div>

<DIV style="position: relative;width: 164px; height: 30px; border: none;"> <!-- 親DIV要素 -->
    <!-- ボタン -->
    <div class="pocket-button5"></div> 
    <!-- カウント -->
    <div id="pocket_count5" 
         style="position: absolute; bottom: 5%; right: 5%; color: #ffffff; padding: 1px;
         font-size: 11px; font-family: arial, "ＭＳ ゴシック",sans-serif;">
         <script>buttoncountSet("pocket","#pocket_count5","https://www.google.co.jp/");</script>
    </div> 
</DIV>

<!-- ボタン生成 -->
<script> 
    $('.pocket-button5').snsbutton('pocketButton', { img: 'images/pocket-count1.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '164', height: '30' });
  });
</script>

</body>

<!-- Pocket javascript -->
<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>

<p>1. ボタンの上の例</p>
<!-- カウント --> 
 <div id="designbutton_tw1-count" class="balloonr_top" style="width:32px;text-align:">
   <script>buttoncountSet("twitter","#designbutton_tw1-count","http://urbanqee.com/");</script></div> 
<!-- デザインボタン -->
 <div class="designbutton_tw1"></div> 

<p>2. ボタンの下の例</p>
<!-- デザインボタン -->
  <div class="designbutton_tw2"></div>
<!-- カウント --> 
  <div id="designbutton_tw2-count" class="balloongr_bottom" style="width:32px;text-align:">
    <script>buttoncountSet("twitter","#designbutton_tw2-count","http://urbanqee.com/");</script></div>
  

<p>3. ボタンの右の例</p>
<DIV style="width:150px"><!-- 親要素div -->
 <!-- デザインボタン -->
 <div class="designbutton_tw3">
 </div>
 <!-- カウント -->
 <div id="designbutton_tw3-count" class="balloonfu_right">
   <script>buttoncountSet("twitter","#designbutton_tw3-count","http://urbanqee.com/");</script>
 </div>
</DIV>

<p>4. ボタンの左の例</p>
<DIV style="width:150px"><!-- 親要素div -->
 <!-- カウント -->
 <div id="designbutton_tw4-count" class="balloonaq_left">
   <script>buttoncountSet("twitter","#designbutton_tw4-count","http://urbanqee.com/");</script>
  </div>
 <!-- デザインボタン -->
 <div class="designbutton_tw4">
 </div>
</DIV>

<p><p>5. ボタンの中の例</p></p>
<DIV style="position: relative;width: 135px; height: 30px; border: none;"><!-- 親要素div -->
    <div class="designbutton-tw5"></div> <!-- デザインボタン -->
    <div id="designbutton_id5-count" 
         style="position: absolute; top: 25%; right: 5%; color: #ffffff; padding: 1px;
         font-size: 11px; font-style:italic;"> <!-- カウント -->
    <script>buttoncountSet("twitter","#designbutton_id5-count","http://urbanqee.com/doga/dl-cur/youtube-video_downloader.php");    
    </script>
    </div> 
</DIV>

<!-- デザインボタン設置とボタン有効化  javascript -->
<script>
 $(function(){
   /* 1. ボタンの上 */
   $('.designbutton_tw1').snsbutton('twitterShare', { img: 'images/icon_tw.gif', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '40', height: '40' });
   /* 2. ボタンの下 */
   $('.designbutton_tw2').snsbutton('twitterShare', { img: 'images/icon_tw.gif', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '40', height: '40' });
   /* 3. ボタンの右 */
   $('.designbutton_tw3').snsbutton('twitterShare', { img: 'images/twitter-tweet.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '100', height: '25' });
   /* 4. ボタンの左 */
   $('.designbutton_tw4').snsbutton('twitterShare', { img: 'images/twitter-tweet.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '100', height: '25' });
   /* 5. ボタンの中 */
   $('.designbutton-tw5').snsbutton('twitterShare', { img: 'images/twitter-count.jpg', 
       alt: 'このページの情報を カウント付きTwitter で共有する',
       width: '135', height: '30' });
 });
</script>