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

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

Posted at June 29,2012 12:33 AM
Tag:[jQuery, Plugin]

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

1.機能

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

ソーシャルボタン

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

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

以下、設置方法です。

2.プラグインのダウンロード・インストール

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

jQuery.socialbutton プラグイン
ダウンロード

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

3.プラグインの設定

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で登録キーを指定してください。

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

4.サービス別オプション一覧

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

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
});

5.サンプル

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

<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>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)