ソーシャルボタンを簡単にまとめて設置「jquery.socialbutton」

ネタ

公開日：2013年02月25日
更新日：2020年11月24日

Webサイトにtwitterの「つぶやく」ボタンやfacebookの「いいね！」ボタンなどのソーシャルボタンを設置する場合、一つひとつコードを書いて設置するのは非常に骨が折れる作業です。

そこで、各種ソーシャルボタンをまとめて簡単に設置できてしまう便利なjQueryプラグイン「jquery.socialbutton」をご紹介します。

使い方

使い方は非常に簡単です。

まず、<head>タグ内で以下のようにjQueryとjquery.socialbuttonを読み込みます。

[html]
<script src=”js/jquery-1.x.x.min.js” type=”text/javascript”></script>
<script src=”js/jquery.socialbutton-x.x.x.js” type=”text/javascript”></script>
[/html]

次に、ソーシャルボタンを設置したい箇所に空のdiv要素を作ります。今回はボタンを横一列に並べたいので、以下のようにcssもセットで書いておきます。

[html]
<div id=”socialbuttons” class=”clearfix”>
<div class=”twitter”></div>
<div class=”facebook”></div>
<div class=”google”></div>
<div class=”hatena” ></div>
</div>
[/html]
[css]
#socialbuttons div {
float: left;
}
[/css]

最後に、上記で作ったdiv要素に対してjquery.socialbuttonをセットします。

[javascript]
<script type=”text/javascript”>
$(function() {
$(“#socialbuttons .twitter”).socialbutton(“twitter”, {
button : “horizontal”,
text : “つぶやきに含めるテキスト”,
url : “対象URL”,
}).width(95);

$(“#socialbuttons .facebook”).socialbutton(“facebook_like”, {
button : “button_count”,
url : “対象URL”,
}).width(110);

$(“#socialbuttons .google”).socialbutton(“google_plusone”, {
button : “medium”,
url : “対象URL”,
count : true,
}).width(70);

$(“#socialbuttons .hatena”).socialbutton(“hatena”, {
button : “standard”,
url : “対象URL”,
title : “ページのタイトル”,
}).width(70);
});
</script>
[/javascript]

これだけで、以下のようなソーシャルボタンが設置できます。

各種ソーシャルボタンで使用できるオプションの詳細については、オフィシャルサイトおよびplugins.jquery.comのアーカイブをご参照ください。

一点だけ特筆しておくと、ソーシャルボタンの種類によって、ボタンの幅を指定するwidthオプションが有るものと無いものがあるため、上記のjavascriptのコードではあえてwidthオプションは使わず、jqueryのwidth()メソッドを使ってボタンの幅を指定しています。