最近ではWebサイトを構築する際には、「いいねボタン」や「ツイートボタン」を設置することが当たり前の時代になっています。
これらソーシャルボタンを設置した場合、iframeで公式サイトのコンテンツを表示するので、ボタンの形や色などデザイン・レイアウトを基本的には変更することはできません。
しかし、ほとんどの場合、デザイナはそのような事情を知らないため、結構な頻度で自由にボタンをレイアウトしてしまいます。
何もデザイナを悪と言っているわけではありません。デザインを優先してこそすばらしいサイトが仕上がるのは事実です。
ただ、そのことで、ソーシャルボタン配置の際に、技術的な難易度が上がることもしばしばです。
いいねボタンのレイアウトについて
いいねボタンのコードは以下のサイトで取得することができます。
Like Button – Facebook開発者
ボタンのタイプはいくつかありますが、後者をよく見かけますね。
デフォルトのコードでは横幅は450pxとなっています。
しかし、デザイン要望としては、ソーシャルボタンのみで幅を450pxもとることはほとんどないですね。各ボタンを横幅80px程度で、横並びに配置してあることがよくあります。
しかし、先述したとおり、ソーシャルボタンのデザイン・レイアウトは上の図の状態から変更を加えることはできません。また、提供元の都合により予期せずデザインが変更されることもないとは言い切れません。
このような状況では、デザイン要望に応えることは難しく、また、たとえ叶えたとしても、突然の変更により崩れる可能性があります。
部分的に隠すことはできるかも
ボタン横の吹き出しのカウントを消したいという要望もよくあります。狭いエリアにどうにかボタンを収めたいということですね。
このようなケースだと、もちろんデザインの変更はできませんが、エリアをスマートにするために部分的に隠すことは技術的に可能です。
例えば、ボタンの取得したコードは以下のようなものです。
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
これを、divなどのタグで囲います。classはsnsとでもしておきます。
<div class=”sns”> <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div> </div>
その要素に対してcssで横幅を指定し、overflowにhiddenそ指定します。
.sns{
width: 72px;
overflow: hidden;
}
いいねボタンのカウントを隠すには72px程度を指定すればよいでしょうか。
以下、スクリーンショットですが、見た目の結果です。
Facebook本体でデザインを変更され、ボタンサイズなどが大幅に変更されると、それも隠れてしまいますが、サイト全体として大きな崩れは防ぐことができるでしょう。
これでコーディングの時にある程度融通が効くようになりますね。
※但し、この対応だと、吹き出しのほうは見えて、逆にボタン部分が隠れてしまうという報告も聞いています。原因は分かりませんが、ブラウザレベルではなく、ユーザレベルで効果があったりなかったりするようです。。。
やはり素直にデザインに理解してもらって、調整してもらうほうが一番安全かもしれませんね。
コメントする