×

facebook、twitter、はてブ、Google+のソーシャルボタンデザインをバルーン型にする方法

2015年7月3日 コーディング

バルーン

当ブログでは、悲しいことにあまりSNSでシェアされてはいませんが、一応ソーシャルボタンを設置しています。

ソーシャルボタンの基本デザインとバルーン型デザイン

現在当ブログにはfacebook、twitter、はてなブックマーク、Google+の4つを設置していますが、どれも基本のデザインになっていました。

ソーシャルボタン基本デザイン

基本のデザインで特に悪いわけではないですが、ちょっと見栄えが気になりませんか?

ソーシャルボタンバルーン型デザイン

最近だと、上の画像のバルーン型のデザインが色々なサイトで採用されています。ボタンの上にシェア数が書かれたバルーンを表示させるデザインです。

オリジナルデザインのソーシャルボタンは少しハードルが高いので、基本デザインからバルーン型デザインへ変更してみます。シェアされてないけど。

※ソーシャルボタンの仕様は2015年6月現在のものなので、今後仕様の変更に伴いバルーン型デザインの設定方法も変わるかもしれませんのでご了承ください。

※twitterのカウント数は2015年11月20日で廃止され、表示されなくなりました。

ソーシャルボタンをバルーン型にする方法

具体的なバルーン型のデザインへの変更方法を紹介します。基本的には既にあるソーシャルボタンのコードにに、デザインを指定するコードを記述するだけです。

facebook

facebook公式でソーシャルボタンのコードを発行できます。

Layoutの項目でbutton_countを選択すると上のようにボタンとシェア数が隣同士に並ぶようなデザインになります。
ボタンコード内にdata-layout="button_count"を記述すると上のようなデザインで表示できます。当ブログは元々このデザインでした。

Layoutの項目でbox_countを選択すると、ボタンの上にシェア数を表示したバルーン型のデザインになります。
ボタンコード内にdata-layout="box_count"を記述すると上のようなデザインで表示できます。

twitter

twitter公式でソーシャルボタンのコードを発行できます。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://migo-media.com/social-balloon/">Tweet</a>

当ブログでは上のようなボタンとシェア数が隣同士に並ぶようなデザインでした。
data-countを指定していないと、上のようなデザインになります。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://migo-media.com/social-balloon/" data-count="vertical">Tweet</a>

ボタンコード内にdata-count="vertical"を記述すると上のようなデザインで表示できます。
カウント数の表示をvertical(垂直)にするという意味で、バルーン型デザインでの表示が可能です。

はてなブックマーク

はてなブックマーク公式でソーシャルボタンのコードを発行できます。

このエントリーをはてなブックマークに追加

<a href="http://b.hatena.ne.jp/entry/http://migo-media.com/social-balloon/" class="hatena-bookmark-button" data-hatena-bookmark-title="基本デザインのソーシャルボタンをバルーン型にする方法" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>

当ブログは上のようにボタンとシェア数が隣同士に並ぶようなデザインでした。
ボタンコード内にdata-hatena-bookmark-layout="simple-balloon"を記述すると上のようなデザインで表示できます。

このエントリーをはてなブックマークに追加

<a href="http://b.hatena.ne.jp/entry/http://migo-media.com/social-balloon/" class="hatena-bookmark-button" data-hatena-bookmark-title="基本デザインのソーシャルボタンをバルーン型にする方法" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">
<img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />
</a>

ボタンコード内にdata-hatena-bookmark-layout="vertical-balloon"を記述すると上のようなデザインで表示できます。

カウント数の表示をvertical(垂直)のballoon(バルーン型)にします。

Google+

Google公式でソーシャルボタンのコードを発行できます。

<div class="g-plusone" data-size="medium" data-href="http://migo-media.com/social-balloon/">
</div>

当ブログは上のようにボタンとシェア数が隣同士に並ぶようなデザインでした。
ボタンコード内にdata-size="medium"を記述すると上のようなデザインで表示されます。

<div class="g-plusone" data-size="tall" data-href="http://migo-media.com/social-balloon/">
</div>

ボタンコード内にdata-size="tall"を記述すると上のようなデザインで表示できます。

【おまけ】WordPressのテンプレート「賢威」でバルーン型デザインにするには

賢威テンプレートでは、デフォルトでソーシャルボタンが設置されています。
social-button.phpに基本となるhtmlが記述されており、JavaScriptを使用して外部から各SNSのデータを読み込ませています。

socialButton.jsというjsファイルにボタンのコードが記述されているので、先ほどのfacebook、twitter、はてなブックマーク、Google+それぞれバルーン型デザインにするためのコードを記述します。

※一応バックアップファイルを作っておきましょう。

jQuery(function(){

//ツイートボタンを設置
jQuery(".sb-tweet").append('<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="vertical">ツイート</a>');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');


//はてなボタンを設置
if ("https:" == document.location.protocol) {
jQuery(".sb-hatebu").append('<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.hatena.ne.jp/js/bookmark_button.js" charset="utf-8" async="async"></script>');
} else {
jQuery(".sb-hatebu").append('<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>');
}

//プラス1ボタンを設置
jQuery(".sb-gplus").append('<div class="g-plusone" data-size="tall" ></div>');
window.___gcfg = {lang: 'ja'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();

//いいねボタンを設置
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

jQuery(".sb-fb-like").append('<div class="fb-like" data-width="110" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>');

});

このように記述すればOKです。

まとめ

いかがでしたか?
各ソーシャルボタンで独自の記述はあるものの、簡単にバルーン型デザインへ変更ができました。

そのうちオリジナルのボタン作成に挑戦してみようと思います。

関連記事