このエントリーをはてなブックマークに追加

コピペで使える!公式SNSシェアボタンを横に並べて揃えるCSS@2016

SNSシェアボタンやソーシャルブックマークボタンはサイトの必需品ですが、 公式サイトからコードを取得して色々設置すると、ガタガタとズレてきれいに並びません。
今回は、公式コードのままできれいに揃える、コピペで使えるCSSを紹介します。
(2016年最新版)

公式シェアボタン取得

Twitter

https://about.twitter.com/ja/resources/buttons#tweet

Facebook

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/

Pocket

https://getpocket.com/publisher/button

今回は、上記サイトのボタンをデフォルトサイズで、バルーンだけ表示するタイプを選択しました。
ちなみに、オリジナルデザインのシェアボタンを作成することも可能ですが、公式ボタンを利用することで下記のようなメリットが有ります。
  • 設置が簡単
  • 仕様変更で修正が発生するリスクが少ない
  • 押下時にポップアップなどで様々な公式情報を取得、表示できる

HTML

上記で取得した順に、コードをそのまま書いてみます。
※<div id="fb-root"...だけは<body>直下に書いてください。

すると、下記のような残念な感じになります。 share1.png まず、Google+だけサイズが違います。非常に残念ですね。
Google+は、サイズをstandardではなくmediumに変更してコードを取得し直します。 share2.png これで、とりあえずサイズは揃いました。
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が変わります。

完成!

share3.png 上記cssをコピペすれば完成です!
公式ボタンがきれいに並びました。
もちろんボタンの並び順を変更しても大丈夫です。

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter