Oxygen BuilderにFacebookフィードを埋め込む5つのステップ(+スクリーンショット!)
ホーム ブログ Oxygen BuilderにFacebookフィードを埋め込む5つのステップ(+スクリーンショット!)

Oxygen BuilderにFacebookフィードを埋め込む5つのステップ(+スクリーンショット!)

Oxygen BuilderにFacebookフィードを埋め込む手順

オキシジェン・ビルダーのウェブサイトにFacebookのフィードを追加する迅速で簡単な方法をお探しですか?

Facebookの投稿を手作業で埋め込もうとすると、本当に頭痛の種になり、膨大な時間がかかってしまいます。また、コードの扱いに慣れていない場合は、始めるのが難しいかもしれません。

そこで私たちがお手伝いします。ソーシャルメディアフィードにおける10年以上の経験を活かし、Oxygen Builderに魅力的なFacebookフィードを埋め込む方法をご紹介します。

このチュートリアルでは、Facebook Feed Proという素晴らしいWordPressプラグインを使って、できるだけ簡単にできるようにします。

この記事の中で

Oxygen BuilderでFacebookフィードを埋め込む最も簡単な方法

Oxygen BuilderサイトにFacebookのフィードを設置する最も簡単な方法は、Facebook Feed Proを使用することです。

フェイスブック・フィード・プロ ホームページ

この素晴らしいツールを使えば、あなたのサイト上でFacebookのフィードを作成、デザイン、表示することがこれまで以上に簡単になります!

Facebook Feed ProがOxygen Builderサイトに最適な理由は以下の通りです:

  • 超簡単セットアップ: ガイドされたフローに従うだけで、数分であなたのサイトにクールなFacebookフィードが表示されます。
  • たくさんのフィードタイプ:タイムラインの投稿、写真、アルバム、ライブストリーム、レビューなど、様々な種類のFacebookフィードから選べます。
  • 自動的に美しく:すべてのFacebookフィードは、Oxygen Builderウェブサイトの厳選されたデザインに自動的にマッチします。
  • 簡単なカスタマイズ: ライブプレビュー付きのビジュアルカスタマイザーがあるので、変更を追跡して簡単かつ正確にカスタマイズできます。
facebookフィードプロライブエディタ
  • クイックデザイン:ワンクリックで使える既製のテンプレートとテーマが用意されているので、美しいフィードを素早く作成できます。
  • サイトを高速に保つ:このプラグインは軽量なので、Facebookの投稿がたくさんあっても、サイトの読み込みがとても速くなります。(高速なサイトはSEOにも有利です!)。
  • 充実したサポート:WordPressのエキスパートによる一流のサポートチームが、どんな質問にもお答えします。

ご覧の通り、Facebook Feed Proは、Facebookのコンテンツを埋め込むということに関しては、簡単にナンバーワンのオプションです。

Oxygen BuilderにFacebookフィードを追加する準備はできましたか?こちらからFacebook Feed Proを入手してください

オキシジェン・ビルダーのウェブサイトにFacebookフィードを設置する理由

オキシジェン・ビルダーのサイトにFacebookのコンテンツを追加することが、なぜ賢い方法なのかをご説明します:

  • Facebookページを育てる:Facebookの投稿をウェブサイトで直接紹介することは、より多くの「いいね!」やコメント、フォロワーを獲得する素晴らしい方法です。
  • 売上アップ:商品ページにフェイスブックのリアルなカスタマーレビューを表示することで、コンバージョンと売上を直接高めることができます。
  • 訪問者を釘付けに:Facebookのクールな写真やビデオを共有することで、人々の注目を集め、サイトに長く滞在してもらうことができます。
  • SEOの向上:Facebookの投稿に適切なキーワードを埋め込むことで、検索結果でウェブサイトが上位に表示され、ブランドがより多くの人に届くようになります。

オキシジェンビルダーにFacebookフィードを埋め込む方法(5つの簡単なステップ!)

準備はできましたか?以下の簡単なステップに従うだけで、すぐに素晴らしいFacebookフィードをオンラインで公開できるようになります!

ステップ1: Facebook Feed Proのインストールと有効化

まず、Facebook Feed Proを入手しましょう。手に入れたら、Oxygen Builderが動作するWordPressサイトにプラグインをインストールし、有効化してください。

この部分にもう少し助けが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

ステップ2:Oxygen Builder用のFacebookフィードを作成する

次に、WordPressダッシュボードのFacebookフィード " すべてのフィードメニューに移動します。

新規追加」 ボタンをクリックして開始する。

ガイド付きフローを使用して新しいFacebookフィードを追加する

そうすると、Facebook Feed Proがどのようなフィードを作りたいかを聞いてきます:

  • タイムライン
  • 写真
  • ビデオ
  • アルバム
  • イベント
  • レビュー
  • シングル特集記事
  • シングル・アルバム

このガイドでは、タイムラインオプションを選びます。選択したら、「次へ」をクリックします。

facebookフィードタイプを選択

ステップ3:新しいフィードをFacebookに接続する

フィードを作成したら、Facebookページをリンクしましょう。こうすることで、プラグインが自動的に最新の投稿を取り込み、フィードの鮮度を保つことができます。

そこで、新規追加ボタンをクリックして続行する。

facebookフィード・プロに新しいソースを追加

その後、Facebookに接続する ボタンをクリックする。

これでウェブブラウザでフェイスブックが開き、簡単に自分のページに接続できるようになる。

elementorサイトをfacebookに接続する

プラグインはFacebookを開き、「読み取り専用」のアクセスを要求します。つまり、あなたの情報を見ることはできるが、何かを変更することはできないので、完全に安全である!

Continue ボタンをクリックして接続する。

フェイスブックへのアクセス

その後、ウェブサイトに戻ることになる。

ここから、接続したいFacebookページを選択し、「追加」をクリックする。

フェイスブック・フィードのソースを確認する

あなたのアカウントがソースとして追加されました。あなたのサイトを離れることなく、新しいフィードを素早く選択することができます。

このソースを選択し、Nextをクリックして次に進む。

facebookのソースを選んでから続ける

ステップ4:Facebookフィードをカスタマイズする

FacebookのフィードをOxygen Builderのサイトにぴったり合うようにするのです!しかも、数回クリックするだけです。

テーマを選ぶ

5つの異なるテーマから選ぶことができ、それぞれにクールなデザインが施されている:

  • デフォルト
  • モダン
  • ソーシャルウォール
  • 概要
  • オーバーラップ

オプションから好きなテーマを選び、「次へ」をクリックします。

facebookフィードのテーマを選択する

テンプレートを選ぶ

テーマの後は、テンプレートを選ぶ。これにより、新しいソーシャルフィードでの投稿とヘッダーの見え方が変わります。

前回同様、テンプレートを選択し、「次へ」をクリックする。

facebookフィードプロテンプレート

ビジュアル・カスタマイザーを使う

Facebook Feed Proは、ビジュアルカスタマイザーであなたのフィードを表示します。ここで、レイアウト、色、ヘッダー、ボタンなどを変更できます。

右側にはライブプレビューが表示され、変更を追跡するのにとても便利です!

ライブ・フィード・エディター

手始めに、ここでFacebook投稿のレイアウトを変更してみよう。

左側のフィードレイアウトオプションをクリックします。

フィードレイアウト facebook elementor フィード

Facebookの投稿をフィードに表示する方法は4種類あります:

  • リスト:投稿を1列に表示。Facebookの各投稿にフォーカスを当てるのに最適。
  • 石組み:複数のカラムを使ってFacebookの投稿を表示します。たくさんのコンテンツを表示するのに最適です。
  • カルーセル:Facebookのカルーセルのように、あなたの投稿をスワイプして見てもらうことができます。あなたのOxygen Builderサイトをよりインタラクティブにします。

レイアウトを選んだら、「保存」ボタンをクリックします。

フェイスブックフィードプロのレイアウトオプション

投稿数やその他のオプションもここから変更できる。

レイアウトの設定が終わったら、「カスタマイズ」 ボタンをクリックします。

フェイスブックの主なカスタマイズ・オプションに戻る

Facebookフィードの色を変えたい?

左側の配色オプションを選択します。

配色オプションの選択 facebook elementor

このプラグインを使用すると、4つの異なる配色から選択することができます:

  • Themeから継承します:Oxygen Builderサイトの色をコピーします。
  • 明るい:明るい白地に濃い文字。
  • Dark:暗い背景に明るい文字。
  • カスタム:すべての色を自分で選ぶことができます。

色を設定したら、「保存」ボタンをクリックします。

elementorのfacebookフィードの配色オプション

投稿スタイル、ヘッダースタイル、ボタンデザインなど、他のカスタマイズオプションもチェックし続けることができる。

デザインに満足したら、次のステップに進む前に「保存」をクリックします。

ステップ5:Oxygen BuilderにFacebookフィードを埋め込む

Oxygen BuilderにFacebookフィードを追加する準備はできましたか?

右上の埋め込みボタンをクリックしてください。

facebookのelementorフィードを埋め込む

小さなポップアップで、さまざまな埋め込みオプションが表示されます。ここからFacebookのフィードをページ、サイドバー、フッターに追加できます。

Oxygen Builderの場合は、Copyをクリックするだけです。

elementorのfacebookフィード用ショートコードをコピーする

次に、Facebookフィードを表示させたいOxygen Builderページを開きます。

テンプレートをお持ちではないですか?ダッシュボードのPages " Add Newから Edit Templateをクリックして新規作成できます。

酸素ビルダーのページを編集する

オキシジェン・ビルダーに入ったら、左上のプラス(+)アイコンをクリックしてこのページにコンテンツを追加します。

酸素ビルダーに新要素を追加

上部の検索バーに「ショートコード」と入力する。

次に、ショートコード・ブロックをドラッグして、ページの右側にドロップ します。

ショートコード・ブロックの追加オプションが開きます。

先ほどコピーしたショートコードをFull shortcodeフィールドにペーストするだけです。

酸素ビルダーにfacebookフィードのショートコードを挿入する

最後にページを公開すると、Oxygen Builderサイト上にFacebookのフィードが表示されます。

今、あなたのウェブサイトでページを開くと、あなたのFacebookのコンテンツが訪問者にどのように見えるかを見ることができます。

facebookフィードの埋め込み例

それがすべてだ!

以下のステップに従うだけで、Oxygen Builderのウェブサイトに美しいFacebookフィードを簡単に埋め込むことができます。

これで、訪問者とのつながり、商品の販売、SEO対策など、さまざまなことができるようになります。

Facebook Feed Proのおかげで、Oxygen BuilderサイトをFacebookとシームレスに連携させるのはとても簡単です。

Facebookフィードを簡単に追加する準備はできましたか?今すぐFacebook Feed Proを手に入れましょう!

ソーシャルメディア・フィード・チュートリアルとハック

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。