2011年04月30日 03:45
引き続きv1.7.2を検証していた際、IE6~IE8でメモリがうまく開放されないケースがあったため、
対策版としてv1.7.3をリリースしました。 ご迷惑をおかけしますが、最新版へのアップデートをお願いします。
2011年04月30日 00:15
jQuery.socialbuttonのXSS脆弱性につきまして、対応版のv1.7.2をリリースしました。
v1.7.2以前のバージョンでは、urlオプションを指定せずに以下のボタンを呼び出した際、無害化されていない
document.URLを参照することが原因で、XSS脆弱性が発生します。
  • mixi いいね
  • facebook いいね
  • GREE いいね
  • 新はてなブックマーク
  • 旧はてなブックマーク
ご迷惑をおかけしますが、最新版へのアップデートをお願いします。
2011年04月29日 02:40
現在、jQuery.socialbuttonの最新版(v1.7.1)を含むすべてのバージョンにおいて、XSS脆弱性が存在します。
http://subtech.g.hatena.ne.jp/mala/20110413/1302674294
現在修正作業を行っており、本日中に対応済みのv1.7.2を公開予定となっています。今しばらくお待ちください。

Pinterest/Google+1/Twitter/facebookいいね!/facebook Share/mixiチェック/mixiイイネ!/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ

各種ソーシャルネットワーキングサイトの「いいね!」ボタンを、超カンタンに導入できるjQueryプラグインを作成したので、ここに公開します。現在対応しているのは以下のサービスです。

・Pinterest ボタン ★NEW★ 2012/05/21 update
・Google+1 ボタン ※IE系はIE8以降のみ対応
・mixiイイネ!ボタン
・mixiチェックボタン
・facebookいいねボタン
・facebook Shareボタン
・Twitterつぶやくボタン
・GREE いいねボタン
・Evernote サイトメモリー
・はてなブックマーク
・新はてなブックマーク

あまり各社の仕様を意識せずに書けるようにしておいたので、たくさんの人に使っていただけるとうれしいです。

その1:jQueryとプラグインをダウンロード

jQuery本体は本家から、jquery.socialbuttonプラグインはこちらからダウンロードしてご利用ください。min版はこちらにあります。
直リンクして客先納品している方がチラホラいらっしゃいますが、後でクレーム来ても知りませんよ。。。

以前は plugins.jquery.com でマニュアルを公開していましたが、サイトが落ちてしまっているので、マニュアルはこちらのアーカイブ(v1.7.1時点のもの、少し時間がかかります)を参照ください。
optionsに指定可能なオプション一覧は、プラグインファイルの上部コメントに最新版がまとめてあります。

その2:jQueryとプラグインを読み込む

headタグ内に記述しましょう
<script src="js/jquery-1.x.x.min.js" type="text/javascript"></script>
<script src="js/jquery.socialbutton-x.x.x.js" type="text/javascript"></script>

その3:空のdivタグを用意する

ボタンを設置したい場所に、空のdivタグを配置します。
<div class="tweet"></div>

その4:呼び出す

インターフェース

<script>
$(function() {
    $('.tweet').socialbutton(service[, options]);
});
</script>
service: サービス名(文字列)
options: サービスに渡すオプション(オブジェクト)

呼び出し方 その1

第1引数だけ指定して呼び出す。
<script>
$(function() {
    $('.tweet').socialbutton('twitter');
});
</script>

呼び出し方 その2

第2引数にオプションを指定して呼び出す。
<script>
$(function() {
    $('.tweet').socialbutton('twitter', {
        button: 'horizontal',
        text: 'ツイートに含むテキスト'
    });
});
</script>

サンプル

Pinterest(service: pinterest) ★NEW★ 2012/05/21 update

<script>
$(function() {
    $('.pinterest').socialbutton('pinterest', {
        media: 'http://www.example.com/path/to/your-image.gif'
    });
});
</script>
※mediaはひょっとしたら必須かも。。。

Google+1(service: google_plusone)

<script>
$(function() {
    $('.google_plusone').socialbutton('google_plusone');
});
</script>
※IE系はIE8以降のみ対応。IE6、IE7では正しく表示できないっぽいので、現在明示的に無効にしています

mixiイイネ! (service: mixi_like)

<script>
$(function() {
    $('.mixi_like').socialbutton('mixi_like', {
        key: '[登録キー]'
    });
});
</script>
※mixiチェックとmixiイイネ!の場合だけ、optionsは必須となります。必ずkeyで登録キーを指定してくだしあ。

mixiチェック (service: mixi_check)

<script>
$(function() {
    $('.mixi_check').socialbutton('mixi_check', {
        key: '[登録キー]'
    });
});
</script>
※mixiチェックとmixiイイネ!の場合だけ、optionsは必須となります。必ずkeyで登録キーを指定してくだしあ。

facebookいいね (service: facebook_like)

<script>
$(function() {
    $('.facebook_like').socialbutton('facebook_like');
});
</script>

facebook Share (service: facebook_share)

<script>
$(function() {
    $('.facebook_share').socialbutton('facebook_share');
});
</script>

Twitter (service: twitter)

<script>
$(function() {
    $('.tweet').socialbutton('twitter');
});
</script>

GREEいいね (service: gree_sf)

<script>
$(function() {
    $('.gree_sf').socialbutton('gree_sf');
});
</script>
※gree_sf = GREE Social Feedback です

Evernoteサイトメモリー (service: evernote)

<script>
$(function() {
    $('.evernote').socialbutton('evernote');
});
</script>

新はてなブックマーク(service: hatena)

<script>
$(function() {
    $('.hatena').socialbutton('hatena');
});
</script>

旧はてなブックマーク(service: hatena_oldstyle)

<script>
$(function() {
    $('.hatena_oldstyle').socialbutton('hatena_oldstyle', {
        button: '/path/to/your-icon.gif'
    });
});
</script>
※v1.4.1 以前の service: 'hatena' と同等の機能です。まだ使いたい人がいるかもしれないので残しておきます。
※buttonオプションは指定しなくても動作しますが、「B!」アイコンが直リンクになるため、各自のサーバにコピーした上でお使いください。

横一列のサンプル その1(まあ無難)

横一列のサンプル その2(小さいのだけ)

横一列のサンプル その3(大きいのだけ)

Facebook いいね! を多言語化(localeオプション、v1.7.1以降)

※localeオプションは強制的に言語を指定したい場合だけ使えばよいです
※横幅のデフォルト値は日本語版に最適化しているので、多言語版を表示する際はwidthオプションも一緒に指定したほうがいいカモ

更新履歴

作った人→ @ishiiyoshinori

お気軽にフォローしてくれるとうれしいです。
アイトランスのトップページへ戻る | jQuery.socialbutton | jQuery.rupin