リスティング広告代行の専門会社|Yahoo!プロモーション広告・Google AdWords完全対応|東京・大阪・名古屋

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


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()メソッドを使ってボタンの幅を指定しています。

対応しているソーシャルボタン

jquery.socialbuttonプラグインは、2013年2月現在、以下のソーシャルボタンに対応しています。

  • Pinterest ボタン
  • Google+1 ボタン
  • mixiイイネ!ボタン
  • mixiチェックボタン
  • facebookいいねボタン
  • facebook Shareボタン
  • Twitterつぶやくボタン
  • GREE いいねボタン
  • Evernote サイトメモリー
  • はてなブックマーク

非常に手軽に導入できますので、興味のある方は試してみてはいかがでしょうか。



業界初のリスティング広告運用総合支援ツール Lisket(リスケット)

無料メルマガ

登録はたったの5秒!一週間分のコラムを毎週月曜にメールでお届けします。

Facebookもチェック