これは、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' }
謝辞
このプラグインを作るにあたって、下記サイトを参考にさせていただきました。
ありがとうございます。
- Social Media Buttons
http://cielquis.net/smb/ - ソーシャルメディアに共有するボタンの設置方法(Twitter、facebook、mixi、GREE、Evernote) [C!]
http://creazy.net/2010/09/howto_setup_social_media_button.html
備考
お気づきの点やご意見・ご要望などありましたら、@BUNまたはdreamseekerまで、ご連絡ください。