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 サイトメモリー
・はてなブックマーク
・新はてなブックマーク

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

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

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

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

その２：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: サービスに渡すオプション（オブジェクト）

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

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

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

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

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

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

更新履歴

• v1.9.1 jQuery1.9以降でGoogle+ボタンが表示されなくなる件に対応（$.browser.msieおよび$.browser.versionでの判定を$.support.tbodyに変更）
• v1.9.0 Pinterest の Pin It ボタンに対応(ただただしさん、ありがとうございます。)。ひっそりとmin版も作っています。
• 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