サイトに設置しているFacebookの「いいね!ボタン」が突然右ズレした時の対処法
何も触っていないにも関わらずある日突然「いいね!ボタン」がニョーーーーン!!と右にズレて他のソーシャルボタンと被ってしまい焦ることがことがあるのですが、今回はその現象の対処法を書こうと思います。
・・・ズバリ言うわよ(細木数子風
時間が経てば勝手に直るからお茶でも飲め
いや、冗談じゃなくて本当にそうなんですよねこれ、毎度のことなんです、前もなったんだけど暫く放置しておくと勝手に直るんですよこれwww
恐らくFacebook側で何かしらの修正が加えられて一時的にそうなったのか、それとも開発者がたまたまやっちゃったのか良くわかりませんがとにかく焦らず暫く様子を見るのが一番の解決策です、色々やるほうが時間が勿体無いよ!
しかしながらそんな悠長な事を言ってられない場合だったあると思うので今回はそんな時の為のとっておきの超突貫対応をメモっておこうと思います、多分これで凌げるはず?
リストに直接Styleを指定して凌ぐ
恐らくソーシャルボタンを並べる際にリストを使って並べている人が多いと思うのですが、取り敢えずそのリストに直接サイズ指定をしてやると戻る場合があります、具体的にはこんな感じ
<li style="width:72px; height:60px;">ここにボタンのコード</li>
「いいね!ボタン」のリストにだけサイズや位置(alignなど)の指定をしてやると取り敢えず変な位置になるのは収まったりしますが、微妙に隙間が空いたりして気持ち悪いことになる場合もあります、でも被ってるよりマシだからとりあえずOK。
XFBML版からiframe版に変更する
XFBML版とiframe版の違いはこう
XFBML版のいいね!ボタンの特徴
・ボタン押下時にコメント記入欄が表示される
iframe版のいいね!ボタンの特徴
・ボタン押下時にコメント記入欄が表示されない
iframe版はスペースの少ないスマホテーマ用として使うとコメント欄がはみ出したりしないので重宝するのですが、基本的にはやっぱりコメントしてもらえるチャンスがあることを考えるとXFBML版のほうを使っている人が多いと思います。
だがしかし!経験上XFBML版を使っている場合のみズレる場合が多いように感じるんですよね、今日もズレたんだけどやっぱりXFBML版を設置している場所だけズレていたしやっぱり不安定なのかもしれません、そういった場合は思い切ってHTML5版がiframe版に差し替えてみるとハッピーかもしれません、事が治まるまではコメントくらい我慢しましょう、被って押されないより数倍マシですからね!
ちなみに「いいね!ボタン」のコード取得場所を毎回忘れる人、まぁそれは僕なんですけども、そんな人用にいいねボタンのコードを取得する場所のリンクも置いておきますね。