ソーシャルボタンをオリジナル画像で設置するのでハマるの巻

もうね、ハマッた。なんか軽く考えすぎてた。
ぐーぐる先生の紹介で沢山見本を見たけど、なかなか気にいるスクリプトも無く。

というわけで自分用カンペ。

<ul class="clearfix">
    <li>
        <a href="http://www.facebook.com/share.php?u=【URL】" onclick="window.open(this.href, ‘facebookwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;">
        <img src="img/facebook.png" alt="このページをシェアする">
        </a>
    </li>
    <li>
        <a href="http://twitter.com/share?count=horizontal&amp;original_referer=【URL】&amp;text=【テストサイト】&amp;url=【URL】" onclick="window.open(this.href, ‘tweetwindow’, ‘width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1′); return false;">
        <img src="img/twitter.png" alt="ツイートする">
        </a>
    </li>
    <li>
        <a href="http://b.hatena.ne.jp/entry/【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="テスト" data-hatena-bookmark-layout="simple" title="このサイトをはてなブックマークに追加">
        <img src="img/hatena.png" alt="このエントリーをはてなブックマークに追加">
        </a>
    </li>
    <li>
        <a href="#" onclick="Evernote.doClip({providerName:'【テストサイト】',url:'【URL】'}); return false;">
        <img src="img/evernote.png" alt="Clip to Evernote">
        </a>
    </li>
</ul>
<!-- はてなとevernoteはJS読み込ませる -->
<script src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script src="http://static.evernote.com/noteit.js"></script>

で、cssはこんな感じで適当に。
グローバルナビゲーションのULの末端のLI内にULで記述してる構造なので、親要素にかかってるスタイルの関係で（ｒｙ

#sns{
	margin-left:20px;
	margin-top:13px;
	float:left;
	width:200px;
}
#sns img{
	width:32px;
	height:32px;
	border:none;
}
#sns li{
	margin-right: 10px;
	float:left;
}
#sns img:hover{  background-color: #000; }

FacebookはOGP対策を考えた方がいいのかな。
あと、JS二つも読み込ませるのもあり、結構重くなった印象もあるようなないような。
あとあと、facebookとTwitterはwindow.open()してるけど、ポップアップブロックしてたらかな、新しいタブで開く。

そんなとこ。