facebookの「いいね！」ボタンが表示されない時の解決法（レスポンシブデザイン）
ここ数日、札幌のホームページ作成ハルリの修正をしていたのですが、facebookの『いいね！ボタン』で、ちょっとハマりました（笑）
以前はちゃんと表示されていたのに、気が付いたら表示されなくなっていて、しかも特定の条件で表示になったり、非表示になったりするのです。
最初は「facebook側の仕様が変わったから表示されないのかな～」とも思いましたが、無事に解決できたので、解決法を共有したいと思います。
同じように、きちんと『いいね！ボタン』設置しているのに、表示されないという方の参考になれば幸いです。
『いいね！ボタン』が状況によって表示・非表示になる
パソコンでこのページを見ると、左側に下のようにSNSのボタンが縦にならんでいるかと思います。
このサイト（ブログ）は、レスポンシブデザインになっていて、ブラウザの幅が狭くなると、これが横一列に並ぶように設定している（パソコンで読んでる方は、ブラウザの幅を狭くすると、スマホ・タブレット用のレイアウトに変わり、下の画像のように変わります）のですが、なぜか下の画像のように『いいね！ボタン』だけ消えてしまいました。
パソコン用では表示されるのに、スマートフォン・タブレット用だと、『いいね！ボタン』が表示されない
全て非表示になるのなら、コードの記述のしかたが違うなど、原因がわかるのですが、特定の条件（スマートフォン・タブレット用のレイアウト）の時だけ、『いいね！ボタン』が非表示になっているので、なかなか原因がわかりにくい…。
『いいね！ボタン』が非表示になる解決方法を検索してみると、「facebookにログインしていないとダメ」というのは出てくるのですが、ログインしていますし、スマートフォン・タブレット用の時だけ表示されないので、今回の現象とは関係ありません。
『いいね！ボタン』が表示されない原因は、レスポンシブデザインにあった！
いろいろと原因を考え、「以前（レスポンシブデザインにする前）は表示されていたのに、レスポンシブデザインにしてから表示されなくなったので、もしかしたら原因はレスポンシブデザインかも」と思い、該当するCSSを削除したら、見事に表示されるようになりました（汗）
削除したCSSは、レスポンシブデザインに対応させるために、facebookのライクボックスの幅を可変にするCSSです。
.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
width: 100% !important;
}
レスポンシブデザインでライクボックスを設置しているサイトなら、上記のCSSが記述されていると思います。
逆にこの記述がないと、レスポンシブデザインでライクボックスを設置した時に、いいね！してくれている人のサムネイル画像がうまく表示されません。
この部分が『いいね！ボタン』にまで影響してしまって、表示できないようにしてしまっていたのです。
パソコン用レイアウトのように縦にリストで並べた場合は影響しませんが、スマートフォン・タブレット用のレイアウトのように、リストをフロートさせて横に並べると、表示されなくなるようです。
先程のCSSを削除した結果、下の画像のように、『いいね！ボタン』が表示されるようになりました。
まとめ
レスポンシブデザインにすると、必ず『いいね！ボタン』が表示されないという訳ではなく、以下の2つの条件を満たすと、表示されなくなるようです。
- ライクボックスの幅を可変にするCSSを記述している
- 『いいね！ボタン』をフロートさせている（リストタグが影響しているかは不明）
結局私はライクボックスを可変にすることをやめ、パソコン用・スマートフォン用の2つのライクボックスを設置して、端末に合わせて表示するようにして解決しました（スマートフォン用の時は「いいね！」してくれた人のサムネイル画像が出ない）
あとがき
SNSボタンは、設置が面倒だったり、突然仕様が変わって1pxずれてしまったりと、いろいろ厄介なこともありますが、今の時代利用しないのは非常にもったいないかと思います。
札幌のホームページ作成のハルリでは、SNSボタンの設置だけでなく、SNSとの連携（サイトを更新したらSNSページにも自動で反映されるなど）など、SNSを活用したサイトの制作も行っております。
効果を考えたホームページをお考えの方は、ぜひお気軽にご相談ください。
