ソーシャルボタン、便利ですけど、あっちこっちにスクリプトを呼びに行くのが嫌な感じなので、できるだけ自前でやるようにしました。(いいね ! ボタンのカウントは API Key が必要なので断念) 2/21 修正: HTML 3行目修正, CSS 86-88行目追加

画像は公式で配っているもの (Twitter/Facebook) を縮小して使ったので、Twitter Bird の色がけっこう違います。

<ul id="social_buttons">
  <li id="hatebu_button"><a href="http://b.hatena.ne.jp/entry/【"http://" 抜きの URL】"><span class="text">B!</span><span class="count">0</span></li>
  <li id="tweet_button"><a href="https://twitter.com/intent/tweet?text=【タイトル】&url=【URL】"><span class="text">ツイート</span></a><a href="http://twitter.com/search?q=【URL】"><span class="count">0</span></a></li>
  <li id="fblike_button"><a href="http://www.facebook.com/plugins/like.php?href=【URL】"><span class="text">いいね !</span></a></li>
</ul>

#social_buttons a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
#social_buttons a:after {
  display: table;
  clear: both;
  content: "";
}
#social_buttons span {
  display: block;
  float: left;
  font-family: sans-serif;
}

#hatebu_button span {
  height: 18px;
  line-height: 18px;
  border: 1px solid #2C6EBD;
  font-weight: bold;
  text-align: center;
}
#hatebu_button .text {
  width: 16px;
  background-color: #568BCA;
  background-image: -webkit-gradient(linear, left top, left bottom,
                                     from(#2C6EBD), to(#2C6EBD));
  background-image: -moz-linear-gradient(0deg, #2C6EBD, #2C6EBD);
  background-image: -o-linear-gradient(0deg, #2C6EBD, #2C6EBD);
  background-size: auto 9px;
  background-position: 0 100%;
  background-repeat: repeat-x;
  border-radius: 2px 0 0 2px;
  color: #FFF;
  font-size: 9px;
}
#hatebu_button .count {
  width: 32px;
  border-color: #ABC5E5;
  border-left-width: 0;
  border-radius: 0 2px 2px 0;
  background-color: #F7F9FC;
  color: #2C6EBD;
  font-size: 10px;
}

#tweet_button span {
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border: 1px solid #CCC;
  border-radius: 3px;
  color: #333;
  font-size: 10px;
}
#tweet_button .text {
  margin-right: 5px;
  padding-left: 20px;
  background: #EEE url(./twitter_newbird_blue.png) scroll no-repeat 0 50%;
  background-image: url(./twitter_newbird_blue.png),
                    -webkit-gradient(linear, left top, left bottom,
                                     from(#FFF), to(#DDD));
  background-image: url(./twitter_newbird_blue.png),
                    -moz-linear-gradient(270deg, #FFF, #DDD);
  background-image: url(./twitter_newbird_blue.png),
                    -o-linear-gradient(270deg, #FFF, #DDD);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 50%, 0 0;
  font-weight: bold;
}
#tweet_button a:hover .text {
  border-color: #BBB;
  background-image: url(./twitter_newbird_blue.png),
                    -webkit-gradient(linear, left top, left bottom,
                                     from(#F8F8F8), to(#D8D8D8));
  background-image: url(./twitter_newbird_blue.png),
                    -moz-linear-gradient(270deg, #F8F8F8, #D8D8D8);
  background-image: url(./twitter_newbird_blue.png),
                    -o-linear-gradient(270deg, #F8F8F8, #D8D8D8);
}
#tweet_button .count {
  position: relative;
  background-color: #FFF;
}
#tweet_button a:hover .count{
  text-decoration: underline;
}
#tweet_button .count:before,
#tweet_button .count:after {
  position: absolute;
  top: 6px;
  left: -3px;
  z-index: 3;
  border-style: solid;
  border-color: transparent #FFF;
  border-width: 3px 3px 3px 0;
  content: "";
}
#tweet_button .count:after {
  z-index: 2;
  top: 5px;
  left: -4px;
  border-width: 4px 4px 4px 0;
  border-color: transparent #CCC;
}

#fblike_button span {
  height: 18px;
  line-height: 18px;
  padding: 0 8px 0 21px;
  border: 1px solid #CAD4E7;
  border-radius: 3px;
  background-color: #ECEEF5;
  background: #ECEEF5 url(./f_logo.png) scroll no-repeat 5px 50%;
  color: #3B5998;
  font-size: 10px;
}
#fblike_button a:hover span{
  border-color: #9DACCE;
}

(function($) {
  $(function() {

    function hatebuCount(url) {
      $.getJSON(
        'http://api.b.st-hatena.com/entry.count?callback=?',
        {url: url},
        function(data) {
          $('#hatebu_button .count').html(data);
        }
      );
    }
    function tweetCount(url) {
      var text, tw_url;
      $.getJSON(
        'http://urls.api.twitter.com/1/urls/count.json?callback=?',
        {url: url},
        function(data) {
          $('#tweet_button .count').html(data.count);
        }
      );
    }

    hatebuCount(location.href);
    tweetCount(location.href);

  });
})(jQuery);

で、できたのがこんな感じ (Safari 5.1.3):

見た目はそれなりに似せられたと思いますが、いいね ボタンの動作がダサい……。もっといい方法ないのかしら。