Facebookページをサイトに埋め込む方法
Facebookは世界中で使用されているSNSとして有名ですが、それとは別にFacebookページという機能があります。
主にマーケティングで使用されるランディングページのようなもので、Webサイトを運営している方やネットサービスを提供している事業者にとって、Facebookで集客する便利な機能です。
そんなFacebookページは、リンクするだけでなく好きなWebページに埋め込むウィジェットが用意されていて、自分のサイトにFacebookページを表示させることができます。
埋め込みを行う方法は簡単で、埋め込みたいページに埋め込み用HTMLを貼り付けるだけです。
Facebookページを埋め込むには、Facebookソーシャルプラグインにアクセスします。
![Facebookソーシャルプラグインにアクセス→[ページプラグイン]をクリック](http://s3.ap-northeast-1.amazonaws.com/static.aprico-media.com/production/imgs/images/000/052/584/original.png?1587314831)
アクセスしたらソーシャルプラグイン名が一覧表示されているので、その中の[ページプラグイン]をクリックします。
少し下の方にスクロールするとFacebookページのURLを入力する項目があるので、その項目に埋め込みたいページのURLを貼り付けます。
![下にスクロールして[コードを取得]をクリック](http://s3.ap-northeast-1.amazonaws.com/static.aprico-media.com/production/imgs/images/000/052/586/original.png?1587314834)
入力したらさらに下にスクロールして[コードを取得]をクリックします。
これで、埋め込みタグが表示されます。
2つのコードが表示されますが、Facebookページを埋め込む場合は両方ともWebページに貼り付ける必要があります。どちらか片方だと表示されないので注意してください。
実際にタイムラインのFacebookページを埋め込んだものがこちらです。
この方法であれば、別途プラグインを用意する必要もなく、Web開発やデザインの知識がない人でもコピーペーストだけで埋め込めます。
ここではタイムラインを埋め込みましたが、「タブ」に"message"を入力すればメッセージを、"events"にすればFacebookページで公開されている今後の予定を表示することができます。
中央寄せしたい場合はFacebook埋め込みコードを囲う形で
<div style="text-align:center">埋め込みコード</div>
を与えましょう。
この画像のようにタイムラインとメッセージ・イベントを組み合わせて表示させることも可能です。
Facebookページをサイトに埋め込むときの注意点
Facebookページを埋め込む上で少し注意しなければならないポイントがあります。
サイト表示に関わる大切なことですので、順番に見ていきましょう。
レスポンシブ非対応
Facebook のソーシャルプラグインで埋め込めるFacebookページはレスポンシブ対応していません。
そのため、レスポンシブ対応する場合は自分で行う必要があります。埋め込みはiframeタグで行われているため、iframeタグに「width:100%」を与えたらいいのではと思うかもしれませんが、実はそうはいかないのです。
そのため、スマホ表示ではみ出さないようにしたいのであれば、埋め込みコード生成ページで幅を指定するようにしましょう。
おすすめは300pxです。現行のスマホの幅は320～340px程度でサイズが計算される(解像度とは別)ため、幅300pxならはみ出して不格好になることもないでしょう。
padding・marginの影響で300pxでもはみ出る場合はもっと幅を小さくしてください。
埋め込めるのはあくまでFacebookページ
この機能で埋め込めるのはあくまでFacebookページです。個人アカウントのタイムラインやメッセージを埋め込むことはできません。
ですので、Twitterみたいに自分のアカウントのタイムラインを埋め込もうと思ったらFacebookページを作成し、Facebookページ側で投稿していかないといけないので注意してください。