WordPress に Facebook グループフィードを埋め込む方法

Facebookグループフィードを埋め込むことは、コミュニティのやり取りを紹介し、最新情報を共有し、ウェブサイトのコンテンツを新鮮に保つための素晴らしい方法となります。

この統合は、オンラインコミュニティ間の橋渡しに役立ち、訪問者のエンゲージメントを高めることができます。

ウェブサイトへのトラフィックを促進するために、さまざまなソーシャルメディアプラットフォームを利用してきました。そのため、ソーシャルメディアフィードを追加する際の課題を理解しています。

この記事では、WordPressにFacebookグループフィードを簡単に追加する方法をステップバイステップでご紹介します。

WordPressサイトにFacebookグループのコンテンツを追加する理由

Facebook は世界で最も人気のあるソーシャルメディアプラットフォームであり、当社の  マーケティングリサーチ統計によると、月間アクティブユーザーは 29 億人です。

これにより、Facebookグループは、ブランドをすでに知っている人々とのエンゲージメントや新しいオーディエンスとのつながりに最適になります。

実際、私たちの WPBeginner Engage Facebook グループには 98,000 人以上のアクティブユーザーがおり、驚異的なペースで成長しています。

Facebook グループは、コミュニティを構築し、ロイヤルティの感覚を生み出し、ユーザーとの肯定的な関係を築くのに役立ちます。

グループに参加したユーザーがいる場合、オンライン広告に費用をかけずに、ブログ記事、会社のお知らせ、さらにはWooCommerceの商品を宣伝できます。

Facebookグループを作成したら、それを宣伝して人々を誘導したいと思うでしょう。Facebookグループを成長させる最良の方法は、グループフィードをWordPressウェブサイトに埋め込むことです。

このように、サイトの訪問者はあなたがFacebookに投稿する素晴らしいコンテンツをすべて見ることができます。これにより、あなたのグループをチェックしたり、コンテンツにエンゲージしたり、さらには「参加」ボタンをクリックしたりすることを奨励できます。

これを踏まえて、WordPressにFacebookグループフィードを埋め込む方法を見てみましょう。

カスタム Facebook フィードプラグインのインストール方法

Facebookグループフィードを埋め込む最良の方法は、Smash Balloon Facebook Feedを使用することです。

このプラグインは広範囲にテストされており、WordPress サイトに Facebook の動画、コメント、レビュー、コミュニティ投稿などを簡単に埋め込めることがわかりました。詳細については、Smash Balloon の完全なレビューをご覧ください。

Facebook グループに動画を投稿すると、Smash Balloon を使用すると、ユーザーはサイトを離れることなくライトボックスポップアップでメディアを視聴できます。

グループフィードを埋め込んだ後、新しい投稿はサイトに自動的に表示されます。これにより、通常の訪問者にとっても、サイトを常に最新の状態に保つ簡単な方法となります。

まず、Smash Balloon Facebook Feed プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するガイドをご覧ください。

有効化したら、**Facebook Feed » Settings** ページにアクセスし、「ライセンスキー」フィールドにライセンスキーを入力してください。

この情報は、Smash Balloon ウェブサイトのアカウントで見つけることができます。

キーを入力したら、「有効化」ボタンをクリックしてください。

Smash BalloonアプリをFacebookグループに追加する方法

WordPress ウェブサイトに表示したい Facebook グループに Smash Balloon の Facebook アプリを追加する必要があります。

注意: Facebook APIのセットアップ方法により、Smash BalloonはアプリをFacebookグループに追加した後に作成された投稿のみを表示できます。

これを踏まえて、まずアプリをインストールしましょう。新しいタブでFacebookにログインし、Facebookグループに移動してください。

次に、左側のメニューで「グループ設定」をクリックします。

その後、「高度な管理設定」セクションまでスクロールする必要があります。

ここで、「アプリ」の横にある鉛筆アイコンをクリックします。

これにより、このグループに追加したすべてのアプリが表示されるポップアップが開きます。

Smash Balloonアプリをインストールしたいので、「アプリを追加」をクリックする必要があります。

検索バーに「Smash Balloon WordPress」と入力します。

目的のアプリが表示されたら、クリックしてください。

アプリがアクセスできるすべての情報と実行できるアクションが表示されるポップアップが表示されます。

アプリをインストールしてもよろしければ、「追加」をクリックしてください。

しばらくすると、Smash BalloonアプリがFacebookグループに追加されたというメッセージが表示されます。

Smash BalloonをFacebookグループに接続する

さて、FacebookページをWordPressに接続する時間です。これを行うには、Facebookフィード » すべてのフィードにアクセスし、「新規追加」をクリックします。

Smash Balloonを使用すると、写真、イベント、動画、アルバムなどを表示できます。

Facebookグループフィードを埋め込みたいので、「タイムライン」をクリックし、「次へ」を選択します。

その後、タイムラインを取得する Facebook グループを選択する必要があります。

開始するには、「新規追加」をクリックしてください。

次の画面で、「グループ」の横にあるラジオボタンを選択します。

その後、「Facebookに接続」をクリックするだけです。

これによりポップアップが表示され、Facebook アカウントにログインできます。次に、使用したいグループを選択します。

1つ以上のグループの横にあるチェックボックスをオンにした後、「次へ」をクリックするだけです。

ここで、Smash Balloon WordPress アプリをインストールするように求めるポップアップが表示されるはずです。

このアプリはすでにインストールされているため、「完了」をクリックして進むことができます。

WordPressでFacebookグループフィードを作成する方法

FacebookグループをSmash Balloonに追加したので、オプションとして表示されます。グループを選択してクリックし、「次へ」をクリックするだけです。

この画面では、WordPress でカスタム Facebook フィードを作成するために使用するテンプレートを選択できます。

これらのテンプレートはすべて完全にカスタマイズ可能なので、Facebookグループからのステータス更新、動画、写真を表示する方法に応じてデザインを微調整できます。

「シンプルメーソンリー」テンプレートを使用していますが、お好きなテンプレートを選択できます。

Smash Balloon は、Facebookグループと選択したテンプレートに基づいてソーシャルメディアフィードを作成します。

これは良い出発点ですが、Smash Balloonには、WordPressブログでのグループフィードの外観をカスタマイズするために使用できる多くの設定があります。

Facebook グループフィードのカスタマイズ方法

Smash Balloonプラグインを使用すると、フィードがウェブサイトに表示される方法をカスタマイズするための多くの方法があります。どのような変更が可能か調べる価値はあります。

Facebookフィード » すべてのフィード画面で、グループフィードを見つけて、鉛筆のようなアイコンの「編集」ボタンをクリックします。

これにより、Smash Balloonフィードエディタが開かれ、WordPressでのFacebookタイムラインのプレビューが表示されます。

左側には、投稿がサイトに表示される方法をカスタマイズするために使用できるさまざまな設定が表示されます。これらの設定のほとんどは自明ですが、いくつかの重要な領域を簡単に説明します。

使用しているテンプレートを変更したい場合は、「テンプレート」をクリックするだけです。

次に、「変更」ボタンを選択します。

まず、「フィードレイアウト」をクリックして、グループ投稿の表示方法を変更できます。

この画面では、マソンリーレイアウトとリストレイアウトを切り替えたり、フィードの高さを変更したりできます。変更を加えるとプレビューが自動的に更新されるため、さまざまな設定を試して、Facebookグループに最適な表示を見つけることができます。

デフォルトでは、Facebookグループフィードはデスクトップコンピューターとモバイルデバイスで異なる数の投稿を表示します。

右上隅にあるボタンの行を使用して、デスクトップコンピューター、タブレット、スマートフォンでフィードがどのように表示されるかを確認できます。

WordPress ウェブサイトのモバイル版をテストした後、スマートフォンやタブレットに表示する投稿数を変更したい場合があります。

この変更を行うには、「投稿数」セクションを見つけて、「モバイル」フィールドに別の番号を入力するだけです。

「列」設定を変更して、スマートフォンやタブレットで表示される列数を少なくしたい場合もあります。

例えば、以下の画像では、デスクトップでは 3 列、タブレットでは 2 列、モバイルデバイスでは 1 列にコンテンツを分割しています。

レイアウトに満足したら、「カスタマイズ」リンクをクリックします。

これにより、メインのSmash Balloonエディタに戻り、次の設定画面である「Color Scheme」に進む準備が整います。

デフォルトでは、Smash Balloon は WordPress のテーマと同じ配色を使用しますが、この画面では「ライト」または「ダーク」の配色に切り替えることができます。

その他のオプションとして、「カスタム」を選択して独自の配色をデザインし、コントロールを使用して背景色を変更したり、WordPress のテキストの色を変更したりできます。

グループフィードの上にヘッダーを追加できます。これには、グループのプロフィール写真や名前などのコンテンツを含めることができます。これにより、訪問者は表示されているコンテンツを理解し、Facebookでグループをどのように見つけられるかを把握するのに役立ちます。

ヘッダーセクションを追加するには、左側のメニューの「ヘッダー」をクリックするだけです。

この画面で、「有効にする」スライダーをクリックして、グレーから青に切り替えます。

ヘッダーセクションを追加した後、コントロールを使用してヘッダーのサイズを変更したり、背景色を変更したり、Facebookプロフィール写真を非表示または表示したりできます。

ヘッダーをいつでも削除したい場合は、「有効にする」トグルをクリックしてオフにします。

その後、左側のメニューから「投稿スタイル」を選択することで、グループフィード内の個々の投稿の外観を変更できます。

開始するには、サムネイル、半幅、全幅の投稿レイアウトから選択できます。

 サムネイル レイアウトは、小さな画像で WordPress Facebook フィードを表示します。

次の画像でその例を見ることができます。

代わりに、より大きな画像を表示したいですか？

次に、投稿レイアウトとして半幅を選択できます。

最後に、可能な限り大きな画像でFacebookフィードを表示したい場合は、全幅レイアウトを選択できます。

WordPressウェブサイトでどのように表示されるかの例を次に示します。

全体的なレイアウトに満足したら、各投稿内の特定のコンテンツを微調整する時期です。

開始するには、「投稿スタイル」をクリックします。

この画面では、通常のレイアウトとボックスレイアウトを選択できます。

「ボックス」を選択した場合、各投稿に色付きの背景を作成できます。また、境界線の半径を大きくして角を丸め、ボックスシャドウを追加することもできます。

「レギュラー」を選択した場合、さまざまなソーシャルメディア投稿を区切る線の太さと色を変更できます。

次の画像では、グループフィードに太い線を追加し、色を変更しました。

メイン設定画面に戻ることで、各投稿内の個々の部分をカスタマイズすることもできます。

再度、「投稿スタイル」を選択しますが、今回は「個々の要素を編集」を選択します。

これで、投稿に含まれるSmash Balloonのさまざまなコンテンツ（投稿者、日付、共有リンクボックスなど）が表示されます。

投稿からコンテンツの一部を削除するには、ボックスのチェックを外すだけです。

各コンテンツの表示方法も、クリックすることでカスタマイズできます。

例えば、次の画像では、「いいね！」、「共有」、「コメント」などの「投稿アクション」リンクのサイズと色を変更する設定を確認できます。

「テキストをカスタマイズ」フィールドに入力することで、「Facebookで表示」のテキストを変更することもできます。

デフォルトでは、Smash Balloon はフィードに Facebook の「いいね！」ボタンを追加しません。このボタンがあると、訪問者はグループに参加しやすくなるため、フィードに追加したい場合は「いいね！ボックス」の設定を選択すると良いでしょう。

次に、「有効にする」をクリックするだけで、トグルが青色に変わります。

これで、「Position」ドロップダウンを使用して、いいねボックスをグループフィードの下または上に配置できます。

これらの設定を使用して、ボックスの幅を変更したり、グループのカバー写真を追加したりすることもできます。

大量のフォロワー数は、より多くの人々が Facebook グループに参加することを奨励する素晴らしいソーシャルプルーフです。それを念頭に置いて、「ファンを表示」スイッチをオンにすることをお勧めします。

「いいね！」ボタンの設定に満足したら、「もっと読み込むボタン」の設定に進むことができます。

「もっと読み込む」ボタンは、訪問者がフィードをさらにスクロールするための簡単な方法を提供します。このコンテンツを楽しんだ場合、Facebook グループに参加することを決定する可能性があります。

これを踏まえて、このボタンを目立たせるために、背景色、ホバー状態、テキストの色を変更することを検討してください。

このボタンはデフォルトで「さらに読み込む」と表示されますが、「テキスト」フィールドにカスタムメッセージを入力して追加できます。

Smash Balloonには、WordPressから離れることなく、訪問者がグループの動画を視聴したり、写真を詳しく見たりできるライトボックス機能があります。

訪問者は、写真または動画のサムネイルをクリックするだけでライトボックスポップアップを開くことができます。

その後、FacebookアルバムをWordPressに埋め込むのと同様に、矢印を使用してフィード内の残りの画像や動画をスクロールできます。

デフォルトのライトボックスをカスタマイズするには、左側のメニューから「ライトボックス」を選択するだけです。

ここで、ライトボックスのテキスト、リンク、背景の色を変更できます。

ライトボックスポップアップにより、訪問者はフィードを簡単に閲覧でき、Facebook グループにアクセスせずに写真や動画をスクロールできます。

Facebookグループへの訪問者を増やしたい場合は、ライトボックス機能を無効にすることをお勧めします。これを行うには、「有効にする」トグルをクリックして、青からグレーに変わるようにします。

これで、訪問者がグループフィードのいずれかの写真または動画をクリックすると、新しいタブでFacebookグループに移動します。

Facebook グループフィードの外観に満足したら、変更を保存するために「保存」をクリックすることを忘れないでください。

これで、このフィードをWordPressウェブサイトに追加する準備ができました。

WordPressにFacebookグループフィードを埋め込む方法

ブロック、ウィジェット、またはショートコードを使用して、FacebookグループフィードをWordPressに追加できます。

Smash Balloonを使用して複数のフィードを作成した場合、ブロックまたはウィジェットを使用する場合は、フィードのコードを知る必要があります。

この情報を取得するには、Facebookフィード » すべてのフィード にアクセスし、「ショートコード」の下のテキストをコピーしてください。

次の画像では、 custom-facebook-feed feed=1を使用する必要があります。

Facebookグループフィードをページまたは投稿に埋め込みたい場合は、「カスタムFacebookフィード」ブロックを使用できます。

Facebook フィードを埋め込みたいページまたは投稿を開きます。「+」アイコンをクリックして新しいブロックを追加し、「カスタム Facebook フィード」と入力し始めます。

Facebook ブロックが表示されたら、クリックして ページまたは投稿 に追加します。

デフォルトでは、ブロックにはSmash Balloonのフィードのいずれかが表示されます。これがFacebookグループフィードでない場合は、右側のメニューで「ショートコード設定」セクションを見つけてください。

これで、custom-facebook-feed feed=1コードを追加し、「変更を適用」ボタンをクリックできます。

その後、ページを発行または更新するだけで、グループフィードがウェブサイトで公開されます。

ウィジェット対応エリア（サイドバーやそれに類するセクションなど）にフィードを追加するという別の方法もあります。これにより、訪問者はウェブサイトのどこにいてもグループフィードを確認できるようになります。

開始するには、WordPressダッシュボードの外観 » ウィジェットに移動し、青い「+」ボタンをクリックするだけです。

それが完了したら、「カスタムFacebookフィード」と入力して検索バーに入力します。

適切なウィジェットが表示されたら、フィードを表示したい場所にドラッグします。

このウィジェットには、Smash Balloonで作成したフィードのいずれかが表示されます。

これが Facebook グループのフィードでない場合は、フィードのコードを「ショートコード設定」ボックスに入力します。次に、「変更を適用」をクリックします。

ウィジェットをライブにするには、［更新］ボタンをクリックしてください。詳細については、WordPressでウィジェットを追加して使用する方法の完全ガイドを参照してください。

最後に、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応エリアにFacebookグループフィードを埋め込むことができます。

Facebookフィード » すべてのフィードに移動し、「ショートコード」列のすべてのコードをコピーします。このコードは、任意のショートコードブロックに追加できます。

詳細については、WordPressにショートコードを追加する方法に関する詳細ガイドをご覧ください。

注意: ブロック対応テーマを使用している場合は、フルサイトエディターを使用して、「カスタムFacebookフィード」ブロックをサイトのどこにでも追加できます。

ボーナス：WordPressを使用してFacebookの「いいね！」を増やす

オンラインストアやビジネス用の Facebook ページがある場合、ユーザーにアクセスしてもらい、Facebook コンテンツに「いいね！」をしてもらうことで、ソーシャルプルーフを追加し、より多くのフォロワーを獲得したいと思うでしょう。

これを行う1つの方法は、Facebookグループのフィードをウェブサイトに追加することです。ただし、ブログ記事の横にFacebookの「いいね！」ボタンと共有ボタンを追加して、ユーザーがコンテンツを友人と共有することを奨励することもできます。

Facebookのフォロワーをさらに増やすために、Uncanny Automatorを使用できます。

テスト中、このツールは非常に使いやすいことがわかりました。ウェブサイトに投稿を公開するたびに Facebook 投稿が自動的に公開されるワークフローを設定することができました。

詳細については、WordPressからFacebookに自動投稿する方法に関するチュートリアルをご覧ください。WordPressからFacebookに自動投稿する方法。

または、Uncanny Automatorの完全なレビューをご覧ください。

Facebookグループでプレゼントやコンテストを実行したり、投稿へのコメントに返信したり、ウェブサイトにFacebookイベントカレンダーを追加したりすることもできます。

これは、ソーシャルプルーフを追加し、Facebookグループまたはページのフォロワーを増やすのに役立ちます。

その他の提案については、WordPress を使用してより多くの Facebook の「いいね！」を獲得するための簡単な方法に関する初心者向けガイドをご覧ください。

この記事が、WordPress ウェブサイトに Facebook グループを追加する方法を学ぶのに役立ったことを願っています。また、ソーシャルメディアのチートシートや、ブログに最適な Facebook プラグインもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。