Easy Social Buttons | jQuery Plugin

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

<h3>This Page Social Buttons</h3>
<div class="social-btn"></div>

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

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

<h3>Google Social Buttons</h3>
<div class="social-btn"></div>

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

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

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

ul.links li{
    margin-bottom:32px;
}

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

<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 ){
    	$(this).parent().after(api.getButtons());
	}
});

div.article h4{
    margin-top:32px;
    border-bottom:solid 1px #ddd;
    line-height:1.6;
}

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

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

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

ul.links li{
    margin-bottom:32px;
}

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

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

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

ul.links li{
    margin-bottom:32px;
}

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery.easy-social-buttons.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

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

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

ul.links li{
    margin-bottom:32px;
}

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

<div class="article">
	<h4>
	    <a href="http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01">
	    jQuery 関連記事まとめ - Cyokodog :: Diary</a>
	</h4>
	<p>contents...</p>
</div>

$('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>',
	}
});

.my-custom .btn{
	width:100px;
}

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

http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

../social-info/jquery.social-info.js
jquery.easy-social-buttons.js

<h4>
    <a href="http://d.hatena.ne.jp/cyokodog/20081016/jquerylinks01">
    jQuery 関連記事まとめ - Cyokodog :: Diary</a>
</h4>

$.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{
	margin:16px 16px 0 0;
}
.esb-label{
	width:80px;
}
.esb-counter{
	width:50px;
}

Easy Social Buttons :: jQuery SiteKit

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

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

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

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

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

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

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

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

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