はてブ、Twitter、Facebook、Google＋の各ボタンを横一列に並べる

ソーシャルメディアロゴ

何か定期的に「ソーシャルボタンが上手く横に並べられません！」みたいな話を聞くので、このブログで実際に使用している方法を紹介。FC2ブログならそのままコピーして使えるし、他のブログでも変数を置き換えれば問題なく使えるはず。

注意点

  • 紹介するコードではFacebookを除き各サービスの（ボタンを表示するための）JavaScriptタグを記述しているが、すでにページのどこか（headタグの中やbodyの閉じタグの直前など）で呼び出しているなら消してしまってかまわない。
  • Facebookは以下のタグを<body>のすぐ後などに書き込んでおく必要がある。（もちろんすでにブログテンプレートなどに書き込んであるなら、改めて記述する必要はない。）
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ボタン表示用HTML

汎用コード

<ul class="social-button">
<li><a href="http://b.hatena.ne.jp/entry/[記事のURL]" class="hatena-bookmark-button" data-hatena-bookmark-title="[記事のタイトル]" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://cdn-ak.b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
<li><div class="fb-like" data-href="[記事のURL]" data-send="false" data-layout="button_count" data-width="130" data-show-faces="false"></div></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="[記事のURL]" data-text="[記事のタイトル]" data-lang="jp" data-count="horizontal">Tweet</a><script>!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');</script></li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><div class="g-plusone" data-size="medium" data-href="[記事のURL]"></div></li>
</ul>

FC2ブログ用コード

ブログ変数を使用しているので、<!--topentry-->から<!--/topentry-->の間に貼り付ける必要がある。

<ul class="social-button">
<li><a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title> - <%blog_name>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://cdn-ak.b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
<li><div class="fb-like" data-href="<%topentry_link>" data-send="false" data-layout="button_count" data-width="130" data-show-faces="false"></div></li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<%topentry_link>" data-text="<%topentry_title> - <%blog_name>" data-lang="jp" data-count="horizontal">Tweet</a><script>!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');</script></li>
<li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><div class="g-plusone" data-size="medium" data-href="<%topentry_link>"></div></li>
</ul>

ボタン表示用CSS

.social-button {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.social-button li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}

.social-button li div {
	display: inline;
}

.social-button:before,
.social-button:after {
	content: " ";
	display: table;
}

.social-button:after {
	clear: both;
}

.social-button {
	*zoom: 1;
}

.social-button iframe.twitter-share-button {
    width: 90px !important;
}

最後の「iframe.twitter-share-button」は、そのままだとTwitterのボタンの横にできてしまう無駄なスペースを消すためのもの。横に並べるレイアウトそのものに必要なものではないので、標準サイズの幅に戻したいなら削除してしまってかまわない。

表示例

適切にコードを貼り付けてCSSが適用されれば以下のような形で表示されるはず。

各ソーシャルボタンを横に並べた表示例

ソーシャルボタン自体には特にサイズの制限などはないので、HTMLコード内のサイズやレイアウトの指定（「button_count」など）を変更すれば任意のタイプに変更できる。自分の管理しているサイトのデザインに合わせて自由にカスタマイズして欲しい。