HatenaButton

by zerippe

HTML

<a class="container">
    <div class="inner">
        <div class="counter">
            <div id="c" class="count"></div>
            <div class="users">users</div>
        </div>
    </div>
</a>

CSS

.container{
    text-decoration: none;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    display: block;
    width: 48px;
    height: 48px;
    background: #2c6ebd;
    margin: 0px 1px;
    padding: 1px 0px;
    position: relative;
}
.inner{
    background: #2c6ebd url("http://cdn-ak.b.st-hatena.com/images/entry-button/vbutton-bg.png") center top;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='http://cdn-ak.b.st-hatena.com/images/entry-button/vbutton-bg.png');
    _background-image: none;
    _zoom: 1;
    margin: 0 -1px;
    height: 48px;
    position: relative;
    cursor: pointer;
}
.counter{
    text-align: center;
    font-weight: bold;
    line-height: 0.8;
    color: #2c6ebd;
    font-size: 93%;
    background: transparent;
    padding-top: 8px;
}
.users{
    font-size: 80%;
}

JavaScript

var url = "http://www.yahoo.co.jp/";
$.getJSON("http://api.b.st-hatena.com/entry.count?callback=?",{url:url},function(data){
    $("a").attr("href", "http://b.hatena.ne.jp/entry/" + url);
    $("#c").text(data);
});