Diviテーマをご利用中で、WordPressサイトにFacebookフィードを追加する方法をお探しなら、ここがぴったりです。
Diviは最も人気のあるページビルダーの一つですが、適切なツールがなければ、ソーシャルメディアのライブフィードをモジュールに直接組み込むのは難しく感じられるかもしれません。
選択肢の中では、Facebookフィードを追加する最良の方法は、Facebook Feed Proのようなプラグインを使用することです。このプラグインは自動的にFacebookのコンテンツを取得し、サイトに埋め込み、フィードを最新の状態に保ちます。
このチュートリアルでは、コードを1行も書かずに、DiviのWordPressサイトにFacebookフィードを追加する方法を詳しくご紹介します。
この記事の内容
DiviでFacebookフィードを使う理由
Facebookのライブフィードをウェブサイトに直接埋め込むことで、コンテンツを常に最新の状態に保ち、サイト訪問者がソーシャルメディアでの活動に参加するよう促すことができます。
FacebookのフィードがDiviサイトに役立つ方法：
- エンゲージメントの向上：ウェブサイトを訪れるすべてのユーザーに、ブランドのFacebookコンテンツを表示することで、「いいね！」やシェア、フォロワーを増やすことができます。
- 「Grow Online」： Facebookページのフィードを追加することは、ウェブサイトの訪問者をコミュニティに誘い込むための効果的な方法です。
- ソーシャルプルーフ：Facebook上のレビューや体験談をウェブサイト上でソーシャルプルーフとして掲載することができます。これにより、訪問者は実際に製品を利用している人々がいることを確認でき、コンバージョン率の向上につながります。
- サイトのエンゲージメント向上： Facebookの写真や動画を簡単に掲載 でき 、サイトを訪問者にとってより魅力的なものにできます 。
DiviのFacebookフィードを表示するのに最適なツール
Diviには基本的なソーシャルフォロー用モジュールは用意されていますが、ネイティブで完全にカスタマイズ可能なFacebookフィード埋め込みツールは備わっていません。そこで、コンテンツを埋め込むには「Facebook Feed Pro」を使用します。
このユーザーフレンドリーなプラグインを使えば、ほんの数クリックでFacebookのフィードを作成、カスタマイズ、埋め込むことができます。コーディングは必要ありません。すぐに、DiviやElementorなどのページビルダーと完璧に連動します。
さらに、魅力的なソーシャルメディアフィードを構築するのに役立つ機能も満載だ：
- 迅速で簡単なセットアップ：プラグインのセットアップは簡単で、ほんの数分でFacebookのコンテンツフィードを投稿できるようになります。
- ライブ・フィード・エディター：カスタムCSS、HTML、コードは一切不要で、ビジュアル・カスタマイザーで簡単にフィードをカスタマイズできます。
- フィードの種類が豊富： Facebookページフィード、グループフィード、レビューフィード、アルバムフィード、ビデオフィード、その他多くのフィードから選択できます。
- スピードの最適化：このプラグインを使えば、サイトのスピードをこれまでと同じように保ちながら、好きなだけ多くのフィードを追加することができる。その上、より速いサイトはSEOにも最適です。
- カスタマーサポート：また、WordPressの専門家チームがスムーズなサービスを提供します。
これらの素晴らしい機能により、Facebook Feed Proは25万人以上のアクティブユーザーを持ち、 4.9/5つ星の評価を得ている。
実際、このプラグインの開発チームは、Instagram Feed Pro、YouTube Feed Pro、Reviews Feed Proなどの人気ツールもリリースしている。
Smash Balloonプラグインはすべて、Diviテーマやページビルダーと完璧に連動します。そのため、Diviのウェブサイトでより多くのエンゲージメントとコンバージョンを簡単に得ることができます。
DiviにFacebookを簡単に埋め込むには、Facebook Feed Proを今すぐ入手しましょう。
Divi WordPressウェブサイトにFacebookフィードを追加する方法
以下のステップバイステップのDiviチュートリアルに従うだけで、簡単にFacebookコンテンツを作成、カスタマイズし、サイトに埋め込むことができます。
ステップ1: Facebook Feed Proのインストールと有効化
まず、こちらからFacebook Feed Proを入手してください。
さあ、WordPressサイトにプラグインをインストールして有効化できます。
WordPressプラグインのインストール方法については、ステップバイステップのガイドをご覧ください。
ステップ2：Facebookページのフィードを作成する
ダッシュボードから「Facebookフィード」»「すべてのフィード」メニュー に移動し、「新規追加」をクリックしてください。
その後、Divi WordPressサイトに表示したいフィードの種類を選択してください。
ここでは、タイムラインフィード、レビューフィード、動画フィード、写真フィードなど、9種類のフィードが利用可能です。
お好みのフィードタイプを選び、「Next」 ボタンをクリックします。
このチュートリアルでは、タイムラインフィードを使用する。
ステップ3：Facebookプロフィールに接続する
Facebookのコンテンツをフィードに表示するには、Facebookページやグループをソースとして接続する必要があります。
「新規追加」ボタンを クリックして開始してください。
ソースをページか グループか選択するポップアップが表示されます。
必要なソースの種類を選択したら、「Connect」をクリックする。
それをクリックするとフェイスブックが開き、そこで接続したいページやグループを選ぶことができる。
続行するには、ポップアップでページまたはグループを選択し、「次へ」をクリックします。
これで、プラグインに読み取り専用 アクセス権を与え、フェイスブックのコンテンツを表示できるようになる。
もちろん、このプラグインはFacebookのコンテンツを読むだけで、変更を加えることはできないので、完全に安全である。
ポップアップで「完了」をクリックし、読み取り専用アクセスを確認します。
するとWordPressサイトに戻り、このソースを確認するポップアップが表示されます。
使用するFacebookページを選択し、「追加」をクリックしてください。
新しいフィードのFacebookへの接続を完了するには、「次へ」 ボタンをクリックします。
ステップ4：Facebookフィードをカスタマイズする
Facebook Feed ProはWordPressテーマのデザインを自動的にコピーするので、フィードがすぐに美しく見えます。
その上、このプラグインは、新しく作成したフィードのためにプロがデザインしたテーマをインポートすることができます。5つのオプションから選ぶことができます：
- デフォルト
- モダン
- ソーシャルウォール
- 概要
- オーバーラップ
お好みのオプションを選択し、「Next」をクリックします。
さらに、フィードテンプレートをインポートして、ウェブサイトの投稿とヘッダーのレイアウトを即座に設定することもできます。
続行するには、テンプレートを選択し、「Next」をクリックします。
ライブフィードエディターで新しいフィードを開くことができます。
ライブフィードエディタは、左側にすべてのカスタマイズオプションがあり、右側にフィードのライブプレビューがあります。
フィードタイプ、フィードレイアウト、カラースキーム、ヘッダースタイル、投稿レイアウトなどを簡単に設定できます。
まずは、左側のフィードレイアウトオプションを 選択してください。
そうすれば、DiviウェブサイトのFacebookコンテンツのレイアウトを変更することができる。
新しいFacebookコンテンツフィードのさまざまなレイアウトが表示されます：リスト、グリッド、メイソンリー、カルーセルです。
以下、それぞれのレイアウトを見てみよう：
Facebookの投稿を リストレイアウトで1行にまとめて表示できます。
これは、訪問者に一度に1つの記事に集中してもらいたい場合に最適な選択です。
次のオプションはグリッドレイアウトで 、Facebookの投稿が行と列で表示されます。
Facebookの写真や動画を一度にたくさん見せたいなら、このオプションがおすすめだ。
Facebookのコンテンツを異なるカラムで表示したい場合は、メーソンリーレイアウトを選ぶことができる。
訪問者にあなたのウェブサイトと交流してもらいたいですか？あなたの投稿をFacebookのカルーセルスライダーに入れるカルーセルレイアウトが あります。
最後にSave ボタンをクリックして新しいレイアウトを保存します。
その後、カスタマイズ ボタンで戻って、残りのカスタマイズオプションを見ることができます。
次に、ライブフィードエディタを使ってFacebook Diviフィードのヘッダーを設定します。
左のヘッダーオプションをクリックしてください。
そうすると、ヘッダーを有効または無効にするオプションが表示されます。
その下にあるFacebook Feed Proでは、2つのヘッダーオプションから選ぶことができる：
- ビジュアル： カバー写真、プロフィール写真、グループやページに関する情報を表示します。
- テキスト ソーシャルメディアフィードのトップに表示されるカスタム見出しを書きます。
以前のように、ヘッダーのデザインを選択したら、保存をクリックできます。
ヘッダーのスタイル、投稿の要素、投稿のレイアウト、フィードの余白、背景、いいね！ボックスなど、フィードの残りの部分をカスタマイズできます。
ステップ5：Divi WordPressサイトにFacebookフィードを埋め込む
ライブフィードエディターを使ってFacebookの投稿をサイトに埋め込むのはとても簡単です。まず、右上隅にある「埋め込み」ボタンを クリックします。
あなたのフィードのユニークなショートコードを含むポップアップが表示されます。続行するには、コピー ボタンをクリックしてください。
このコードを使用して、WordPress Diviサイトにフィードを埋め込むことができます。
その後、ダッシュボードからページ " 新規追加に 進み、新しいWordPressページを作成することができます。
新しいページで、「Divi Builderを使用」 ボタンをクリックします。
WordPressの投稿を使用することもできます。ダッシュボードから「投稿」→「新規追加 」を選択し、「Divi Builderを使用」を選択します。
Diviビルダーを開いたら、3つのオプションがあります：
- 作り始める：ゼロからページを作り始める
- レイアウトを見る： 事前に作成されたレイアウトのデザインをインポート
- ページを選択します：既存のページのデザインをコピーする
3つのオプションのいずれかをクリックしてください。
Start Buildingオプションを選択すると、空白のページが表示されます。
ここから、Diviの投稿やページの編集をすぐに始めることができます。
レイアウトをブラウズ]オプションを使用すると、利用可能なすべてのページレイアウトをブラウズできる新しいポップアップが表示されます。
気に入ったレイアウトがあれば、それをクリックすればいい。
そうすると、レイアウトの詳細 ポップアップが表示されます。使用したいレイアウトがあれば、「このレイアウトを使用する」をクリックします。
Choose Page オプションを選択すると、既存のすべてのページレイアウトがリストアップされたポップアップが表示されます。
そこで、これらのページレイアウトのどれかをクリックして続けることができる。
これで、Smash BalloonのFacebookフィードをDiviビルダーに追加できます。緑色の小さなプラスアイコン（+）をクリックして、行の挿入 ポップアップを開きます。
次に、ポップアップのオプションから好みの行のタイプをクリックする。
行を選択したら、プラスアイコン（+）を クリックして、新しいDiviモジュールを追加します。
新しいポップアップで、検索バーに「code」と入力してコードモジュールを見つけ、それをクリックする。
その後、コードフィールドに移動し、先ほどのコードを貼り付けるだけで、このWordPress DiviサイトにFacebookのフィードを埋め込むことができる。
最後に、一番下のチェックアイコンを クリックする。
これで、Divi WordPressサイトにFacebookフィードを追加できました。WordPress用の最高のFacebookプラグインの1つであるFacebook Feed Proを使えば、わずか数クリックでFacebookフィードを追加できます。
ウェブサイトを開けば、フェイスブックのコンテンツがウェブサイトの訪問者にどのように見えるかを見ることができる。
そうだ！
DiviのWordPressサイトにFacebookフィードを追加する方法がわかりました。ステップに従うだけで、関連するFacebookコンテンツをすぐに訪問者に提供することができます。
Facebook Feed Proを使えば、エンゲージメントを高め、コンバージョンを増やし、ブランドを売り込むのに役立つカスタムソーシャルフィードを作成、カスタマイズ、追加することができます。
これらはすべて、5 つの簡単なステップで実行できます。
- Facebook Feed Proをウェブサイトに追加する
- 新しいFacebookフィードを作成する
- フィードをFacebookページに接続する
- テーマ、テンプレート、デザインを選択する
- 好きなDiviページにフィードを追加します
試してみませんか？今すぐFacebook Feed Proを入手しましょう！
DiviでもTwitterを使いたいですか？TwitterのDiviフィードをウェブサイトに追加する方法をご覧ください。
Diviフィードの一般的な問題のトラブルシューティング
フィードが正しく表示されない場合は、以下のよくある原因を確認してください：
- モジュールが見つからない場合： Divi内で「カスタムFacebookフィード」モジュールが見つからない場合は 、WordPressのキャッシュをクリアし、Smash Balloonプラグインが最新バージョンに更新されていることを確認してください。
- Blank Feed：Facebookページが「公開」設定になっており、年齢や国による制限が設定されていないことを確認してください。Facebook APIにより、非公開のコンテンツは表示されません。
- 書式設定の競合：テキストの表示がおかしい場合は、Diviのモジュールデザイン設定がSmash Balloonのタイポグラフィ設定を上書きしていないか確認してください。Diviモジュールのテキスト設定をデフォルトに戻してください。
その他のソーシャルメディア・マーケティングのチュートリアルとガイド
- Facebookの投稿を簡単にスケジュールする方法（ステップバイステップガイド）
- フォロワーを増やすインスタグラムのベストリンクツール
- あなたのWordPressサイトに最適なページビルダープラグイン（厳選）
- あなたのYouTubeショートが再生回数を稼げない理由［＋すべきこと］
- WordPressのベストソーシャルメディアプラグイン（エキスパートピック）
