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

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

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

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

その１：jQueryとプラグインをダウンロード

jQuery本体は本家から、jquery.socialbuttonプラグインはこちらからダウンロードしてください。

2011/11/30 追記
現在、plugins.jquery.com 側の一時的な不具合（と思われますが、公式発表はされていません）の影響で、上記配布ページが消えているため、プラグイン本体はこちらからダウンロードをお願いします。
v1.7.1のものになりますが、マニュアルはこちらを参照ください。

その２：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>

その３：空のdivタグを用意する

ボタンを設置したい場所に、空のdivタグを配置します。

<div class="tweet"></div>

その４：呼び出す

インターフェース

<script>
$(function() {
    $('.tweet').socialbutton(service[, options]);
});
</script>

service: サービス名（文字列）
options: サービスに渡すオプション（オブジェクト）

※optionsに指定可能なオプション一覧は、配布ページとプラグインの上部コメントにまとめてあります。

呼び出し方その1

第1引数だけ指定して呼び出す。

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

呼び出し方その2

第2引数にオプションを指定して呼び出す。

<script>
$(function() {
    $('.tweet').socialbutton('twitter', {
        button: 'horizontal',
        text: 'ツイートに含むテキスト'
    });
});
</script>

サンプル

Google+1(service: google_plusone) ★NEW★ 2011/07/05 update

<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!」アイコンが直リンクになるため、各自のサーバにコピーした上でお使いください。

横一列のサンプル　その１（まあ無難）

横一列のサンプル　その２（小さいのだけ）

横一列のサンプル　その３(大きいのだけ）

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

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

更新履歴

v1.8.1 Google +1 ボタンを遅延ロードさせると、2つ目以降のボタンが表示されないバグを修正。
(@machuさん、ご指摘ありがとうございます。パッチと再現コード)
Google +1 ボタンのオプションに、sizeとhrefのsynonimとしてbuttonとurlを追加。（他ボタンに渡せるオプションとのI/F統一）
v1.8.0 Google +1 ボタンに対応（ただしIE系はIE8以降のみ対応。IE6、IE7では正しく表示できないっぽいので、現在明示的に無効にしています）
v1.7.3 IE6～IE8でメモリリークする場合があったのを修正
v1.7.2 XSS脆弱性を修正（urlオプションが指定されないで呼び出された時、document.URLをサニタイズしてから利用するよう修正）、使いどころが微妙だったencodedオプションを廃止、バグフィックス
v1.7.1 Facebook いいねでlocaleオプション（多言語用のロケール設定オプション）を追加
v1.7.0 Facebook Share に対応
v1.6.0 mixiイイネ！に対応
v1.5.0 みんな大好き 新はてなブックマークに対応
v1.4.1 バグフィックス、GREE Social Feedbackでwidthオプションを追加。指定しなければボタンサイズに合わせて自動調整します
v1.4 みんな大好き はてなブックマークに対応、バグフィックス
v1.3 Evernoteサイトメモリーに対応、encodedオプションを全サービスで追加
v1.2 バグフィックス、リファクタリング、Twitter呼び出しを（多分）高速化、サンプルコードをコメントに追加
v1.1 インターフェイス変更
v1.0 公開

作った人→ @ishiiyoshinori

お気軽にフォローしてくれるとうれしいです。

アイトランスのトップページへ戻る | jQuery.socialbutton | jQuery.rupin