これは、del.icio.us、Evernote、Facebook いいね!ボタン、Google +1ボタン、はてなブックマーク、livedoor クリップ、mixi チェック、Twitter、Yahoo! ブックマークを表示できるjQueryプラグインのサンプルコンテンツです。

jQuery 1.5・IE8 / IE7(Windows 7)・Safari / Firefox 4.0 / Firefox 3.6 / Chrome 10(Mac)で動作確認しています。
IE6で不具合があっても、対応する予定はありません。あらかじめご了承ください。

更新履歴

2011.11.08
deliciousのアイコン画像のパスを修正しました。あわせて、画像のサイズを指定できるように変更しました。
2011.07.02
Google +1のカウンター表示に関する不具合を修正しました。
2011.06.30
jQuery SocialMediaBtns プラグイン ver 1.01を公開。
Google +1に対応しました。
2011.04.22
jQuery SocialMediaBtns プラグイン ver 1.00を公開。

サンプル1

$('#btns').SocialMediaBtns({
	mixi_dev_key: 'mixi Developer Centerで取得した識別キー'
});
			

mixiチェックを表示する場合は、mixi Developer Centerで識別キーを取得する必要があります。

サンプル2(ボタンの並び替え・右揃え)

$('#btns').SocialMediaBtns({
	mixi_dev_key: 'mixi Developer Centerで取得した識別キー',
	btn_set: 'delicious, fb, livedoor, hatena, tw, mixi_check, evernote, yahoo',
	align: 'right',
	twitter: { count: 'horizonal' }
});
			

サンプル3(縦型ボタンのみ)

$('#btns').SocialMediaBtns({
	url: 'http://google.co.jp/',
	title: 'ググるところです。',
	btn_set: 'evernote, hatena, fb, tw',
	evernote: {
		type: 'type_c',
		content_id: 'header'
	},
	hatena: { layout: 'vertical' },
	facebook: {
		layout: 'box_count',
		width: '72'
	},
	twitter: {
		count: 'vertical',
		via: 'BUN'
	}
});
			

初期化オプションについて(グレーの枠内は初期値です)

margin_h:
アイコン画像のマージン値(単位:ピクセル)を指定します。
デフォルトでは右マージンですが、align: 'right'を併記してある場合、左マージンとなります。
margin_h: 5
margin_v:
小さいアイコン画像を垂直方向中央に揃えるためのマージン値(単位:ピクセル)を指定します。
とは言え、現在は実装していません。
margin_v: 2
url:
ツイート本文やブックマーク対象となるURLを指定します。
指定がない場合は、表示中のページのlocation.hrefを取得します。
エスケープやURLエンコーディングは、プラグイン側で行います。
url: null
title:
ツイート本文やブックマーク対象となる文字列を指定します。
指定がない場合は、表示中のページのdocument.titleを取得します。
エスケープやURLエンコーディングは、プラグイン側で行います。
title: null
btn_set:
表示するボタンの種類とソート順を指定します。
現時点で対応しているのは、以下9つのサービスです。
  • del.icio.us(delicious)
  • Evernote(evernote)
  • Facebook いいね!ボタン(fb)
  • Google +1 ボタン(gp1)
  • はてなブックマーク(hatena)
  • livedoor クリップ(liveboor)
  • mixi チェック(mixi_check)
  • Twitter(tw)
  • Yahoo! ブックマーク(yahoo)
btn_set: 'yahoo, livedoor, delicious, evernote, hatena, mixi_check, tw, fb, gp1'
align:
ボタン全体の行揃えを指定します。
align: 'right'を指定すると、右揃えにできます。
親要素のスタイル属性にtext-alignプロパティを追加するだけですので、
適用されているCSSによって意図した表示にならないかも。。。
align: 'left'
twitter:
count:
ボタンの形状を指定します。
  • 垂直方向にカウント数を表示(vertical)
  • 水平方向にカウント数を表示(horizonal)
  • カウント数の表示なし(none)
lang:
言語を指定します。デフォルトでは、ja(日本語)になっています。
via:
投稿画面へおすすめユーザーを表示したい場合に、Twitter アカウント名を指定します。
text:
投稿画面の本文を変更する場合は、ここで指定してください
参考URL:http://twitter.com/goodies/tweetbutton
twitter: {
	count: 'none',
	lang: 'ja',
	via: null,
	text: null
}
facebook:
layout:
レイアウトスタイルを指定します。
  • 標準(standard)
  • ボタンおよびカウント数(button_count)
  • ボタンおよびカウント数(垂直方向)(box_count)
show_face:
アイコン画像の表示をブーリアン( true | false )で指定します。
colorscheme:
ボタンのカラースキーマを light | dark のいずれかで指定します。
width:
iframe要素の幅を数値(単位:ピクセル)指定します。
height:
iframe要素の高さを数値(単位:ピクセル)指定します。
参考URL:http://developers.facebook.com/docs/reference/plugins/like/
facebook: {
	layout: 'button_count',
	show_face: true,
	colorscheme: 'light',
	width: 120,
	height: 21
}
hatena:
layout:
ボタンのタイプを指定します。
  • スタンダード(standard)
  • バーティカル(vertical)
  • シンプル(simple)
参考URL:http://b.hatena.ne.jp/guide/bbutton
hatena: {
	layout: 'simple'
}
yahoo:
type:
ボタンのタイプを type_a 〜 type_d のいずれかで指定します。
参考URL:http://bookmarks.yahoo.co.jp/settings/tools/savelink
yahoo: {
	type: 'type_d'
}
livedoor:
type:
アイコン画像のタイプを type_a 〜 type_d のいずれかで指定します。
参考URL:http://clip.livedoor.com/guide/blog.html
livedoor: {
	type: 'type_a'
}
delicious:
img_w:
アイコン画像の幅を数値(単位:ピクセル)指定します。元画像は幅10pxですが、他のアイコンと揃える目的からデフォルト値を16pxにしてあります。
img_h:
アイコン画像の高さを数値(単位:ピクセル)指定します。元画像は高さ10pxですが、他のアイコンと揃える目的からデフォルト値を16pxにしてあります。
参考URL:https://delicious.com/help/savebuttons
delicious: {
	img_w: 16,
	img_h: 16
}
evernote:
type:
アイコン画像のタイプを type_a 〜 type_g のいずれかで指定します。
content_id:
必要にあわせて、Evernoteにクリップしたいコンテンツを含む親要素のid名を指定します。
参考URL:http://www.evernote.com/about/developer/sitememory/#a_builder
evernote: {
	type: 'type_g',
	content_id: null
}
mixi_dev_key:
mixi チェックキーを指定します。
あらかじめ、mixi Developer Centerのmixi Pluginでサービス登録を行ない、識別キーを取得してください。
mixi_dev_key: null
mixi_check:
type:
mixiチェックのアイコン画像を buttun-1 〜 button-5 で指定します。
選択可能な画像タイプは、mixi Developer Centerのmixiチェック 技術仕様を確認してください。
mixi_check: { type: 'button-1' }
google_plus1:
lang:
言語を指定します。デフォルトでは、ja(日本語)になっています。
parsettags:
ボタン表示のタイミングを( onload | explicit )で指定します。デフォルトでは、 onload になっています。
callback:
クリック後に呼び出されるコールバック関数を指定します。
count:
カウンターの表示を( true | false )で指定します。
size:
アイコン画像のサイズを指定します。
  • 小(small)
  • 中(medium)
  • 標準(standard)
  • 大(tall)
参考URL:http://code.google.com/intl/ja/apis/+1button/
google_plus1: {
	lang: 'ja',
	parsetags: null,
	callback: null,
	count: 'true',
	href: null,
	size: 'medium'
}

謝辞

このプラグインを作るにあたって、下記サイトを参考にさせていただきました。
ありがとうございます。

備考

お気づきの点やご意見・ご要望などありましたら、@BUNまたはdreamseekerまで、ご連絡ください。