いまやFacebook、Twitter、mixiなどSNSへの投稿ボタンをサイトに設置するのが当たり前になっていますね。投稿ボタンは各サービス側で用意されていて設置も簡単ですが、時にはそのデザインがサイトのイメージに合わないことも。実際、オリジナルボタンでお願いされるケースもあるのでこの際まとめてみました。
投稿ボタンのカスタマイズはすでに他のサイトでも紹介されていますが、作業する度に調べるのも面倒なので、自分へのメモも兼ねて紹介します。なお、ここで紹介する方法は、どのボタンもクリックで別窓が開く仕様になっています。また「俺にカウントなんて必要ないぜ」というワイルドな方にピッタリです（笑）
投稿ボタンの設置
言わずと知れたFaceook。「いいね！」と「シェア」の2種類あります。「シェア」は「いいね」にいずれ統合されるという話がありましたが、まだまだ使えるようです。
「いいね！」ボタンのソース
<a class="fb-like" href="http://www.facebook.com/plugins/like.php?href=【ページのURL】" onclick="javascript:window.open('http://www.facebook.com/plugins/like.php?href=【ページのURL】' ,null ,'width=650 ,height=450'); return false;" rel="nofollow">【ボタン画像】</a>「シェア」ボタンのソース
<a href="http://www.facebook.com/share.php?u=【ページのURL】" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">
【ボタン画像】</a>こちらも同じく言わずと知れたサービスですね。
<a href="http://twitter.com/share?count=horizontal&original_referer=【ページのURL】&text=【ページのタイトル、抜粋など】&url=【ページのURL】&via=hibi_teshigoto" onclick="window.open(this.href, 'tweetwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">【ボタン画像】</a>Google+
自分は登録したもののあまり利用してません(^^); でも利用している人は多いんでしょうね。
<a href="https://plus.google.com/share?url=【ページのURL】" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">【ボタン画像】</a>mixi
国産のSNSサイト。Facebookにかなり押されてますが。
ちなみにmixiチェックを利用するにはmixi developer centerでディベロッパー登録をし、チェックキーを発行してもらう必要があります。ここで設置に関する情報もチェックできます。
<a href="javascript:void(0);" onclick="window.open('http://mixi.jp/share.pl?u=【ページのURL】&k=【チェックキー】','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));">【ボタン画像】</a>はてなブックマーク
日本ではソーシャルブックマークの草分け的存在。
<a href="http://b.hatena.ne.jp/entry/【ページのURL】" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加">【ボタン画像】</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>Pinterestは気に入った画像をどんどん貼付けて共有できるサービス。Facebookの次に来ると言われているようです。前は日本語に対応していなかったのですが、今は対応しています。
<a href="http://pinterest.com/pin/create/button/?url=【ページのURL】&media=【共有してほしい画像のURL】&description=【ページのタイトルまたは説明】" onclick="window.open(this.href, 'PINwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;">【ボタン画像】</a>Evernote
現在、サイトメモリーは廃止されているため利用できません。
Evernoteは、ふとひらめいたアイデアやメモなどを記録、管理できるオンラインサービスです。私も結構利用してます。Evernoteの場合、ボタンの機能は「サイトメモリー」と言って、クリックすると気になるページをクリップできます。
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'【サイト名】',url:'【ページのURL】'}); return false;">【ボタン画像】</a>以上、主なものを中心に紹介しましたが、オリジナルのボタンもフリーで数多く配布されています。数は少なめですが、Illustratorで扱えるベクターデータのアイコンを別の記事でまとめてみました。参考にどうぞ。
