リスティング広告 運用代行サービス|株式会社カルテットコミュニケーションズ|Yahoo広告/Google広告正規代理店

ソーシャルボタンを簡単にまとめて設置「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 サイトメモリー
  • はてなブックマーク

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

1営業日以内に返信いたします 広告の運用代行についてのお問い合わせはこちら
シェアする

ブログ記事の中で広告運用の事例をご紹介することがありますが、実際の事例を一部加工した内容となっておりますのでご留意ください。

また、2018年7月24日よりGoogle AdWordsはGoogle広告に名称変更されました。それ以前の記事に関してはGoogle AdWordsと表記されておりますのでご了承ください。


リスティング広告の
情報をお届け

メルマガではリスティング広告に詳しくなれる記事を毎週一週間分まとめてお届けします。不定期にはなりますがリスティング広告に限らず、Web集客改善に繋がる資料もお送りしていきますので、興味のある方はぜひご登録ください。

同じカテゴリの最近の記事