Social Count

by zerippe

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="container">
    <div><div class="item tumblr"><i class="fa fa-tumblr"></i></div></div>
    <div><div class="item twitter"><i class="fa fa-twitter"></i><span class="count"></span></div></div>
    <div><div class="item facebook"><i class="fa fa-facebook"></i><span class="count"></span></div></div>
    <div><div class="item hatena"><span class="hatena-icon">B!</span><span class="count"></span></div></div>
    <div><div class="item google"><i class="fa fa-google-plus"></i><span class="count"></span></div></div>
</div>

CSS

*{margin:0;padding:0;font-family:"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ",Meiryo,Arial,Helvetica}

#container{
    display:-moz-box;
    display:-webkit-box;
    display:-o-box;
    display:-ms-box;
}
#container > div{
    -moz-box-flex:1.0;
    -webkit-box-flex:1.0;
    -o-box-flex:1.0;
    -ms-box-flex:1.0;
}
.item{
    position: relative;
    text-align: center;
    color: white;
    padding: 5px 0;
    vertical-align: middle;
    overflow: hidden;
}
.item a{
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.tumblr{
    background-color: #2c4762;
}
.twitter{
    background-color: #00b0ed;
}
.facebook{
    background-color: #3b5998; 
}
.hatena{
    background-color: #00a5de;
}
.google{
    background-color: #df4a32;
}
.count{
    display: inline-block;
    margin-left: 5px;
    font-size: .7em;
    background-color: rgba(255,255,255,0.9);
    background-color: rgba(0,0,0,0.5);    
    /*color: #222;*/
    border-radius: 3px;
    padding: 0 5px;
    vertical-align: middle;
}
.hatena-icon{
    display: inline-block;
    font-weight: bold;
}

JavaScript

(function(){
    
    var tumblr = function(url, title, link_selector) {
        var link = '<a title="Share on Tumblr" href="http://www.tumblr.com/share/?v=3&u=' + escape(url) + '&t=' + title + '" target="_blank"></a>';
        $(link_selector).append(link);
    };

    var twitter = function(url, title, count_selector, link_selector) {
        var link = '<a title="Share on Twitter" href="http://twitter.com/share?url=' + url + '&text=' + title + '&via=takibibouroku" target="_blank"></a>';
        $(link_selector).append(link);
    
        $.ajax({
            type: "get", dataType: "jsonp",
            url: "http://urls.api.twitter.com/1/urls/count.json", data: {url: url},
            success: function(data) {
                var count = data.count;
                $(count_selector).text(count);
            }
        });
    };
    
    var facebook = function(url, count_selector, link_selector) {
        var link ='<a title="Share on Facebook" href="http://www.facebook.com/sharer.php?u=' + url + '&t=' + title + '" target="_blank"></a>';
        $(link_selector).append(link);
    
        $.ajax({
            type: "get", dataType: "jsonp",
            url: "http://graph.facebook.com/" + url,
            success: function(data) {
                var count = ("shares" in data) ? data.shares : 0;
                $(count_selector).text(count);
            }
        });
    };
    
    var hatena = function(url, count_selector, link_selector) {
        var link = '<a title="Share on HatenaBookmark" href="http://b.hatena.ne.jp/entry/' + url + '" target="_blank"></a>';
        $(link_selector).append(link);
    
        $.ajax({
            type: "get", dataType: "jsonp",
            url: "http://b.hatena.ne.jp/entry/json/",
            data: {url: url},
            success: function(data) {
                var count = (data != null) ? data.count : 0;
                $(count_selector).text(count);
            }
        });
    };

    var googleplus = function(url,...