備忘録

Facebookをサイトに埋め込んで中央寄せにする方法

Facebookのページプラグインを使って、FacebookをWebサイトに埋め込みたい。PCでは500pxで表示、スマホ以下では横幅100%(width:100px)、中央寄せで表示させたい

このような疑問に答えます。

こんにちは、フリーランスエンジニアの涼です(@ryoblog2

本記事では、FacebookをPC版では500pxで表示、スマホ以下では横幅100%、中央寄せで表示する方法を紹介します。

下記に当てはまる方は必見です。

「Facebookのページプラグインのサイトで幅500pxを指定し、サイトに埋め込んだ。でもスマホだと画面からはみ出てしまう(横幅が500pxで固定されてしまう)」

「CSSに何も書かないと、自動的に横幅が決められてしまう。横幅100%で表示させたい」

「Facebookを埋め込んだけど中央寄せにできない」

※本記事は2020年2月時点の情報です。

FacebookをWebサイトに埋め込む手順

Facebookのページプラグインのサイトへ。

Facebookプラグインの埋め込み方法

下記の通り、指定しましょう。

・「FacebookページのURL」→任意のURL。

・「幅」は任意の数値。(PC画面で500pxで表示させるなら、500と入力しましょう) ※Facebookの横幅は500pxが最大値です。

・「高さ」は任意の数値。

・「plugin containerの幅に合わせる」はチェックを入れます。

指定後は、「コードを取得」をクリックします。

Facebookの埋め込みコード

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の横幅指定をやったらうまくいきませんでした。

以上です。これで万が一、実装できなければコメントください!

-備忘録

Copyright© Web制作ブログ , 2024 All Rights Reserved Powered by AFFINGER5.