facebookのページプラグインをレスポンシブで埋め込む方法

Web制作

facebookのページプラグインをレスポンシブで埋め込む方法

2018年11月17日 8:00 

facebookのページプラグインをレスポンシブで埋め込む方法

おはようございます!社員Aです👩

今回はWEB制作されている方ならよく使っているであろうFacebookのページプラグインをレスポンシブで埋め込む方法についてご紹介します。

ページプラグインの導入は簡単にできるのですが、レスポンシブ対応で横幅がはみ出てしまったり、スマートフォン時の対応に苦戦することが多いので、簡単にレスポンシブ対応できる方法をまとめました。



 

埋め込みコードの取得

まずは、facebook for developersからFacebookページプラグインを生成します。

  1. FacebookページのURL
  2. タブ
  3. 高さ
  4. その他オプション(スモールヘッダーなど)

を設定し、最下部の「ソースを取得」ボタンをクリックすることでソースを取得できます。



ソースコードを加工してサイトに貼り付ける

STEP2とSTEP3でそれぞれコードが生成されていますが、STEP2のJavaScript SDKはbody開始タグ直下に記述します。

STEP3のソースコードは、Facebookの埋め込みを表示したい場所に設置しますがこの時の貼り付け方が重要になります。

通常であれば生成されたソースコードをそのままサイトに貼り付けるかと思いますが、今回は上記のように貼り付けます。

公式のソースから変更した点は下記です。

  1. 全体をシングルクォーテーション( ‘ )で囲む
  2. data-width部分を「data-width=”‘ + w + ‘”」に変更
  3. data-height部分を「data-height=”‘ + h + ‘”」に変更

上記の貼り付けが終わったら、下記も一緒に貼り付けます。

 

CSSを追記する

サイトにソースコードを貼り終わったあとは、CSSを追記します。

 

JSを追記する

下記JSも追記します。

10行目の return〜の部分に先程加工したソースコードを貼り付けます。

これにより、ソースコードで改変した「data-width=”‘ + w + ‘”」や「data-height=”‘ + h + ‘”」をデバイス幅に応じて自動で変更してくれるため、レスポンシブの対応が出来るという仕組みになります。

 

まとめ

ページプラグインがあれば、Facebookの公開ページをウェブサイトに簡単に埋め込んで宣伝することができ、サイトの訪問者はFacebookでの操作と同様にFacebookページに「いいね!」したりシェアしたりできますので、おすすめです。

ただ、レスポンシブの対応に苦戦しがちなので備忘録としてまとめました。

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!