ソーシャルブックマークボタン

使い回しのきくソーシャルブックマークボタン

今さらかもしれませんが、ソーシャルブックマークボタンを作ってみました。

このソーシャルブックマークボタンの良いところは「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 + "&amp;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 + "&amp;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 + "&amp;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 + "&amp;title=" + title + " target='_blank' rel='nofollow'><img src='" + b_images + "ico_nifty.gif' alt='ニフティクリップに追加' title='ニフティクリップに追加'></a></li><li><a href=" + b_google + enc_url + "&amp;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 + "&amp;u=" + enc_url + "&amp;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>・・・・・・



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です