![]()
![]()
ソーシャルボタンを簡単に設置できる「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>
![]()
