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で通常リクエスト時に発生するアクションフック一覧

こんにちは、今日はWordPressで通常リクエスト時に発生するアクションフックについてまとめていきます。 確認環境 WordPress 5.5.1 フック一覧 フック名説明muplugins_loa …

no image

WordPress投稿リスト列のフィルターフックmanage_{$post_type}_posts_columnsの使い方

こんにちは、今日はWordPressで投稿リスト列のフィルターフック、manage_{$post_type}_posts_columnsの使い方についてまとめていきます。 確認環境 WordPress …

no image

WordPressで投稿、ページ、添付ファイル、カテゴリの管理者アクション一覧

こんにちは、今日はWordPressで投稿、ページ、添付ファイル、カテゴリの管理者アクションについてまとめていきます。 確認環境 WordPress 5.5.1 フック一覧 フック名説明post_su …

no image

WordPressでユーザー一覧を取得する関数get_usersの使い方

こんにちは、今日はWordPressでユーザー一覧を取得することができる関数get_usersの使い方についてまとめていきます。 確認環境 WordPress 5.5.1 引数 キー説明blog_id …

no image

STINGER8で執筆者の表示を削除する方法

こんにちは、今日はWordPressテーマのSTINGER8で投稿に表示されている、執筆者の表示を削除する方法についてまとめていきます。 必要ファイルを親テーマからコピー 投稿者の表示は以下のファイル …