SNSのボタンをまとめて配置する【jQuery連載08】

自身のサイトやブログを拡散させるために使用するソーシャルボタンですが、それぞれ使用するサイトからひとつづつ作成することはできますが簡単にまとめて設置ができるプラグイン「jQuery.socialbutton」を使用してソーシャルボタンを設置してみます。

今回作成したサンプル

【サンプル】ソーシャルボタンをまとめて配置する
http://www.html5-memo.com/sample/jq-books/17

プラグインの導入

各種ソーシャルネットワーキングサイトの「いいね！」ボタンを導入できるプラグイン「jQuery.socialbutton」（http://itra.jp/jquery_socialbutton_plugin/）。
まずはjQuery本体とjquery.socialbuttonプラグインを読み込む

挿入できるソーシャルボタン

• facebookいいね
• facebook Share
• Twitterツイート
• Google+1
• Pinterest
• はてなブックマーク
• 新はてなブックマーク
• Evernote サイトメモリー
• mixiイイネ！
• mixiチェック
• GREE いいね

読み込みには、ボタンを設置したい場所に、空のdiv要素を配置します。

今回はFacebookいいね、Twitter、Google+、はてなブックマーク、ピンタレストを設置してみる。

<div id="socialbuttons" class="clearfix">
<div class="facebook_like"></div>
<div class="twitter"></div>
<div class="google"></div>
<div class="hatena" ></div>
<div class="pinterest"></div>
</div>

ボタンの呼び出し

ボタンの呼び出しは呼びだしたいサービス名のボタン名を引数に呼び出すことでボタンが設置されます。また各ボタンの細かい装飾をするためには、別の引数にオプションを設定することでカスタマイズが可能です。

ボタンのみの呼び出し

$(function() {
    $('.tweet').socialbutton('service');
});

オプションを指定する場合

$(function() {
    $('.tweet').socialbutton('service',{
	options,
});

$(function() {
$('.facebook_like').socialbutton('facebook_like');
$('.twitter').socialbutton('twitter');
$('.google').socialbutton('google_plusone');
$('.hatena').socialbutton('hatena');
$('.pinterest').socialbutton('pinterest');
});

オプションを設定してボタンをカスタマイズする

ブログなどでよく見る形の横一連に並べるようにオプションを設定していきます。ボタンのデザインや表示さえる言語やボタン領域の幅の指定などが可能です。

$(function() {

$('#socialbuttons .facebook_like').socialbutton('facebook_like', {
	button:'button_count',
	url:'http://www.html5-memo.com',
	locale:"ja_JP"
}).width(115);


$('#socialbuttons .twitter').socialbutton('twitter', {
	button:'horizontal',
	text:'ツイートに含ませるテキスト',
	url:'http://www.html5-memo.com',
	lang:'ja_JP',
	via:'html5memo'
}).width(105);


$('#socialbuttons .google').socialbutton('google_plusone', {
	size:'medium',
	url:'http://www.html5-memo.com',
	count:true
}).width(90);


$('#socialbuttons .hatena').socialbutton('hatena', {
    button:'standard',
    url:'http://www.html5-memo.com',
}).width(70);

$('#socialbuttons .pinterest').socialbutton('pinterest', {
	button:'horizontal',
	media: 'http://cruzin.jp/zoo/img/03.jpg',
	url:'http://cruzin.jp/zoo/',
	description: 'Photo by Yutaka Hayashi'
}).width(60);

});

オプションを設定してボタンの形状を変更し、ボタンの配置はCSSを使って整えます。※今回はピンタレストのボタンのみバルーンの位置が違う為、スタイルシートで位置を調整させた。

各サービスのオプション

facebookのいいねボタンのオプション設定

google+1のいいねボタンのオプション設定

はてなブックマークボタンのオプション設定

pinterestボタンのオプション設定

twitterのツイートボタンのオプション設定

各種ソーシャル側の仕様変更の可能性

各種ソーシャルボタンですが、運営元の仕様変更などによって設置方法や各種設定が変わる場合があります。そういった場合は運営元の設置ガイドラインなどを見て調整していきましょう。

今回は以上になります。

次回はPCとスマートフォンで使用する画像を切り替えるサンプルを作成してみたいとおもいます。