ソーシャルボタンを簡単に設置できる「jQuery.socialbuttonプラグイン」

ソーシャルボタンを簡単に設置できる「jQuery.socialbuttonプラグイン」を紹介します。

１．機能

このプラグインを利用すれば、スクリーンショットのようなソーシャルボタンを簡単に設置できるようになります（スクリーンショットのサンプルコードは５項に掲載しています）。

2012年6月現在でプラグインが対応しているサービスは以下です。

• Evernote
• facebook
• Google+1（IEは8以降のみ）
• GREE
• mixi
• Pinterest
• Twitter
• はてなブックマーク

以下、設置方法です。

２．プラグインのダウンロード・インストール

プラグイン配布サイトの「その１：jQueryとプラグインをダウンロード」からプラグインをダウンロードします。

jQuery.socialbutton プラグイン

ダウンロードしたプラグインをサーバにアップロードします。

３．プラグインの設定

HTMLマークアップは次のようになります。赤色部分は利用ユーザーで設定する部分です。ボタンを表示する部分の要素（ここではli要素）は内容を空にしておきます。

<script src="jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.socialbutton-x.x.x.js" type="text/javascript"></script>
<script>
$(function() {
    $('.service1_name').socialbutton(サービス名1[, オプション]);
    $('.service2_name').socialbutton(サービス名2[, オプション]);
});
</script>
<ul>
<li class="service_name1"></li>
<li class="service_name2"></li>
</ul>

「サービス名1」「サービス名2」などには、サービスによって次のいずれかの値を設定します。

• Evernote：'evernote'
• facebookいいね！：'facebook_like'
• facebookシェア：'facebook_share'
• Google+1：'google_plusone'
• GREE：'gree_sf'
• mixiイイネ！：'mixi_like'
• mixiチェック：'mixi_check'
• Pinterest：'pinterest'
• Twitter：'twitter'
• はてなブックマーク（新）：'hatena'
• はてなブックマーク（旧）：'hatena_oldstyle'

Twitterの場合は次のようになります。

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

オプションは必要に応じてJSON形式で設定します。例えば、Twitterのオプションでは次のように設定します。

<script>
$(function() {
    $('.twitter').socialbutton('twitter', {
        button: 'horizontal',
    });
);
});
</script>

mixiチェックとmixiイイネ！はオプションは必須です。keyで登録キーを指定してください。

設定可能なオプションの詳細は４項を参照してください。

４．サービス別オプション一覧

サービス別オプションの一覧を、プラグインのソースコードから引用しました。実際のオプションと比較して、必要なものを適宜設定してください。

Evernote

$('.evernote').socialbutton('evernote', {
    button: 'article-clipper',
    url: 'http://user-domain/',
    provider_name: 'user-domain',
    suggest_notebook: 'webclip',
    content_id: 'element-id-to-clip',
    code: 'your-affiliate-code',
    title: 'note-title',
    suggest_tags: 'comma-separated-tags,up-to-three-tags',
    styling: 'full'
});

facebookいいね！

$('.facebook_like').socialbutton('facebook_like', {
    button: 'standard', // synonym 'layout'
    url: 'http://user-domain',
    show_faces: true,
    width: 450,
    height: 80,
    action: 'like',
    locale: 'en_US',
    font: 'arial',
    colorscheme: 'light'
});

facebookシェア

$('.facebook_share').socialbutton('facebook_share', {
    button: 'button_count', // synonym 'type'
    url: 'http://user-domain',
    text: 'Share'
});

GREE

$('.gree_sf').socialbutton('gree_sf', {
    button: 0, // synonym 'type'
    url: 'http://user-domain/',
    width: 0, // auto
    height: 20
});

Google +1

$('.google_plusone').socialbutton('google_plusone', {
    button: 'standard', // synonym 'size'
    url: 'http://user-domain', // synonym 'href'
    lang: 'ja',
    parsetags: 'explicit',
    callback: 'some_callback_function',
    count: true
});

mixiチェック

$('.mixi_check').socialbutton('mixi_check', {
    key: 'mixi-check-key',
    button: 'button-1',
    url: 'http://user-domain/'
});

mixiイイネ

$('.mixi_like').socialbutton('mixi_like', {
    key: 'mixi-check-key',
    url: 'http://user-domain/',
    width: 450,
    height: 80,
    show_faces: true,
    style: 'additional-style-here'
});

Pintarest

$('.pinterest').socialbutton('pintarest', {
    button: 'horizontal', // or 'vertical', 'none'
    url: 'http://user-domain',
    media: 'http://user-domain/image.jpg',
    description: 'This is an image.'
});

Twitter

$('.twitter').socialbutton('twitter', {
    button: 'vertical', // synonym 'count'
    url: 'http://user-domain/',
    text: 'tweet text',
    lang: 'ja',
    via: 'ishiiyoshinori',
    related: 'twitter'
});

はてなブックマーク（新）

$('.hatena').socialbutton('hatena', {
    button: 'standard',
    url: 'http://user-domain/',
    title: 'page-title'
});

はてなブックマーク（旧）

$('.hatena').socialbutton('hatena_oldstyle', {
    button: '/path/to/your-icon.png',
    url: 'http://user-domain/',
    padding: 10,
    height: 15
});

５．サンプル

冒頭の画像のサンプルは次のとおりです。ご自由にお使いください。

<style>
#social {
    display: inline;
    list-style: none;
}
#social li {
    float: left;
    display: block;
    vertical-align: middle;
}
.hatena {
    padding-right: 10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.socialbutton-1.9.0.min.js"></script>
<script>
$(function() {
    $('.google_plusone').socialbutton('google_plusone');
    $('.tweet').socialbutton('twitter', { button: 'horizontal' });
    $('.evernote').socialbutton('evernote');
    $('.hatena').socialbutton('hatena');
    $('.facebook').socialbutton('facebook_like', { button: 'button_count' });
});
</script>
<ul id="social">
  <li class="hatena"></li>
  <li class="facebook"></li>
  <li class="tweet"></li>
  <li class="google_plusone"></li>
  <li class="evernote"></li>
</ul>