今さらかもしれませんが、ソーシャルブックマークボタンを作ってみました。
このソーシャルブックマークボタンの良いところは「encodeURIComponent(document.title)」でベージタイトルを取得するのでページ毎にベタでタイトルを埋め込む必要がないことです。
ソーシャルブックマーク
■css
#bookmark { display: inline-block; padding: 2px 5px 5px 5px; _padding: 5px; _width: 124px; border: solid 1px #ccc; } *:first-child+html #bookmark { padding: 5px; width: 120px; } #bookmark li { float: left; margin: 0 3px; list-style: none; } #bookmark li img { border: none; vertical-align: middle; }
■javascript
$(function() { var enc_url = encodeURIComponent(location.href); var url = location.href; var title = encodeURIComponent(document.title); var b_hatena = "http://b.hatena.ne.jp/append?"; var b_facebook = "http://www.facebook.com/sharer.php?u="; var b_twitter = "http://twitter.com/home/?status="; var b_buzz = "http://buzzurl.jp/entry/"; var b_fc2 = "http://bookmark.fc2.com/user/post?url="; var b_livedoor = "http://clip.livedoor.com/clip/add?link="; var b_nifty = "http://clip.nifty.com/create?url="; var b_google = "http://www.google.com/bookmarks/mark?op=edit&bkmk="; var b_yahoo = "http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t="; var b_images = "http://www.finefinefine.jp/wp3/sample/images/" $("#bookmark").append("<li><a href=" + b_hatena + url + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_hatena.gif' alt='はてなブックマークに登録' title='はてなブックマークに登録'></a></li><li><a href=" + b_facebook + enc_url + "&t=" + title + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_facebook.gif' alt='Facebookでシェア' title='Facebookでシェア'></a></li><li><a href=" + b_twitter + title + "%20|%20" + enc_url + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_twitter.gif' alt='Twitterでつぶやく' title='Twitterでつぶやく'></a></li><li><a href=" + b_buzz + url + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_buzzurl.gif' alt='Buzzurlに登録' title='Buzzurlに登録'></a></li><li><a href=" + b_fc2 + enc_url + "&title=" + title + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_fc2.gif' alt='FC2に登録' title='FC2に登録'></a></li><li><a href=" + b_livedoor + enc_url + "&title=" + title + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_livedoor.gif' alt='Livedoorクリップに追加' title='Livedoorクリップに追加'></a></li><li><a href=" + b_nifty + enc_url + "&title=" + title + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_nifty.gif' alt='ニフティクリップに追加' title='ニフティクリップに追加'></a></li><li><a href=" + b_google + enc_url + "&title=" + title + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_google.gif' alt='Google Bookmarksに登録' title='Google Bookmarksに登録'></a></li><li><a href=" + b_yahoo + title + "&u=" + enc_url + "&ei=UTF-8' target='_blank' rel='nofollow'><img src='" + b_images + "ico_yahoo.gif' alt='Yahoo!ブックマークに登録' title='Yahoo!ブックマークに登録'></a></li>"); });
解説
↓encodeURIComponent(location.href)で表示ページのURLを取得し更に、UTF-8でエンコードしています。エンコードすることでサーバーに想定外のパラメータを渡さないようにします。
var enc_url = encodeURIComponent(location.href);
↓「var url = location.href;」は、はてなブックマーク用です。「location.href」でそのままURLを取得します。encodeURIComponent(document.title)はページのタイトル
var url = location.href; var title = encodeURIComponent(document.title);
↓各ソーシャルブックマークでURLが固定の箇所を変数に入れていきます。
var b_hatena = "http://b.hatena.ne.jp/append?"; var b_facebook = "http://www.facebook.com/sharer.php?u="; ・ ・ ・
↓こちらはボタンアイコンのパスを変数に格納しています。
var b_images = "http://www.finefinefine.jp/wp3/sample/images/"
↓id名「bookmark」を持つ要素にappendでhtmlソースを追加します。
$("#bookmark").append(" ");
↓後は上記の変数を使ってappendでhtmlを成形するだけです。
<li><a href=" + b_hatena + url + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_hatena.gif' alt='はてなブックマークに登録' title='はてなブックマークに登録'></a></li>・・・・・・