Twitter、facebookいいね!、mixiチェック、はてブ等のソーシャルボタンをカンタンにブログなんかに設置できるプラグイン「jQuery.socialbutton」
ブログをしている人はほとんどが設置しているであろう、
各種ソーシャルボタンをとっても簡単に設置できるのがこのプラグインです。
設置方法はとっても簡単ですし、
制作者さまのサイトでももちろん、設置方法は書かれているのですが、
少し難しく感じる人もいるかもしれないのでメモがてら書きます。
このブログでも使用していて、実際の表示はこのようになります。
まずは、 以下よりjQuery.socialbutton プラグイン(JavaScript)をダウンロード
jQuery本体もダウンロードしてもよいのですが、面倒だと言う人はGoogleから借りましょう。
Gooleから借りちゃう場合は「jQuery本体」はダウンロードしなくてもOKです。
jquery.socialbuttonプラグインはリンク先の一番下よりダウンロード可能です。
この二つのJavaScriptをheadタグ内で読み込ませます。
以下のように記述
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script src="http://example.com/js/jquery.socialbutton-1.6.0.js" type="text/javascript"></script>
jquery.socialbuttonプラグインはjsファイルを置いた場所を指定してくださいね。
ダウンロードしたjquery.socialbuttonプラグインをテキストエディタなどで開いて、先頭1行目に以下を記述。
$(function() {
$('#evernote').socialbutton('evernote', {
button: 'article-clipper-jp',
styling: 'full'
});
$('#hatena').socialbutton('hatena');
$('#mixi_check').socialbutton('mixi_check', {
key: 'あなたのmixi登録キーを記述'
});
$('#mixi_like').socialbutton('mixi_like', {
key: 'あなたのmixi登録キーを記述',
show_faces: false
});
$('#gree').socialbutton('gree_sf', {
button: 0
});
$('#twitter').socialbutton('twitter', {
button: 'horizontal',
via: 'あなたのTwitterIDを記述'
});
$('#facebook').socialbutton('facebook_like', {
button: 'button_count'
});
});
※mixiチェックとmixiイイネ！の場合、必ずkeyに登録キーを指定してください。
でないと正常に動作しません。
面倒ですし少しややこしいです・・・。
あと携帯電話(スマートフォンはダメ)も持っていないと登録キーが発行されないのですが。。
以下でキー登録方法が書かれています。
続いてボタンを設置したい場所に、以下のように空のdivタグを配置。
表示したいボタン以外は消してください。
<!-- Button --> <div class="block clearfix"> <div id="evernote"></div><!-- //エバーノ－ト// --> <div id="hatena"></div><!-- //はてなブックマーク// --> <div id="mixi_check"></div><!-- //ミクシィチェック// --> <div id="gree"></div><!-- //グリーイイネ// --> <div id="twitter"></div><!-- //ツィッター// --> <div id="mixi_like"></div><!-- //ミクシィイイネ// --> <div id="facebook"></div><!-- //フェイスブックイイネ// --> </div> <!-- //Button// -->
横並びにしたい方は、CSSファイルに以下のように記述。
.block {
margin:5px 0;
}
.block div {
float:left;
margin-right:5px;
}
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
.clearfix {
min-height:1px;
}
.clear {
clear:both;
}
という感じです。
上記のように設定すればよくブログなんかで見る感じのボタンサイズで設置できます。
あくまで一つの例なので、プラグイン制作者さまのサイトを見て自分の好きな感じで設置してみたほうがよいかなと思います。