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 フック一覧 フック名説明post_su …

no image

WordPressで指定タイプの現在時刻を取得する関数current_timeの使い方

こんにちは、今日はWordPressで指定タイプの現在時刻を取得する関数、current_timeの使い方についてまとめていきます。 確認環境 WordPress 5.5.1 使い方 current_ …

no image

WordPress管理画面にメタボックスを追加する方法

こんにちは、今日はWordPress管理画面にメタボックスを追加する方法についてまとめていきます。 確認環境 WordPress 5.5.1 追加方法 メタボックスの追加にはadd_meta_box関 …

no image

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

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

no image

WordPressデータベースのoptionsテーブルレコード一覧

こんにちは、今日はWordPressサイトのデータベースのoptionsテーブルに追加されるレコードについてまとめていきます。 確認環境 WordPress 5.5.1 レコード一覧 option_n …