プラグインを使わないソーシャルボタン(修正版)

別に書かなくても良いと思ったのですが、もし過去のものを参考にされて文句言われるのも嫌なので、現在の仕様を書いておきます。

非同期型ソーシャルボタン

いきなりコードです。

<ul>
            <li>
            <a href="javascript:void(0);" class="twitter" rel="nofollow" onclick="window.open('//twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
                <span class="socialbox"><i class="fa fa-twitter"></i> Tweet</span>
                <span class="scount">
                </span></a>
            </li>
            
            <li>
        <a href="javascript:void(0);" class="facebook" rel="nofollow" onclick="window.open('//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>', '_blank', 'width=450,height=250,top=' + (screen.height-450)/2 + ',left=' + (screen.width-250)/2); return false;">
            <span class="socialbox"><i class="fa fa-facebook-square"></i> いいね</span>
                <span class="scount">
                </span></a>
            </li>
            
            <li>
        <a href="javascript:void(0);" class="googleplus" rel="nofollow" onclick="window.open('//plus.google.com/share?url=<?php the_permalink(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
            <span class="socialbox"><i class="fa fa-google-plus"></i> 共有</span>
                <span class="scount">
                </span></a>
            </li>
            
            <li>
        <a href="javascript:void(0);" class="hatena" rel="nofollow" onclick="window.open('//b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>', '_blank', 'width=640,height=480,top=' + (screen.height-640)/2 + ',left=' + (screen.width-480)/2); return false;">
            <span class="socialbox"><span class="hatenab">B!</span> Hatena</span>
               <span class="scount">
                </span></a>
            </li>
        </ul>

まずはボタンとカウンターのphp。
↑コードだと要Font Awesomeです。

次はjs

<script type="text/javascript">
jQuery(function(t){t.ajax({url:"https://graph.facebook.com/?id=<?php echo $snurl; ?>",timeout:4e3,dataType:"jsonp",success:function(o){t(".facebook .scount").text(o.shares||0)},error:function(){t(".facebook .scount").text("0")}}),t.ajax({url:"<?php echo $jsurl; ?>/sns/twcunt.php",timeout:4e3,data:{url:"<?php echo $snurl; ?>"},success:function(o){t(".twitter .scount").text(o)},error:function(){t(".twitter .scount").text("0")}}),t.ajax({url:"<?php echo $jsurl; ?>/sns/htcunt.php",timeout:4e3,data:{url:"<?php echo $snurl; ?>"},success:function(o){t(".hatena .scount").html(o)},error:function(){t(".hatena .scount").text("0")}}),t.ajax({url:"<?php echo $jsurl; ?>/sns/gcunt.php",timeout:4e3,cache:!1,data:{url:"<?php echo $snurl; ?>"},success:function(o){t(".googleplus .scount").text(o)},error:function(){t(".googleplus .scount").text("0")}})});
</script>

申し訳ないですが、minファイルにしてしまったので分かり難いですが、こんな感じです。これをフッター下にセット。変数を使っているのでコピペでは使えません。変数の部分はパーマリンクとテーマディレクトリのURLです。
sslに対応するように、テーマ内のphpで処理をかけます。

そして、処理させるphp

<?php
        $url = $_GET['url'];
        $json = @file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.rawurlencode($url));
        $array = json_decode($json,true);
        echo $array['count'];
?>

↑ツイッターです。

<?php
        $url = $_GET['url'];
        $count = @file_get_contents('http://api.b.st-hatena.com/entry.count?url='.rawurlencode($url));
        if(!isset($count) || !$count){
        $count = 0;
        }
        echo $count;
?>

↑ハテブ

<?php
        $url = $_GET['url'];
        $sgoogle = @file_get_contents( 'https://apis.google.com/_/+1/fastbutton?url=' . urlencode( $url ) );
        preg_match( '/[2,([0-9.]+),[/', $sgoogle, $gcount );
        echo $gcount[1];
?>

↑ググタス

それぞれphpを用意します。
まとめたい場合はfile_getよりcurl_multiを使ったほうが速いです。

こんな感じです。

---

---