ソーシャルブックマークボタンをテキストリンク+CSSで表示する

用意されているボタンだと、どうしても表現に限界があります。
font-awesome+bootstrapを組み込んでいるサイトであればリンクにbtnクラスで簡単なボタンリンクが作成できるため、これを利用してオリジナルのソーシャルブックマークボタンを配置する方法です。

普通にテキストリンクですので、テキストを画像にすれば完全オリジナルのボタンを配置することもできます。

HTML（Facebook、Twitter、はてなブックマークボタンを表示しています）

<div class="fb-share-botton"><a onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" class="btn btn-facebook btn-small"><i class="icon-facebook mr5"></i>いいね！</a></div>
<div class="tw-share-botton"><a onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;" href="http://twitter.com/share?count=horizontal&amp;original_referer=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>" class="btn btn-twitter btn-small"><i class="icon-twitter mr5"></i>ツイート</a></div>
<div class="hatebu-share-botton"><a class="hatena-bookmark-button btn btn-hatena btn-small" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-layout="simple"><i class="icon-hatena mr5"></i>ブックマーク
</a><script charset="utf-8" type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" async="async"></script></div>

はてなブックマークのアイコンcssは「Font Awesome などアイコンフォントにないはてなブックマークを自力で追加する簡単な方法」を参考にさせていただきました。

.icon-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold
}

参考：記事下のシェアボタンをカスタマイズしましたっ！（facebook、twitter、はてブ）