調子に乗って「WPtouch」のテーマに、Facebookコメント欄を表示させてしまおうと、Facebookコメント作成手順に従いコードをそれぞれ適切な場所にコピペしていざ、表示をされてるかな？と、見てみると…
なんじゃこりゃ？ってな具合に、延々と余白が…(>_<)。
こりゃ、なんとかしなきゃと、ソースとにらめっこ。
ところが、まったくもってうまくいかない。
というわけで、Google先生に聞いてみよう。
というわけで、次のサイトを発見！
ブログに設置したFacebookコメントをスマホで見るとやたら余白が発生する問題に対応する方法 | jMatsuzaki
サイトに設置したFacebookのコメント欄をPCの時だけ表示してスマートフォンでは出さないJavaScriptのコード – 頭ん中
どうやら、Facebook側のバグっぽいですね…。
そして、Facebook側が対応したときの為に簡単に戻せるようにと、 jMatsuzakiさんの方法で対応することにしました。
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="300" data-num-posts="5"></div>
↓
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-width="600" data-num-posts="5" mobile="false"></div>
…とこのように mobile=”false”を付け加えるだけなんですよ（爆）。
そして、表示を確認してみると…
無事に表示された！
けど、PCの表示とちと違うな…。でも、まぁ無駄な余白が無くなったからこれで良いか（笑）。
あと、欲を言えばSNSボタンをスマートフォンで押しやすいようにしたいなぁ…。
※ 5/18日現在、PCの表示とほぼ同じになってました。
コメント