Facebook埋め込み方法（PagePlugin）

Facebookをホームページに埋め込みたい

Facebookの埋め込み方法

今更Facebookかよ、的な話題ではありますが、ちょうど自分のホームページにFacebookを埋め込んだのでスクリーンショット撮りつつ備忘録。

※Facebookの埋め込み方法は以前はライクボックスというプラグインだったのですが、2015年6月に無くなり、PagePluginに移行しています。

ちなみに何故Facebookを埋め込んだかの経緯↓

1. このブログの記事をホームページに表示させようかと思う
2. いちいち記事書く度にホームページにhtmlで更新するとか現実的ではない
3. PHPでブログのRSSフィードを読み込み自動表示させてみて一旦満足
4. そういえばFacebookページにIFTTTからブログの記事を自動投稿させてた事に気づく
5. Facebookページは作ってるには作ってるんですが、現状ほとんど活用してないので、ここいらで活用しとけば良いんじゃない？

というような流れがありました（笑）

Facebookをホームページに埋め込む方法

PagePlugin

さっくり埋め込み方法をメモっときます。

PagePluginにアクセスし、フォームに入力します。

PagePluginフォーム

各項目について

Facebook Page URL

埋め込みたいFacebookのURL

Tabs

表示するコンテンツの種類

タイムライン（timeline）イベント（events）メッセージ（messages）

Width

表示する幅（最大500px）

500と入力しても500pxと入力してもどちらでもOK

Height

表示する高さ

Use Small Header

チェックを入れるとヘッダー部分が小さくまとまります。

Adapt to plugin container width

チェックを入れると読み込みの際、親要素に合わせて表示幅が可変する。

ただし180px～500pxまでという謎仕様。

幅100％の指定で簡単に対応しろよと誰もが感じている部分。

しかも「読み込みの際」に適応するのでウィンドウサイズをリサイズした時にF5しないとサイズ変わりませんという…

ただしウィンドウリサイズの為だけに他のjavascriptとか余計なゴミをホームページにつけるのもどうかと思うので妥協するが吉。

Hide Cover Photo

チェックを入れるとヘッダー画像を非表示

Show Friends faces

チェックを入れると「いいね」をしてくれた人を非表示

項目を一通り入力したらGet Codeをクリック。

すると以下のようなコードが表示される。

PagePluginコード

1.のコードはbodyの開始タグの下にコピペ

2.のコードはFacebookを表示したい位置にコピペ

以上です。