WordPressでカスタムFacebookフィードを作成する方法

ウェブサイトを構築する際、ブランドのFacebookフィードをそのページのいずれかに追加したい場合があります。これにより、訪問者はサイトを離れることなく最新の更新、発表、コミュニティのやり取りを確認できます。

手動の方法は存在しますが、Facebookコンテンツを表示するには最も効率的ではありません。

多くの読者からこの機能について問い合わせがあり、様々なオプションを検討した結果、カスタムFacebookフィードにはSmash Balloonを採用することにしました。使いやすく、機能が豊富で、あらゆるレベルのWordPressユーザーに適しています。

このガイドでは、実績のある方法でWordPressにカスタムFacebookフィードを作成する方法を説明します。

WordPressでカスタムFacebookフィードを作成する理由

ソーシャルメディア統計レポートによると、Facebookの月間アクティブユーザーは30億人を超えています。これは、Facebookが世界最大のソーシャルメディアサイトであることを意味します。ウェブサイトの所有者であれば、すでにFacebookページやグループを作成して、オーディエンスと交流しているかもしれません。

ただし、あなたのウェブサイトにしかアクセスしない人は、あなたのFacebook投稿を見ることはできません。カスタムFacebookフィードを追加することで、グループやページで何が起こっているかを訪問者に表示できます。

これにより、特にFacebookに動画や画像などのマルチメディアコンテンツを投稿する場合、ウェブサイトをより魅力的で興味深いものにすることができます。

Facebookページやグループを宣伝する素晴らしい方法でもあり、これによりFacebookのいいね！を増やすのに役立ち、フォロワーを増やすことができます。

それを踏まえて、WordPress.orgサイトにカスタムFacebookフィードを追加する方法を見ていきましょう。以下のクイックリンクを使用して、このステップバイステップガイドをナビゲートできます。

ステップ1：Smash Balloon Custom Facebook Feedプラグインをインストールする

WordPressウェブサイトにカスタムFacebookフィードを追加する最も簡単で初心者向けの方法は、Smash Balloon Custom Facebook Feedプラグインを使用することです。

このFacebookプラグインを使用すると、コンテンツやコメントをサイトに直接表示したり、複数のFacebookフィードからの投稿を組み合わせたりすることもできます。また、Facebookレビューを埋め込むことやコミュニティ投稿をウェブサイトに表示することで、強力なソーシャルプルーフを簡単に表示できます。

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

この投稿では、Smash Balloon のプロバージョンを使用します。これにより、Facebook フィードに動画や写真を表示したり、さまざまなレイアウトを選択したり、投稿タイプに基づいてフィードをフィルタリングしたりできます。

ただし、予算に関係なくWordPress用のカスタムFacebookフィードを作成できる無料バージョンもあります。

有効化したら、Facebook Feed » 設定 に移動し、「ライセンスキー」フィールドにライセンスキーを入力する必要があります。

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

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

ステップ2：FacebookページまたはグループをWordPressに接続する

Smash Balloon Custom Facebook Feed を使用すると、異なるFacebookページやグループから複数のフィードを作成できます。フィードをマージしてカスタムフィードを作成することもできます。

最初のフィードを作成するには、Facebookフィード » すべてのフィードに移動し、「新規追加」をクリックします。

Smash Balloonを使用すると、Facebookアルバム、タイムラインからの投稿、動画、イベントなどを表示できます。このガイドでは「タイムライン」Facebookフィードを作成しますが、好きなフィードタイプを選択できます。

フィードタイプを選択したら、「次へ」ボタンをクリックします。

次に、コンテンツを取得するFacebookページまたはグループを選択する必要があります。

開始するには、「新規追加」をクリックします。

次の画面で、WordPressにFacebookグループフィードを埋め込むか、Facebookページフィードを作成するかを選択します。

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

これにより、Facebookアカウントにログインして、フィードに使用したいページまたはグループを選択できるポップアップが開きます。

選択後、「次へ」ボタンをクリックします。

それが完了すると、FacebookはSmash Balloonがアクセスできるすべての情報と実行できるアクションを表示します。

Smash BalloonのFacebookアカウントへのアクセスを制限するには、スイッチのいずれかをクリックして「はい」から「いいえ」に切り替えるだけです。ただし、これによりソーシャルメディアフィードに表示できるコンテンツに影響が出る可能性があることに注意してください。

これを念頭に置いて、これらのスイッチはすべて有効のままにしておくことをお勧めします。

準備ができたら、「完了」をクリックします。

しばらくすると、WordPressウェブサイトがFacebookに正常にリンクされたというメッセージが表示されるはずです。「OK」をクリックできます。

これが完了すると、Smash Balloon は自動的にWordPressダッシュボードに戻ります。

ステップ3：WordPressでカスタムFacebookフィードを作成する

WordPress ウェブサイトにリンクしたグループまたはページが表示されたポップアップが表示されます。ソースの横にあるラジオボタンを選択し、「追加」ボタンをクリックするだけです。

ポップアップを誤って閉じてしまっても、慌てる必要はありません。タブを更新するだけでポップアップを再度開くことができます。

これが完了すると、Facebookフィード » すべてのフィードページに戻ります。

前と同様に、「新規追加」ボタンをクリックし、次にタイムライン、写真、動画など、作成したいカスタムFacebookフィードのタイプを選択します。

次に、「次へ」をクリックします。「ソースを選択」の下に、Facebookグループまたはページがオプションとして表示されます。

ページまたはグループを選択し、「次へ」をクリックしてください。

フィードの開始点として使用したいテンプレートを選択できるようになりました。これらのテンプレートはすべて完全にカスタマイズ可能なので、WordPressブログやウェブサイトに完全に一致するように微調整できます。

「デフォルト」テンプレートを使用しますが、お好みのテンプレートを使用できます。

デザインを選択したら、「次へ」ボタンをクリックしてください。

Smash Balloon は、ソースと選択したテンプレートに基づいてFacebookフィードを作成します。これは素晴らしいスタートですが、フィードがウェブサイトに表示される方法を微調整したい場合があります。

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

Smash Balloon Custom Facebook Feedプラグインを使用すると、フィードを編集するための多くのカスタマイズオプションが利用できます。これを念頭に置いて、どのような変更が可能かを確認する価値があります。

Facebookフィード » すべてのフィード画面で、作成したばかりのフィードを見つけ、小さな鉛筆のような形をした「編集」ボタンをクリックします。

これによりフィードエディタが開かれ、カスタムFacebookフィードがウェブサイトにどのように表示されるかのプレビューが表示されます。ここでは、埋め込まれたFacebook動画、ステータス更新、およびWordPressウェブサイトに表示されるその他のすべてのコンテンツを確認できます。

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

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

この画面では、さまざまなレイアウトを切り替えたり、フィードの高さを変更したりできます。「カルーセル」レイアウトを選択すると、レスポンシブスライダーを作成することもできます。

変更を加えるとプレビューが自動的に更新されるため、さまざまな設定を試して、ウェブサイトに最適なものを見つけることができます。

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

ただし、モバイルデバイスは通常、画面が小さく処理能力も低いため、タブレットやスマートフォンでは投稿数を少なく表示したい場合があります。これを行うには、「投稿数」の下にある「モバイル」フィールドに別の数値を入力するだけです。

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

様々なレイアウトを試すことで、訪問者がどのデバイスを使用しているかに関わらず、見栄えの良いカスタムフィードを作成できます。

デフォルトでは、Facebookフィードはデスクトップコンピューターと比較して、スマートフォンやタブレットでは列数が少なくなります。これにより、すべてのコンテンツが小さな画面に快適に収まります。

ただし、WordPressウェブサイトのモバイルバージョンをテストした後、スマートフォンやタブレットでの列の表示方法に満足できない場合があります。その場合は、「列」セクションの数値を変更して列を調整できます。

変更内容に満足したら、メニュー上部にある「カスタマイズ」リンクをクリックしてください。

これで、Smash Balloon のメインエディタに戻ります。

次に、左側のメニューで「カラー スキーム」をクリックして、Facebookフィードに追加できるさまざまな色を確認できます。

デフォルトでは、Smash BalloonはWordPressテーマから継承されたカラースキームを使用しますが、「ライト」または「ダーク」を選択したり、独自のカスタムカラースキームを作成したりすることもできます。

たとえば、テーマの背景から目立つようにテキストの色を変更する場合があります。

デフォルトでは、Smash Balloonはフィードにヘッダーを追加します。これは、Facebookのプロフィール写真とページまたはグループの名前です。これにより、単にWordPressにFacebookのタイムラインを表示するだけでなく、追加のコンテキストを提供できます。

表示方法を変更するには、左側のメニューで「ヘッダー」をクリックします。

この画面では、ヘッダーのサイズや色を変更したり、Facebookのプロフィール写真を非表示または表示したりできます。

ヘッダーを完全に削除したい場合は、トグルをクリックして青色（有効）から灰色（無効）に切り替えます。

次に「投稿」画面です。ここで、カスタム Facebook フィード内の個々の投稿の外観を変更できます。

たとえば、通常のスタイルとボックススタイルの切り替え、背景色の変更、ボックスシャドウの追加などが可能です。

デフォルトでは、Smash BalloonはFacebookの「いいね！」ボタンをフィードに含みません。

より多くの訪問者にFacebookページをフォローしてもらうために、エディタの左側メニューから「いいね！ボックス」を選択してこのボタンを追加することをお勧めします。

その後、「有効にする」ボタンをクリックするだけで、青色に変わります。これで、プレビューの下部までスクロールすると、「いいね！」ボタンが表示されます。

このエリアはさまざまな設定でスタイル設定できます。たとえば、ボタンをフィードの上部または下部に表示するかどうか、Facebookページのカバーフォトを含めるかどうかを選択できます。

「いいね！」ボタンの外観に満足したら、「さらに読み込むボタン」画面に進むことができます。

「さらに読み込む」ボタンは、訪問者がFacebookフィードをさらにスクロールするように促します。

このため、ボタンの背景色、テキストの色、ラベルを変更して、より目を引くようにしたい場合があります。

もう1つのオプションは、「読み込み中」ボタンを完全に削除することです。「有効化」トグルをクリックしてグレー表示にすることで削除できます。

Facebookフィードが時間的制約のあるものである場合、「もっと読み込む」ボタンを無効にすると便利です。たとえば、主にFacebookイベントカレンダーについて投稿している場合、訪問者は以前の投稿をスクロールする必要がないかもしれません。それらはもはや関連性がないためです。

カスタムFacebookフィードの設定が完了したら、変更を保存するために「保存」をクリックすることを忘れないでください。

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

ステップ5：カスタムFacebookフィードをWordPressに追加する

FacebookフィードをWordPressに埋め込むには、「保存」の横にある「埋め込み」ボタンをクリックします。

Facebookフィードを追加するには、ショートコードまたはブロックの2つのオプションが表示されます。

私たちの経験では、ブロックを使用してFacebookフィードを挿入する方が簡単です。これを行うには、「ページに追加」をクリックするか、テーマにウィジェット対応領域がある場合は「ウィジェットに追加」をクリックします。

ガイドでは、例として「ページに追加」ボタンを使用します。

これで、Facebookフィードを挿入するページを選択する必要があります。

1つを選択して「追加」をクリックするだけです。

あなたはブロックエディターにリダイレクトされます。その後、「+ブロックを追加」ボタンをクリックして、Facebookフィードブロックを検索してください。

この段階では、最適な場所にドラッグ＆ドロップするだけです。

それが完了したら、Facebookフィードソースを選択してください。

このように:

Facebookフィードが表示されるはずです。

変更を確定するには、「更新」をクリックしてください。

ショートコードメソッドを使用したい場合は、前の「フィードの埋め込み」ポップアップからショートコードをコピーできます。

次に、WordPressのページ、投稿、またはウィジェットを編集する際に、コンテンツエディターのショートコードブロックにショートコードを貼り付けます。完了したら、「更新」をクリックしてください。

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

ボーナスのヒント：WordPressにさらにソーシャルメディアフィードを追加する方法

WordPressにFacebookのステータス投稿を埋め込みたい場合、タイムラインを表示したい場合、Facebookアルバムを表示したい場合などは、Custom Facebook Feedが最適なWordPressプラグインです。

ただし、多くのウェブサイトには、YouTubeチャンネル、Twitterプロフィール、Instagramアカウントなど、複数のソーシャルメディアアカウントがあります。各プラットフォームで独自のコンテンツを作成している場合は、そのコンテンツをWordPressウェブサイトに表示するのが理にかなっています。

無料のSmash Balloon Feeds for YouTubeプラグインを使用して、WordPressにYouTubeチャンネルの最新動画を表示することができます。

月間アクティブユーザーが10億人を超えるInstagramは、製品、サービス、ブログ投稿を宣伝するのに最適な場所です。

Instagramアカウントをお持ちの場合は、カスタムInstagramフィードを作成して、任意のWebページ、投稿、またはウィジェット対応領域に追加できます。さらに、WordPressにInstagramのショッピング可能な画像を追加することもできます。 

この記事がWordPressにカスタムFacebookフィードを追加するのに役立ったことを願っています。また、WordPressユーザー向けのソーシャルコマースの完全ガイドや、WordPress経由でFacebookに自動投稿する方法に関する記事もご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。