wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

Facebookコメントプラグインの表示がおかしいんだけど

今現在、私の運営サイトに設置しているFacebookコメントプラグインがめっちゃ狭くなっています。

f:id:wanichan:20181013083407p:plain

あれ、なんか仕様変わったのかな?と思って確認してみたんですけど

コメント - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

HTML5属性 説明 デフォルト値

data-width

ウェブページ上のコメントプラグインの幅。ピクセル幅で指定、または可動幅に設定する場合はパーセンテージ(100%など)で指定します。モバイルバージョンのコメントプラグインではwidthパラメーターが無視され、100%の可変幅が使用されます。コメントプラグインでサポートされる最小幅は320ピクセルです。

550

私はHTML5バージョン使ってるので、data-width属性を100%にしてるんですけど、見た感じ200ピクセルしかないんですよ。

function facebook_comment(){
var url = location.href;
document.write('<div class="fb-comments" data-href="' + url + '" data-numposts="5" data-width="100%" data-colorscheme="light"></div>');
}

記述は正しいはずなんだけど、とFacebook Developer Communityに英語でそのことを投稿したら、該当バグレポートURLを教えてくれました。

Comments Plugin Is Now Forcing Fixed Width

https://developers.facebook.com/support/bugs/173395380238318

f:id:wanichan:20181013084519p:plain

ほぅ、今不具合が起きてるんですね。

早く直るといいんですけど。

回避策として、一旦550にして、data-width属性の代わりに単にwidth属性にしたらちゃんとなります。うーん?

  1. data-width="550"
  2. width="100%"