2019年12月14日
コピペで使える！公式SNSシェアボタンを横に並べて揃えるCSS@2016
SNSシェアボタンやソーシャルブックマークボタンはサイトの必需品ですが、
公式サイトからコードを取得して色々設置すると、ガタガタとズレてきれいに並びません。
今回は、公式コードのままできれいに揃える、コピペで使えるCSSを紹介します。
（2016年最新版）
公式シェアボタン取得
https://about.twitter.com/ja/resources/buttons#tweet
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
はてなブックマーク
http://b.hatena.ne.jp/guide/bbutton
Google+
https://developers.google.com/+/web/+1button/
https://getpocket.com/publisher/button
今回は、上記サイトのボタンをデフォルトサイズで、バルーンだけ表示するタイプを選択しました。
ちなみに、オリジナルデザインのシェアボタンを作成することも可能ですが、公式ボタンを利用することで下記のようなメリットが有ります。
- 設置が簡単
- 仕様変更で修正が発生するリスクが少ない
- 押下時にポップアップなどで様々な公式情報を取得、表示できる
HTML
上記で取得した順に、コードをそのまま書いてみます。
※<div id=”fb-root”…だけは<body>直下に書いてください。
すると、下記のような残念な感じになります。
まず、Google+だけサイズが違います。非常に残念ですね。
Google+は、サイズをstandardではなくmediumに変更してコードを取得し直します。
これで、とりあえずサイズは揃いました。
HTMLはこれで完了です。公式コードそのままです。
CSS
各ボタンにclassやidが付いているので、それを利用してcssを書いていきます。
ポイントは下記の3点です。
- block要素をinline-blockにして、横に並べる
- 高さを20pxに揃える
- 余分な余白を取り除く
もろもろ調整していくと、下記のようなcssになります。
.fb-like { /* Facebook */
display: inline-block;
height: 20px;
overflow: hidden;
}
.fb_iframe_widget span {
vertical-align: top !important;
}
#___plusone_0, #___plusone_0 iframe { /* Google+ */
width: 70px !important;
}
.pocket-btn { /* Pocket */
display: inline-block;
height: 20px;
overflow: hidden;
}
.pocket-btn iframe { /* Pocket */
width: 100px !important;
overflow: hidden;
}
Twitterと、はてなブックマークは、何もしなくてもokでした。
Google+と、Pocketは、横幅が長めに指定されているため、widthを指定しています。カウント数が3桁くらいまでならこんな感じでok。
4桁までいく人気サイトの場合はもっと長めに指定してください。
Google+ボタンを複数設置する場合、#___plusone_0、#___plusone_1、#___plusone_2 とidが変わります。
完成！
上記cssをコピペすれば完成です！
公式ボタンがきれいに並びました。
もちろんボタンの並び順を変更しても大丈夫です。
SNSでフォローする
関連記事
