はてブ/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は非同期スクリプトを利用させていただきました。ページ読込みの体感速度が向上すると思います。


    
    
    

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍