今さらかもしれませんが、ソーシャルブックマークボタンを作ってみました。
このソーシャルブックマークボタンの良いところは「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>・・・・・・