HOME
BLOG

はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルに表示する jQuery プラグイン

2014-03-25

Easy Social Buttons は、はてブ、Twitter、Facebook、Google+ のソーシャルボタンをシンプルなデザインで表示することのできる jQuery プラグインです。各サービスが提供しているソーシャルボタンより動作が軽いので投稿記事一覧画面などで大量にボタンを表示したいような場合に向いています。jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

変更履歴

v0.1.1
- IE7 以下で動作しない不具合を修正しました。

使い方

jQuery、Social Info、Easy Social Buttons（または jQuery Sitekit）の JS/CSS ファイルを読み込みます。

<link href="jquery.easy-social-buttons.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.social-info.js"></script>
<script src="jquery.easy-social-buttons.js"></script>

ソーシャルボタンを表示する場所を記述し

<div class="social-btn"></div>

easySocialButtons() メソッドを実行します。

$('div.social-btn').easySocialButtons();

表示してるページのソーシャルボタンが表示されます。

表示してるページのソーシャルボタンを表示する

Demo | 表示してるページのソーシャルボタンを表示する

指定した URL のソーシャルボタンを表示する

url パラメータを指定することで任意の url のソーシャルボタンを表示することができます。

$('div.social-btn').easySocialButtons({
    url : 'http://www.google.com'
});

指定した URL のソーシャルボタンを表示する

Demo | 指定した URL のソーシャルボタンを表示する

指定要素の URL 属性値のソーシャルボタンを表示する

href、data-href、data-url といった属性値を持つの要素に対し、easySocialButtons() メソッドを実行した場合、その属性値のソーシャルボタンを表示します。ソーシャルボタンの挿入先は、対象要素の後ろになります。

<ul class="links">
    <li>
        <a href="http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01">
        jQuery 関連記事まとめ - Cyokodog :: Diary</a>
    </li>
    <li>
        <span data-href="http://d.hatena.ne.jp/cyokodog/20090224/jQueryPosSet01">
        jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary</span>
    </li>
    <li>
        <span data-url="http://cyokodog.tumblr.com/post/38835740744/ie-version">
        IE のレンダリングバージョンの指定と判定方法の自分なりまとめ - CYOKOLOG</span>
    </li>
</ul>

$('ul.links li > *').easySocialButtons();

指定要素の URL 属性値のソーシャルボタンを表示する

Demo | 指定要素の URL 属性値のソーシャルボタンを表示する

ソーシャルボタンを任意の場所に表示する

ソーシャルボタンを任意の場所に表示するには、autoAdd パラメータを false にしソーシャルボタンの自動挿入を止め、callback パラメータで挿入処理を記述します。

以下のような記事一覧のマークアップにおいて、h4 要素の後ろにソーシャルボタンを表示しようとした場合、

<div class="article">
    <h4>
        <a href="http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01">
        jQuery 関連記事まとめ - Cyokodog :: Diary</a>
    </h4>
    <p>contents...</p>
</div>
<div class="article">
    <h4>
        <a href="http://d.hatena.ne.jp/cyokodog/20090224/jQueryPosSet01">
        jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary</a>
    </h4>
    <p>contents...</p>
</div>
<div class="article">
    <h4>
        <a href="http://cyokodog.tumblr.com/post/38835740744/ie-version">
        IE のレンダリングバージョンの指定と判定方法の自分なりまとめ - CYOKOLOG</a>
    </h4>
    <p>contents...</p>
</div>

以下のように記述します。

$('div.article h4 a').easySocialButtons({
    autoAdd:false,
    callback : function( api ){
        // a の親 h4 を取得し、その後ろにボタンを挿入
        $(this).parent().after(api.getButtons());
    }
});

ソーシャルボタンを任意の場所に表示する

Demo | ソーシャルボタンを任意の場所に表示する

ブランドカラーを使用せず単色で表示する

useBrandColor パラメータに false を指定すると単色（薄いグレイ）で表示されます。

$('ul.links a').easySocialButtons({
    useBrandColor : false
});

ブランドカラーを使用せず単色で表示する

Demo | ブランドカラーを使用せず単色で表示する（Light grey）

inverseColor パラメータに false を指定すると濃いグレイで表示されます。

$('ul.links a').easySocialButtons({
    useBrandColor : false,
    inverseColor: true
});

ブランドカラーを使用せず単色で表示する

Demo | ブランドカラーを使用せず単色で表示する（Dark grey）

一部のボタンを非表示にし、表示順を変更する

orders パラメータで、表示するボタンの種類、表示順を指定できます。以下例では、はてブを非表示にし、Facebook、Twitter、Google+ の順で表示してます。

$('ul.links a').easySocialButtons({
    orders : ['facebook', 'twitter', 'googleplus']
});

一部のボタンを非表示にし、表示順を変更する

Demo | 一部のボタンを非表示にし、表示順を変更する

デザインをカスタマイズする

template パラメータに以下ルールで、ボタンのマークアップを記述できます。

esb-label クラスを持つ要素には innerText にサービス名がセットされる。
esb-counter クラスを持つ要素には innerText に共有数がセットされる。
esb-entry クラスを持つ要素には href 属性に各サービスの共有画面 url がセットされる。
esb-search クラスを持つ要素には href 属性に各サービスの検索結果画面 url がセットされる。
上記要素は esb クラスを持つ要素にラップされてる必要がある。

例えば、Twitter Bootstrap の btn-group を利用したデザインにするには、以下のように記述します。

$('h4 a').easySocialButtons({
    autoAdd:false,
    callback : function( api ){
        $(this).parent().after(api.getButtons());
    },
    tempalte : '<div class="esb my-custom">' +
                    '<h4 class="esb-label"></h4>' + 
                    '<div class="btn-group">' +
                        '<a class="esb-counter btn btn-default"></a>' +
                        '<a class="esb-entry btn btn-default">Share</a>' +
                        '<a class="esb-search btn btn-default">Search</a>' +
                    '</div>' +
                '</div>',
    hatebu : {
        label : 'Hatebu!'
    },
    twitter : {
        label : 'Twitter'
    },
    facebook : {
        label : 'Facebook'
    },
    googleplus : {
        label : 'Google+',
        tempalte : '<div class="esb my-custom">' +
                        '<h4 class="esb-label"></h4>' + 
                        '<div class="btn-group">' +
                            '<a class="esb-entry btn btn-default">Share</a>' +
                            '<a class="esb-search btn btn-default">Search</a>' +
                        '</div>' +
                    '</div>',
    }
});

label パラメータには表示サービス名を指定できます。各サービス毎に異なる値を設定したい場合は、サービス名（hatebu / twitter / facebook / googleplus） : パラメータ（json）の形式でパラメータを指定します。上記例では、Google+ のみ共有数を取得する API が提供されてないのでマークアップを変えてます。

デザインをカスタマイズする（Bootstrap Button Group）

Demo | デザインをカスタマイズする（Bootstrap Button Group）

以下は Bootstrap の定義カラーを流用したマークアップです。

$.esb.hatebu.defaults.label = 'Hatebu!';
$.esb.twitter.defaults.label = 'Twitter';
$.esb.facebook.defaults.label = 'Facebook';
$('h4 a').easySocialButtons({
    tempalte : 
        '<div class="btn-group esb">' +
            '<a class="esb-label esb-entry btn btn-xs btn-primary"></a>' +
            '<a class="esb-counter esb-search btn btn-xs btn-default"></a>' +
        '</div>',
    twitter : {
        tempalte : 
            '<div class="btn-group esb">' +
                '<a class="esb-label esb-entry btn btn-xs btn-info"></a>' +
                '<a class="esb-counter esb-search btn btn-xs btn-default"></a>' +
            '</div>',
    },
    googleplus : {
        label : 'Google+',
        tempalte : 
            '<div class="btn-group esb">' +
                '<a class="esb-label esb-entry btn btn-xs btn-danger"></a>' +
            '</div>'
    }
});

esb.サービス名.defaults.パラメータ名 = 値と記述することでパラメータの初期値を変更することもできます。

デザインをカスタマイズする（Bootstrap Color Button）

Demo | デザインをカスタマイズする（Bootstrap Color Button）

パラメータ

プラグイン実行時、下記パラメータを指定できます。

defaults : {
    autoAdd : true, // true でボタンの自動挿入を行う
    addMethod : 'insertAfter', // ボタンの挿入メソッドを指定
    callback : function(api ){}, // プラグイン実行後のコールバック処理
    orders : ['hatebu','twitter', 'facebook', 'googleplus'], // ボタンの表示順
    labels : { // サービスの表示名
        'hatebu' : 'B!',
        'twitter' : 'ｔ',
        'facebook' : 'ｆ',
        'googleplus' : 'G+'
    },
    url : '',
    entryTitle : '投稿する', // esb-entry クラスを持つ要素に割り当てる title 属性値
    searchTitle : '検索する', // esb-search クラスを持つ要素に割り当てる title 属性値
    waitCounter : '<span>&nbsp;</span>', // Web API の取得結果待ち時に表示するマークアップ 
    tempalte : '<span class="esb"><a class="esb-label esb-search" target="_blank"></a><a class="esb-counter esb-entry" target="_blank"></a></span>', // ボタンのテンプレート
    useBrandColor : true, // ブランドカラーの使用
    inverseColor : false // ブランドカラー未使用時の配色の反転
},

API

API オブジェクトを使用し、下記メソッドを実行できます。

getButtons : function(){ // ボタンの取得

ダウンロード

jquery.sitekit – GitHub