jQueryを利用したソーシャルサービスボタン生成プラグイン

TwitterやFacebookを初めとして各種ソーシャルサービス（SNS）が公式でコンテンツをシェアする手段を公開しています。自分のブログにこれらのシェアボタンを利用している人は多いと思いますが、TwitterやFacebookなどは公式のソースを利用するとボタン画像が公式のものになってしまいます。今回はオリジナルシェアボタン画像を使いたい場合に利用出来るスクリプトをjQueryのプラグインとして用意しました。

対応SNS/SBS：Twitter, Facebook, はてなブックマーク, Yahoo!ブックマーク, Googleブックマーク, Livedoorブックマーク, Del.icio.us, Evernote

また、ブログの場合は大体がURLやtitleはそれぞれテンプレートタグが用意されていると思います。（例：MTならばmt:EntryPermalink / mt:EntryTitle）今回は静的ページでも利用出来るようにJavascriptのdocument.URL、document.titleでURLとtitleを取得しています。

追記 2011.06.07

Twitterの試用変更のため以前配布していたものではツイート機能が無効になっていました。修正しましたのでもし利用されている方がいましたら再度ダウンロードしてご利用ください。

HTMLはul/liで各SNSのボタン画像をマークアップし、ulに対してidをつけます。不要なボタンは<li>〜</li>を削除してください。

  • code
  • source
  1. <ul id="share">

  2. <li id="twitter"><img src="common/img/btn_twitter.png" width="25" height="25" alt="Twetter" /></li>

  3. <li id="facebook"><img src="common/img/btn_facebook.png" width="25" height="25" alt="Facebook" /></li>

  4. <li id="hatena"><img src="common/img/btn_hatena.png" width="25" height="25" alt="Hatena" /></li>

  5. <li id="yahoo"><img src="common/img/btn_yahoo.png" width="25" height="25" alt="Yahoo Bookmark" /></li>

  6. <li id="google"><img src="common/img/btn_google.png" width="25" height="25" alt="Google Bookmark" /></li>

  7. <li id="livedoor"><img src="common/img/btn_livedoor.png" width="25" height="25" alt="Livedoor Bookmark" /></li>

  8. <li id="delicious"><img src="common/img/btn_delicious.png" width="25" height="25" alt="delicious" /></li>

  9. <li id="evernote"><img src="common/img/btn_evernote.png" width="25" height="25" alt="Evernote" /></li>

  10. </ul>

<ul id="share">
<li id="twitter"><img src="common/img/btn_twitter.png" width="25" height="25" alt="Twetter" /></li>
<li id="facebook"><img src="common/img/btn_facebook.png" width="25" height="25" alt="Facebook" /></li>
<li id="hatena"><img src="common/img/btn_hatena.png" width="25" height="25" alt="Hatena" /></li>
<li id="yahoo"><img src="common/img/btn_yahoo.png" width="25" height="25" alt="Yahoo Bookmark" /></li>
<li id="google"><img src="common/img/btn_google.png" width="25" height="25" alt="Google Bookmark" /></li>
<li id="livedoor"><img src="common/img/btn_livedoor.png" width="25" height="25" alt="Livedoor Bookmark" /></li>
<li id="delicious"><img src="common/img/btn_delicious.png" width="25" height="25" alt="delicious" /></li>
<li id="evernote"><img src="common/img/btn_evernote.png" width="25" height="25" alt="Evernote" /></li>
</ul>

idに対して次のようにプラグインを呼び出します。

  • code
  • source
  1. $(function() {

  2. 	$('ul#share').share();

  3. });

$(function() {
	$('ul#share').share();
});

liに対してidが付いていますが、オプションを指定することにより独自のidに変更出来ます。Evernoteはサジェストタグを指定出来るので、カンマ区切りで3つまで指定することが出来ます。

  • code
  • source
  1. $(function() {

  2. 	$('ul#share').share({

  3. 		twitter: '#twitter',

  4. 		facebook: '#facebook',

  5. 		hatena: '#hatena',

  6. 		hLayout: 'simple',

  7. 		yahoo: '#yahoo',

  8. 		google: '#google',

  9. 		livedoor: '#livedoor',

  10. 		charset: 'utf-8',

  11. 		delicious: '#delicious',

  12. 		evernote: '#evernote',

  13. 		clipID: '#screen',

  14. 		suggestTags: 'tag1,tag2,tag3'

  15. 	});

  16. });

$(function() {
	$('ul#share').share({
		twitter: '#twitter',
		facebook: '#facebook',
		hatena: '#hatena',
		hLayout: 'simple',
		yahoo: '#yahoo',
		google: '#google',
		livedoor: '#livedoor',
		charset: 'utf-8',
		delicious: '#delicious',
		evernote: '#evernote',
		clipID: '#screen',
		suggestTags: 'tag1,tag2,tag3'
	});
});

View Demo

zipでダウンロード出来るようにしました。利用はご自由にどうぞ。

Download