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