備忘録

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

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

5月のつぶやき

コロナが長引いてますね。
緊急事態宣言が延長されることに。。
家にずっといると退屈ですよね。

動画や本で暇つぶししませんか?

下記のサービスはどれも30日以内に解約すれば完全無料です。0円で試せるのでぜひ。

プライム・ビデオでは14,000本の動画が見放題です。「君の膵臓をたべたい」がイチオシ。浜辺 美波がかわいい。

Audible(オーディブル)では本を1冊聴けます。ホリエモンの多動力がおすすめ。

Amazon Music Unlimitedでは音楽が聴き放題です。Official髭男dismやback numberの曲も。自分はブログ書くときに聴いてます。
※今は期間限定で3ヶ月無料です。チャンス。
  • この記事を書いた人

まさ

Webサイト制作のフリーランスエンジニア。WordPress、SEOが専門。東大大学院経済→富士通営業→iSara6th。広島市在住の30歳。TOEIC960。フリーランス5ヶ月目で月収40万円達成。ブログではWeb製作やプログラミング学習法について書きます。Web製作のご相談をお待ちしております。

おすすめ記事

1

プログラミングの独学が大変。1人で勉強してるけどモチベーションが上がらない。Progateは難しいし。分からないところを質問できる相手もいない。2時間かけてググっても答えが見つからない。このままだと挫 ...

2

Photoshopでデザインカンプを作れるようになりたい。おすすめの方法があれば教えて。by コーダー このような疑問に答えます。 記事の内容 Photoshopでデザインカンプを作る方法をUdemy ...

-備忘録

Copyright© まさWEB , 2020 All Rights Reserved Powered by AFFINGER5.