このような疑問に答えます。
こんにちは、フリーランスエンジニアの涼です(@ryoblog2)
本記事では、FacebookをPC版では500pxで表示、スマホ以下では横幅100%、中央寄せで表示する方法を紹介します。
下記に当てはまる方は必見です。
「Facebookのページプラグインのサイトで幅500pxを指定し、サイトに埋め込んだ。でもスマホだと画面からはみ出てしまう(横幅が500pxで固定されてしまう)」
「CSSに何も書かないと、自動的に横幅が決められてしまう。横幅100%で表示させたい」
「Facebookを埋め込んだけど中央寄せにできない」
※本記事は2020年2月時点の情報です。
FacebookをWebサイトに埋め込む手順
Facebookのページプラグインのサイトへ。
下記の通り、指定しましょう。
・「FacebookページのURL」→任意のURL。
・「幅」は任意の数値。(PC画面で500pxで表示させるなら、500と入力しましょう) ※Facebookの横幅は500pxが最大値です。
・「高さ」は任意の数値。
・「plugin containerの幅に合わせる」はチェックを入れます。
指定後は、「コードを取得」をクリックします。
Step1のコードを、HTMLのbodyタグ直下へ貼り付けます。
Step2のコードを、HTMLの任意の箇所(Facebookを表示させたい場所)に貼り付けます。
HTMLとCSSの書き方
下記の通り、HTMLとCSSを書きます。
See the Pen
Facebook埋め込み(プラグイン)横幅100%で中央寄せ by masa (@websama)
on CodePen.
ポイントを挙げます。
・fb-wrapでfb-pageを囲む。fb-wrapに対して、width:100%を指定。結果、fb-pageも横幅100%になる。(fb-pageは親要素より広がらないという特性がある)
・!importantで強制的に中央寄せにする。(多分text-align:centerのみでも中央寄せになりますが、念のためmargin:0 autoも書いてます)
・他に余計なコードを書かないほうがいいです。CSSでiFrameの横幅指定をやったらうまくいきませんでした。
以上です。これで万が一、実装できなければコメントください!