FacebookフィードをWordPressに埋め込む方法は?
公開: 2022-01-06FacebookフィードをWordPressWebサイトに表示することは、ユーザーエンゲージメントを高めるための優れた方法です。 これにより、視聴者は、Facebookページまたはタイムラインで行った最近のアクティビティ(投稿)を知ることができます。 これにより、オーディエンスは、Webサイト、製品、またはサービスで行われた最新の更新をWebサイトから直接確認できるようになり、ビジネスのソーシャルリーチが拡大します。 さらに、Facebookフィードに「いいね」ボタンを追加して、視聴者がFBアカウントを高く評価できるようにすることができます。 このようにして、ランダムな訪問者をFacebookフォロワーに変換し、Facebookページのいいね数を増やすことができます。
FacebookフィードをWordPressWebサイトに埋め込むには2つの方法があります。 すなわち
- Facebook開発者ツールから
- WordPressプラグインを使用する
ここでは、WordPressWebサイトにFacebookフィードを埋め込むのに最適な方法を選択できるようにするための両方の方法について説明します。 そうは言っても、このチュートリアルを始めましょう。
Facebook Developer ToolからWordPressにFacebookフィードを追加する方法は?
デフォルトでは、Facebookには、Facebookページのタイムライン、イベント、およびメッセージを表示できる組み込みツール(Facebookページプラグイン)が付属しています。 これにより、オーディエンスがWebサイトから直接FBフィードを操作できるようになるため、WordPressWebサイトのエンゲージメント率が向上します。 また、フィードにFacebookの「いいね」ボタンを配置して、訪問者がFBページを高く評価し、Facebook投稿のソーシャルリーチを拡大できるようにすることもできます。
Facebook開発者ツール(デフォルトのFacebookページプラグイン)からWordPress WebサイトにFacebookフィードを埋め込むには、FacebookページのURLを入力します。

次に、フィードに追加するタブを追加します。 あなたは3つの異なるタブをすることができますすなわち
- タイムライン: Facebookページの投稿を時系列の逆順に表示します。
- イベント:あなたのビジネスがFacebookページに追加した今後のイベントを表示します。
- メッセージ:オーディエンスがWordPressWebサイトから直接Facebookページにメッセージを送信できるようにします。
注:タブを追加するには、タブ名をコンマ(、)で区切って配置する必要があります。 例:タイムライン、イベント、メッセージ。 ただし、タブを削除する場合は、タブ名から名前を削除するだけです。
次に、WordPressWebサイトに表示するFacebookフィードの幅と高さを割り当てることができます。
さらに、小さなヘッダーの表示オプションをオンまたはオフにしたり、写真をカバーしたり、プラグインのコンテナー幅を調整したり、FBの友達の顔を表示したりするオプションもあります。
完了したら、[コードの取得]をクリックしてJavaScriptSDKとiFrameコードを取得します。

次に、指定されたコードをコピーして、WordPress WebサイトでFacebookフィードを追加するページ、投稿、ウィジェット、またはフッターに貼り付けます。

以下のスクリーンショットのようなFacebookフィードをWordPressWebサイトで見ることができます。

WordPressプラグインを使用してWordPressWebサイトにFacebookフィードを追加する方法は?
上記の手順では、Facebookフィードのテキストの色や背景色をカスタマイズすることはできません。 したがって、Facebookフィードの表示を完全に制御したい場合は、この方法に従うことができます。
最初に行う必要があるのは、WordPressWebサイトにSmashBalloon SocialPostFeedプラグインをインストールしてアクティブ化することです。
プラグインをインストールすると、WordPressダッシュボードの左側のメニューにFacebookフィードが表示されます。 それをクリックして続行します。
プラグインで使用可能な設定を構成できる構成ページが表示されます。
まず、FacebookアカウントをWebサイトに接続します。 [Facebookアカウントを接続する]ボタンをクリックします。

次に、FacebookページまたはFacebookグループのどちらからフィードを表示するかを選択し、[続行]ボタンをクリックします。

Facebookにリダイレクトされ、Facebookページを選択するように指示されます。
フィードを表示するFBページを選択したら。 次に、[次へ]をクリックします。

Facebookページのさまざまな権限をオンまたはオフにできる権限タブが表示されます。 権限をオン/オフにしたら、「完了」ボタンをクリックします。

おめでとうございます。SmashBalloonWordPressをFacebookにリンクしました。 「 OK 」ボタンをクリックして続行します。

次に、下のFacebookページを選択して、[このページに接続]ボタンをクリックする必要があります。


FacebookページIDとFacebookアクセストークンは自動的に入力されます。 「設定の保存」をクリックして変更を保存します。
次に、WordPressページまたは投稿にFacebookフィードを追加します。
Facebookフィードを追加するには、 [投稿]> [すべての投稿]に移動して、新しい投稿を作成するか、既存の投稿を編集します。
次に、(+)アイコンをクリックして、WordPressブロックエディターにカスタムFacebookフィードブロックを追加します。

Facebookフィードのプレビューはコンテンツエディターですぐに確認できます。
Facebookフィードは次のようになります。

Facebookフィードのカスタマイズ
Smash Balloon Social Post Feedプラグインには、Facebookフィードを構成およびカスタマイズするためのさまざまなオプションが付属しています。 いくつかの重要なものを見てみましょう:
構成ページに移動するには、WordPressダッシュボードの[Facebookフィード]>[設定]ページに移動します。
次に、[設定]セクションまで下にスクロールします。 プラグインを構成するためのいくつかのオプションがあります。 さまざまな作成者によるページの投稿を表示するかどうか、表示する投稿の数、新しい投稿を確認するか、投稿を表示するタイムゾーンを選択できます。

Facebookフィード>[カスタマイズ]タブには、さまざまなカスタマイズ設定があります。 さまざまなタブから選択できるさまざまなオプションがあります。
FBフィードのヘッダーを追加するには、[全般]タブを下にスクロールして、[ヘッダーフィードを表示]にチェックマークを付けます。 表示するヘッダータイプを選択できます。

同様に、フィードの上または下に「いいね」ページボックスを追加して、「いいね」ボタンを追加し、Facebookページのようなサイトオーディエンスを有効にすることができます。

次は、投稿アイテムのスタイルを設定できる投稿スタイルです。 投稿は通常の方法で表示することも、ボックスで表示することもできます。

Facebookフィードをサイドバーに埋め込む:
または、Webサイトの投稿やページの代わりにFacebookフィードをサイドバーに埋め込むこともできます。
カスタムFacebookフィードを追加するには、WordPress管理ダッシュボードから[外観]>[ウィジェット]に移動します。 次に、Facebookページフィードを表示する場所にテキストウィジェットをドラッグします。 次に、プラグインで使用可能なショートコードを入力します。

ショートコードは、 Facebookフィード>設定から取得できます。

以下のスクリーンショットのように、Facebookフィードがサイドバーに表示されます。

単一のFacebook投稿をWordPressに埋め込む方法は?
上記の手順では、FacebookフィードをWordPressWebサイトに埋め込む方法について説明しました。 ただし、フィード全体ではなく、単一のFacebook投稿を追加する場合。 そのために、このプロセスに従うことができます。
WordPressWebサイトに埋め込みたいFacebookの投稿にアクセスします。
次に、各投稿の右側にある3つのドットボタン(…)をクリックして、[埋め込み]を選択します。

iframeコードを含むポップアップが表示されます。

コードをコピーして、Facebook投稿を表示するページ、投稿、ウィジェット、またはフッターに貼り付けます。

完了すると、下のスクリーンショットのように埋め込まれた投稿を見ることができます

結論:
これらは、FacebookフィードをWordPressWebサイトに埋め込むために使用できるさまざまな方法です。 これにより、Webサイトのエンゲージメント率を高め、Facebookページのフォロワー数を増やすことができます。
また、同様のステップバイステップガイドをお探しの場合は、カテゴリ「ヒントとチュートリアル」をご覧ください。