3テラバイト

プログラム関連備忘録サイト。主にゲーム。

WordPress

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

投稿日:

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

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

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

https://developers.facebook.com/docs/plugins/page-plugin

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

埋め込みコードの設定

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

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

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

埋め込みコードの出力

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

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

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

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

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

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

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

-WordPress


comment

メールアドレスが公開されることはありません。

関連記事

no image

WordPress – サイトにTwitterのタイムラインを埋め込む

こんにちは、今日はWordPressサイトにTwitterのタイムラインを埋め込む方法についてまとめていきます。 確認環境 WordPress 5.3.4 Twitterのタイムラインを埋め込む方法 …

no image

WordPressで取得した投稿の配列をフィルタリングするフックthe_postsの使い方

こんにちは、今日はWordPressで取得した投稿の配列をフィルタリングすることができるフック、the_postsの使い方についてまとめていきます。 確認環境 WordPress 5.5.1 使い方 …

no image

WordPressサイトでユーザーのログイン履歴を確認できるプラグインUser Login Historyの使い方

こんにちは、今日はWordPressサイトでユーザーのログイン履歴を確認できるプラグイン、User Login Historyの使い方についてまとめていきます。 確認環境 WordPress 5.4. …

no image

WordPressのクエリ変数一覧

WordPressのパーマリンク設定を変更していない場合、記事のURLは以下のようになっているかと思います。https://santerabyte.com/?p=1 このクエリ変数によってどのページを …

no image

WordPressのブログロール関連フィルターフック一覧

こんにちは、今日はWordPressのブログロール関連フィルターフックについてまとめていきます。 確認環境 WordPress 5.5.3 フィルターフック一覧 フック名説明get_bookmarks …