サイト運営者要注意!Facebookボタンの仕様が変更されました

Facebook at Mozcon - Alex

@_tenbiです。

本日未明にFacebookの提供する「Like Button」「Like Box」の仕様変更があったらしく、ボタンまわりのコーティングが酷いことになっておりますwこんな感じで変更されました!

今回の変更点

今回変更されたのはHTML5で設置したタイプ。変更点は以下の2点です。

  • Likeボタンが右に25px移動
  • Like Boxが右に150px移動

一つひとつ見ていきましょう!

Likeボタンが右に25px移動

Like
Like Photo by angermann

記事に対する「いいね!」を付加する「Likeボタン」が、今回の変更で右に25px移動して表示されるようになりました。

いいねして下さい!

とまあこのブログでも盛大に位置がずれております。
ウェビメモみぞれ氏NANOKAMO BLOGでもずれているので僕だけでは無いでしょうw

Like Boxが右に150px移動

これまた同じ状況。Facebookページに対して「いいね!」が出来る「Like Box」が、今回の変更で右に150px移動して表示されるようになりました。

モザイク使えないのは内緒

こんな感じで、先のいいねボタンと合わせると大変酷い事になっていました。これは他サイト未確認。

直してみる

直し方は以外と簡単です。

HTML5形式で設置したものでも、Webページでは

要素に対してCSSをかけます。

[css]
/* Likeボタン用CSS */
.fbbutton <div class="youtube> {margin-left: -25px}

/* Like Box用CSS */
.facebook <div class="youtube> {margin-left: -150px}
[/css]

一応このCSSはボタンとボックスは親要素で囲んである場合にちゃんと動くので、まだ囲んでないひとは囲むなり親要素名を変更して下さい。

突然だとかなり慌てる

僕がこの変更に気づいたのは午前8時前だったので、最低限の処置しかできませんでした。もう少し変更に関するアナウンスをして欲しいですね全く!

スポンサーリンク

この記事を書いた人