ソーシャルブックマークのつけかた

最近外部への波及効果や、被リンクなどセオ対策としても、
ソーシャルブックマークを設置しているサイトが多いよう。

いろんなソーシャルボタンが出来て、
一個一個対応するのが大変ですが

今回は、簡単にサイトに設置できるソーシャルブックマークの作り方をメモしたいと思います。



オススメポイント

●JavaScriptを使って、URLなどソースを書き換えなくても汎用的に使えます
●URLに変なパラメーターが入っていても、パラメーターを抜いたURLのみをリンクにしてくれます


注意点

アイコンの画像は任意のフォルダに入れて保存してください。





■twitter

<a href="javascript: var f='http://twitter.com/home/?status=RT @●UserName● '+encodeURIComponent(document.title)+' '+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname); if(!window.open(f,'surfing'))location.href=f; void(0);"><img src="image/twitter.gif" alt="この記事についてつぶやく" title="この記事についてつぶやく"></a>

※UserNameの部分を変更して下さい


■facebook

<a href="javascript:void window.open('http://www.facebook.com/share.php?u='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&t='+encodeURIComponent(document.title), '_blank');"><img src="image/facebook.gif" alt="facebook追加" title="facebookに追加"/></a>

■myspace

<a href="javascript:void(window.open('http://www.myspace.com/Modules/PostTo/Pages/?u='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname),'ptm','height=450,width=550').focus())">
<img src="image/myspace.gif" alt="Share on Myspace" title="Share on Myspace" border="0" /></a>

■gree

<a href="javascript:void window.open('http://gree.jp/?mode=share&act=write&url='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&button_type=0&button_size=20');"><img src="image/gree.gif" alt="greeに追加" title="greeに追加"/></a>

■mixi

<a href="javascript:void(0);" onClick="window.open('http://mixi.jp/share.pl?u='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&k=●認証キー●','share',['width=632','height=456','location=yes','resizable=yes','toolbar=no','menubar=no','scrollbars=no','status=no'].join(','));"><img src="image/mixi.gif" alt="mixiチェック" title="mixiチェック"></a>

※mixiにデベロッパー登録をして、認証キーを取得してください。


■はてなブックマーク

<a href="javascript:location.href='http://b.hatena.ne.jp/add?mode=confirm&ei=UTF-8&url='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&title='+encodeURIComponent(document.title)"><img src="image/hatena.gif" alt="はてなブックマークに登録" align="absmiddle" border="0" title="このエントリーをはてなブックマークに追加" class="mat3"/></a>

■Livedoor

<a href="javascript:void(0)" onClick="window.open('http://clip.livedoor.com/clip/add?link='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&jump=myclip','view')"><img src="image/livedoor.gif" alt="Livedoorクリップに登録" title="この記事をLivedoorクリップに追加" align="absmiddle" border="0" class="left" /></a>

yahoo　ブックマーク

<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&opener=bm&ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0);"><img src="image/yahoo.gif" alt="Yahoo!ブックマークに登録" title="この記事をYahoo!ブックマークに追加" width="16" height="16" align="absmiddle" border="0" class="left" /></a>

■google　ブックマーク

<a href="javascript:void(0)" onClick="window.open('http://www.google.com/bookmarks/mark?op=edit&bkmk='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname)+'&title='+encodeURIComponent(document.title),'view')"><img src="image/google.gif" width="16" height="16" align="absmiddle" title="Google Bookmarks に追加" alt="Google Bookmarks に追加" class="left" /></a>

■バザール　ブックマーク

<a href="javascript:void(0)" onClick="window.open('http://buzzurl.jp/config/add/confirm?url='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname),'view')"><img src="image/bzl.gif" width="20" height="15" align="absmiddle" title="Buzzurl[バザール]に追加" alt="Buzzurl[バザール]に追加" class="left" /></a>

■del.icio.us　ブックマーク

<a href="javascript:void(0)" onClick="window.open('http://del.icio.us/1?url='+encodeURIComponent(window.location.protocol+'//'+location.host+location.pathname),'view')"><img src="image/dli.gif" width="16" height="16" align="absmiddle" alt="Del.icio.usに追加" title="Del.icio.usに追加" class="left" /></a>

変なスペースとかが空いていると、文字化けしてしまいました。
一度ソーシャルブックマークをつけたらテストしてみるといいと思います。

何か間違っているところや不具合等があったら教えてください。
宜しくお願いします。