酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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

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

HAML/HTMLの修正

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

HTMLファイル
1
2
3
4
5
6
7
8
9
10
11
<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>
HAMLファイル
1
2
3
4
5
6
7
%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は非同期スクリプトを利用させていただきました。ページ読込みの体感速度が向上すると思います。

.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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に以下の内容を追加しました。

cssファイル
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.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で確認しました。

fpu_tmp_1354701605.4581_414688

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をまとめる非同期スクリプトにはてなを加えてみた

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

おすすめの書籍