WordPressサイトにFacebookページの埋め込みを行う方法

こんにちは、今日はWordPressサイトにFacebookページの埋め込みを行う方法についてまとめていきます。

Facebookページの埋め込みを行う手順

埋め込みコードを作成するページにアクセス

埋め込みコードはこちらのページで作成することができます。

埋め込みコードの設定

埋め込みコードの作成に際して、いくつか表示内容の設定項目があります。

下部にプレビューが表示されるため、確認しつつ以下の項目それぞれ設定を変更します。

設定項目	説明
FacebookページのURL	埋め込みを行いたいFacebookページのURLを入力します。
タブ	表示するタブをtimeline、events、messagesのいずれか、または複数の場合はコンマ区切りで入力します。
幅	埋め込みの幅を180〜500の範囲で入力します。
高さ	埋め込みの高さを70以上の数値で入力します。
スモールヘッダー	チェックを入れると小さいサイズのヘッダーを使用します。
plugin containerの幅に合わせる	チェックを入れると表示枠の幅に合わせます。
カバー写真を非表示にする	チェックを入れるとカバー写真が非表示になります。
友達の顔を表示する	チェックを入れると「いいね！」している友達の顔を表示します。

埋め込みコードの出力

設定が行えたらコードを取得ボタンを押下します。

すると以下のようなダイアログが表示されます。

JavaScript SDKタブにはJavaScriptで表示するコードが、IFrameタブにはiframeで表示するコードが表示されているため、いずれかのコードをコピーします。

ページに埋め込みコードの貼り付け

ここではJavaScriptのコードをウィジェットに貼り付けて表示してみます。

外観 > ウィジェットからテキストウィジェットを選択し任意の箇所に追加、そのウィジェットにテキストエディタの方でStep 1とStep 2両方のコードを貼り付けます。

こちらで保存してページの該当箇所を確認し、正常にFacebookページの埋め込みが行えているか確認します。