Facebookページをサイトに埋め込む方法
Facebookは世界中で使用されているSNSとして有名ですが、それとは別にFacebookページという機能があります。
主にマーケティングで使用されるランディングページのようなもので、Webサイトを運営している方やネットサービスを提供している事業者にとって、Facebookで集客する便利な機能です。
そんなFacebookページは、リンクするだけでなく好きなWebページに埋め込むウィジェットが用意されていて、自分のサイトにFacebookページを表示させることができます。
埋め込みを行う方法は簡単で、埋め込みたいページに埋め込み用HTMLを貼り付けるだけです。
Facebookページを埋め込むには、Facebookソーシャルプラグインにアクセスします。
![Facebookソーシャルプラグインにアクセス→[ページプラグイン]をクリック](http://cdn2.aprico-media.com/production/imgs/images/000/052/584/original.png?1587314831)
![下にスクロールして[コードを取得]をクリック](http://cdn2.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ページを埋め込む上で少し注意しなければならないポイントがあります。
サイト表示に関わる大切なことですので、順番に見ていきましょう。
レスポンシブ非対応
そのため、レスポンシブ対応する場合は自分で行う必要があります。埋め込みはiframeタグで行われているため、iframeタグに「width:100%」を与えたらいいのではと思うかもしれませんが、実はそうはいかないのです。
おすすめは300pxです。現行のスマホの幅は320～340px程度でサイズが計算される(解像度とは別)ため、幅300pxならはみ出して不格好になることもないでしょう。
padding・marginの影響で300pxでもはみ出る場合はもっと幅を小さくしてください。
埋め込めるのはあくまでFacebookページ
この機能で埋め込めるのはあくまでFacebookページです。個人アカウントのタイムラインやメッセージを埋め込むことはできません。
ですので、Twitterみたいに自分のアカウントのタイムラインを埋め込もうと思ったらFacebookページを作成し、Facebookページ側で投稿していかないといけないので注意してください。