はてブ/Twitter/いいねなどソーシャルボタンをキレイに並べる


はていなブックマークやTwitter、Facebookなどのソーシャルボタンを縦でずらさずにキレイに並べる方法をまとめました。一度掲載して、その後別サイトで試したら見こと玉砕。
全面リニュアールしてのリトライ記事です。(2012/12/05)


🐰 HAML/HTMLの修正

HTML/HAMLの両方を載せています。環境に合わせてチョイスしてください。

<div class ="social">
<div class="hatena">
<a class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" data-hatena-bookmark-title="example.com" :href="http://b.hatena.ne.jp/entry/http://example.com"></a>
</div>
<div class="twitter">
<a class="twitter-share-button" data-lang="ja" data-via="your-twitter-account" , data-url="http://example.com", href="https://twitter.com/share">ツイート</a>
</div>
<div class="facebook">
<div class=fb-like data-href="http://example.com" data-layout="button_count" data-send="false" data-show-faces="false"></div>
</div>
</div>
%div.social
%div.hatena
%a.hatena-bookmark-button{"data-hatena-bookmark-layout" => "standard", "data-hatena-bookmark-title" => "example-title", :href => "http://b.hatena.ne.jp/entry/http://example.com"}
%div.Twitter
%a.Twitter-share-button{"data-lang" => "ja", "data-via" => "Twitter-account", "data-url" => "http://example.com", :href => "https://twitter.com/share"} ツイート
%div.Facebook
.fb-like{"data-href" => "http://example.com", "data-layout" => "button_count", "data-send" => "false", "data-show-faces" => "false"}

ボタンの種類等は、公式サイトをみて調整して下さい。

はてなブックマークボタンの作成・設置について

Twitter / Twitterボタン

Like Button - Facebook開発者

😼 Javascriptの修正

javascriptは非同期スクリプトを利用させていただきました。ページ読込みの体感速度が向上すると思います。

<script>
(function (w, d) {
w._gaq = [["_setAccount", "UA-XXXXXXXX-X"],["_trackPageview"]];
w.___gcfg = {lang: "ja"};
var s, e = d.getElementsByTagName("script")[0],
a = function (u, i) {
if (!d.getElementById(i)) {
s = d.createElement("script");
s.src = u;
if (i) {s.id = i;}
e.parentNode.insertBefore(s, e);
}
};
a(("https:" == location.protocol ? "//ssl" : "//www") + ".google-analytics.com/ga.js", "ga");
a("https://apis.google.com/js/plusone.js");
a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
a("//platform.twitter.com/widgets.js", "twitter-wjs");
a("//connect.facebook.net/ja_JP/all.js#xfbml=1", "facebook-jssdk");
})(this, document);
</script>

不要なサービスのjsがある場合はその部分を削除してください。

🐮 CSS修正

CSSに次の内容を追加しました。

.social {
display: inline-block;
height: 30px;
overflow: hidden;
text-align: left;
vertical-align: bottom;
}
.hatena {
float: left;
width: 62px;
height: 30px;
overflow: hidden;
}
.Twitter {
float: left;
width: 100px;
height: 30px;
overflow:hidden;
}
.Facebook {
float: left;
width: 115px;
height: 25px;
LINE-height: 20px;
overflow: hidden;
}

🚕 ブラウザで確認

MacのSafari/Facebook/Chromeで確認しました。

Windowsは所有していないので試せていません。
もし不具合があるようだったらぜひ教えて下さい!

🏈 変更来歴

11/30 14:35 HTMLにこのブログのURLが混ざっていたので除去

12/05 18:25 別サイト構築中に失敗、全面的にやり直し

12/16 12:05 「vertical-align: bottom」を追加(タブレット表示が改善)

12/16 20:05 ソーシャルブックマークのパラメータが間違っていたので修正

🐠 Special Thanks

複数のソーシャルボタンをきれいに整列表示させる簡単な方法

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた

ソーシャルボタンをキレイに並べる

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)