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 – Cookieポリシー表示を行うプラグインGDPR Cookie Consentの使い方

こんにちは、今日はWordPressでCookieポリシー表示を追加することができるGDPR Cookie Consentの使い方についてまとめていきます。 インストール方法 プラグイン > 新 …

no image

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

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

no image

WordPressでURLにクエリパラメータを付与する方法

こんにちは、今日はWordPressでURLにクエリパラメータを付与する方法についてまとめていきます。 確認環境 WordPress 5.5 クエリパラメータを付与する WordPressでURLにク …

no image

WordPressでカスタム投稿タイプを追加する方法

こんにちは、今日はWordPressでカスタム投稿タイプを追加する方法についてまとめていきます。 確認環境 WordPress 5.5.1 カスタム投稿タイプの追加 カスタム投稿タイプを追加するには、 …

no image

WordPressで投稿の更新時に表示されるメッセージのフィルターフックpost_updated_messagesの使い方

こんにちは、今日はWordPressで投稿の更新時に表示されるメッセージのフィルターフック、post_updated_messagesの使い方についてまとめていきます。 確認環境 使い方 以下の公式マ …