WordPressにFacebookフィードのカルーセルを追加する方法(5つの手順)
ホーム ブログ WordPressサイトにFacebookのスライダーやカルーセルを追加する方法(2026年)

WordPressサイトにFacebookのスライダーやカルーセルを追加する方法(2026年)

WordPressサイトにFacebookスライダーを追加する方法

簡単な答え:Facebookでは、埋め込みフィード用のスライダーやカルーセルレイアウトは提供されていないため、プラグインが必要です。「Smash Balloon Facebook Feed Pro」でフィードを作成し、「フィードレイアウト」を「カルーセル」に設定してください。この設定を行うだけで、静的なフィードがスライド式のフィードに変わります。

ここでは、スライダーとカルーセルは同じものです。このプラグインでは「カルーセル」と呼んでいます。スライダーやスライドショーで検索した場合は、それがお探しのオプションです。

所要時間:約10分。スマートフォンで表示が崩れないよう、デスクトップ版とモバイル版で列数を別々に設定します。

訪問者がスクロールできるスライド式の Facebook フィードを導入して、WordPress サイトをより活気のあるものにしたいですか?

Facebook スライダーを追加すると、最新の投稿を目を引くインタラクティブな方法で表示できるため、サイトを最新の状態に保ち、より多くのフォロワーが Facebook ページに接続するように促すことができます。

しかし、デフォルトのツールを使用して Facebook スライダーを設定すると、混乱が生じたり、必要なカスタマイズが不足したりする場合があることをご存知でしたか?

あるビジネスオーナーと一緒に仕事をしていたとき、そのオーナーは Facebook のコンテンツを目立たせようと何時間も苦労したが、結局は魅力のない基本的なフィードしか作れなかったことを覚えています。

Smash Balloon では、数百万の WordPress ユーザーがソーシャル メディア フィードをシームレスに紹介できるようサポートしてきた経験を活かし、誰でも使用できるシンプルなソリューションを作成しました。

この記事では、2026年版の手順でFacebookスライダーをWordPressサイトに追加する方法を詳しく解説します。

さらに、セットアップは素早く簡単に行えます。コーディングやデザインの専門知識は必要ありません。

この記事で

Facebookフィードのカルーセルスライダーを作成する最も簡単な方法

Facebookのプラットフォームを使って、ウェブサイトに投稿を埋め込もうとしたことはありますか?限られたことしかできません:

  • Facebookフィードのデザインをカスタマイズするオプションはありません 。背景色を変えたいですか?フィードのヘッダーを変更したいですか?できません。
  • フィードをカルーセルやスライドショーで表示したいですか?Facebookではこのようなことはできません。
  • それには多くのリスクが伴う。コードの一部を変更し、WordPressに手動で追加する必要があります。つまり、技術に精通していなければ、誤ってウェブサイトを壊してしまう可能性があるということだ。
  • カスタマーサポートがない 。迷ったり、道に迷ったりした?自分で解決してください。

WordPressでFacebookフィードスライダーを表示する最も簡単な方法は?信頼できるWordPressプラグイン、例えばSmash Balloon Facebook Feed Proを利用しましょう。

Facebook Feed Proは、WordPress初心者に最適な非技術系プラグインです。

このプラグインを使えば、専門的な知識は必要なく、あなたのウェブサイトにFacebookのフィードを簡単に表示することができます!専門的な知識は必要ありません!このプラグインは、あなたのためにすべてのハードワークを行います。

WordPressのための最高のFacebookフィードプラグインとして、それは軽く、超高速であるように設計されています。このプラグインは強力な機能をたくさん持っていますが、あなたのウェブサイトを遅くすることはありません。

このプラグインの便利な機能をいくつかご紹介しましょう:

  • 数分で設定できます:WordPress初心者ですか?技術に詳しくなくても、プラグインを簡単にインストールし、カルーセル拡張機能を追加して、数回クリックするだけでFacebookのフィードカルーセルを表示できます。
  • 1つのプラグインで、Facebookコンテンツの選択肢が豊富:このプラグインの素晴らしい点は、Facebookページ、イベントカレンダーフィード、アルバム、Facebookリール、動画、さらには顧客レビューまで、WordPressサイトに追加できることです!
  • カスタマイズが超簡単:Facebookフィードのデザインやレイアウトを、ブランドのビジュアル・アイデンティティに合わせて変更したいですか?わかりにくいコードに触れる必要はありません。ライブフィードカスタマイザーを使うだけです。
フェイスブック用ライブフィードエディタ
  • レスポンシブ:モバイルフレンドリーです。さらに、どのような画面サイズやデバイスでも美しく表示されます。
  • 高速ローディング:プラグインは効率的にデータをリクエストするので、Facebookフィードのサイトへの読み込みが速くなります。
  • スマートなバックアップシステム:Facebookが一時的にダウンしても、ウェブサイトの訪問者はFacebookのスライダーフィードを見ることができます。

プラグインの便利な機能に加え、Facebook Feed Proの一番の魅力は、その背後にある素晴らしいカスタマーサポートチームだ。

実際、このプラグインは25万人以上のユーザーから 4.9/5つ星の 確かな評価を得ています。メッセージを送るだけで、この効率的でフレンドリーなチームがあなたに手を差し伸べるために最善を尽くします。

カスタム・フェイスブック・フィード・プロについてのレビュー

WordPressにFacebookスライダーを追加して、Facebookページのエンゲージメントを高める準備はできましたか?今すぐFacebook Feed Proを始めましょう

手順を1つの段落にまとめておきます。「Smash Balloon Facebook Feed Pro」をインストールして「Carousel」拡張機能を有効にし、フィードを作成してFacebookページを連携させ、フィードのレイアウトを「Carousel」に切り替えた後、ページやサイドバーに埋め込みます。

5つのステップ、所要時間はおよそ10分、どの段階でもコーディングは一切必要ありません。

まずは、Facebook Feed Proプラグインをこちらから入手してください。カルーセル拡張機能もこちらからダウンロードできます

Smash Balloonのすべてのプラグインとエクステンションにアクセスしたいですか?All-Access Bundleをご利用ください。

すべてのプラグインをコンピューターにダウンロードし終わったら、次のステップはWordPressサイトにインストールすることです。

やり方がわからない?WordPressのプラグインをインストールする方法については、こちらのステップバイステップのチュートリアルをご覧ください。

それが終わったら、WordPressのダッシュボードからFacebook Feed " Extensions メニューに行き、Carouselセクションを探してください。

そのセクションで、アクティベートボタンを クリックするだけです。

カルーセル・エクステンションを有効にする

フィードを作成する前に、必ず拡張機能を有効にしてください。先にフィードを作成してしまうと、ステップ4で「カルーセル」レイアウトが選択肢として表示されなくなります。

ステップ2:Facebookのカルーセルフィードを作成する

次のステップは、Facebookスライダーフィードを作成することです。そのためには、WordPressのダッシュボードを開き、Facebookフィード " すべてのフィードに進みます。

そのページで、新規追加 ボタンをクリックする。

カスタムfacebookフィードプロで新しいフィードを追加

Facebookスライダーに選択できるすべての異なるフィードタイプを見ることができます。

このプラグインでは、タイムラインフィード、FacebookリールFacebook動画、写真フィード、アルバムフィード、レビューフィード、Facebookギャラリーなど、9種類の異なるオプションを利用できます。

フェイスブック・フィードの種類

続行するには、お好みのフィードの種類を選択し、右上の「次へ」 ボタンをクリックするだけです。

このチュートリアルでは、タイムラインフィードを使うことにしよう。

facebookフィードタイプを選択

スライド表示させたい内容に合わせて、フィードの種類を選んでください。タイムラインフィードはほとんどのサイトに適していますが、ページがビジュアル重視の場合は、写真やアルバムのフィードを使った方が、はるかに見栄えの良いスライダーになります。

ステップ3:Facebookページに接続する

Facebookスライダーを作成したら、Facebookに接続しましょう。そのためには、ソース(あなたのFacebookのビジネスページ)を追加する必要があります。

それを始めるには、ここで新規追加 ボタンをクリックする。

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

スライダーのソースを選択する新しいポップアップが表示されます。あなたのFacebookのビジネスページをソースとして使用することを選択し、[接続]をクリックします。

facebookフィードにグループかページを選択

プラグインがFacebookに移動し、Facebookスライダーに表示したいページを選択するように指示します。

ここでページを選択したら、「Next」をクリックします。

フェイスブックのページを選択する

その後、プラグインはあなたのFacebookスライダーを表示できるように、あなたのFacebookアカウントへの読み取り専用 アクセスを要求します。

つまり、プラグインはあなたのアカウント上の何かを変更することはできません。

そこで、「完了」を クリックして読み取り専用アクセスを許可し、続行する。

プラグインへの読み取り専用アクセスを許可する

その後、「Add」 ボタンをクリックして、全体を確定し、フィードの新しいソースを追加することができます。

新しいソース確認の追加

そうしたら、「次へ 」をクリックして次のステップに進んでください。

カスタム・フェイスブック・フィード・プロ

「読み取り専用」の権限については、少し立ち止まって考えてみる価値があります。というのも、この画面でユーザーが離脱してしまうことが多いからです。このプラグインは、あなたの投稿を表示することしかできません。あなたのページ上で、投稿の追加、編集、削除を行うことはできません。

ステップ4:カルーセルレイアウトの設定とスライダーのカスタマイズ

新しいスライダーをFacebookに接続し終えると、ライブフィードエディターが開きます。

カスタム・フェイスブック・フィード・プロ・ライブ・エディター

左側には、すべてのカスタマイズオプションが表示されます。これらのオプションを使ってフィードをカスタマイズすると、右側にフィードのプレビューが表示されます。

それでは、カスタマイズを始めましょう。まず、フィードレイアウトオプションをクリックします。

facebookフィードのレイアウトを選択する

ここでは、フィードをFacebookのスライダーにするレイアウトを選ぶことができます。

左のカルーセルオプションを 選択するだけです。

カルーセルレイアウトを選択する

右側には、カルーセルスライダーレイアウトのFacebookフィードが表示されます。

ここでSave ボタンをクリックして新しいレイアウトを保存します。

facebookフィードのカルーセルフィードレイアウト

次に、左側のオプションをスクロールダウンし、「デスクトップ・カラム」 フィールドを探します。ここで、あなたのスライダーがコンピューター上の訪問者に表示する記事の数を選択することができます。

その下に、「モバイルカラム」 オプションがあります。このオプションでは、モバイルデバイスからの訪問者が一度に見ることができる記事の数を設定することができます。

これらのフィールドに必要な列数を追加し、保存ボタンをクリックするだけです。

facebookカルーセルスライダーのカラムオプションを変更する

これはほんの始まりに過ぎません。自動再生設定、インターバル、ページネーションスタイルなど、スライダーの他の設定もここで変更できます。

完了したら、Save ボタンをクリックします。

カルーセルスライダーの設定が完了したら、カスタマイズを クリックしてメインのカスタマイズオプションに戻ります。

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

続けて、配色 オプションを選択します。

facebookフィードの配色を選択

あなたのFacebookスライダーのために選ぶことができる4つの異なるカラースキームを見ることができます。

  • テーマから継承: Facebookのスライダーはあなたのウェブサイトの色をコピーします。
  • 明るい:明るめの背景で明るい印象を選ぶ。
  • ダーク:Facebookのスライダーの背景をダークにする。
  • カスタム:手動でFacebookスライダーのすべての色を選択します。
カスタムfacebookフィードプロの配色

ここで好きな配色を選んで「保存」をクリックするだけ。

その後、ライブフィードエディタを使ってFacebookスライダーの様々な部分をカスタマイズすることができます。フィードタイプ、ヘッダースタイル、投稿エレメント、その他もろもろをここで変更することができます。

最後に「保存」をクリックし、ステップ5に進んでFacebookスライダーを埋め込みます。

保存する前に、モバイル用のカラム設定を行ってください。モニター上では適切に見えるデフォルトの設定でも、スマートフォンでは2つ目の投稿のごく一部しか表示されません。これが、スライダーに関する最もよくある不満です。

ステップ5:ウェブサイトにFacebookスライダーを追加する

カスタマイズが終わったら、いよいよあなたのウェブサイトに埋め込みます。それには、2つの方法があります:

  • ページにFacebookのカルーセルを追加する
  • サイドバーにFacebookのカルーセルを追加する

どちらもとても簡単なので、さっそくやって見よう:

Facebookのカルーセルをページに追加する

WordPressのページにFacebookスライダーを追加したい場合、ライブフィードエディターから簡単にできます。

画面右上の埋め込み ボタンをクリックするだけです。

埋め込みボタンをクリック カスタムfacebookフィードプロ

プラグインは、Facebookスライダーの場所を選ぶための新しいポップアップを表示します。

そこで、ここでAdd to a Pageオプションを選択する。

フェイスブックのフィードをページに追加する

次に、どのページにFacebookスライダーを表示させるかを選択できます。リストから好きなものを選んで、追加をクリックしてください。

facebookフィードのページを選択

新しいブロックを追加するには、小さなプラスアイコン(+)をクリックします。 をクリックして新しいブロックを追加する。

そして、オプションからカスタムFacebook フィードウィジェットを選んでください

facebookカスタムフィードブロックを追加

最後にPublishを クリックすれば完了だ!

あなたのウェブサイトを開いて、新しいFacebookスライダーがどのように見えるか見てみましょう。

facebookフィードスライダー

Facebookのカルーセルをサイドバーに追加する

Facebookのスライダーをウェブサイトのサイドバーに表示したいですか?

ライブフィードエディターからも可能です。

まず、WordPressのダッシュボードからFacebookフィード " すべてのフィードにアクセスします。そのページには、これまでに作成したすべてのFacebookフィードのリストがあります。

続けて、先ほど作成したFacebookのスライダーフィードをクリックします。

フェイスブックのフィードを選択する

これでライブフィードエディターが再び開きます。サイドバーにFacebookスライダーを追加するには、埋め込み ボタンをクリックします。

埋め込みボタンをクリック カスタムfacebookフィードプロ

新しいポップアップで、「ウィジェットに追加」 ボタンをクリックします。

facebookのイベントフィードをウィジェットとして追加

これで、プラグインはウィジェットページを開き、新しいスライダーを Facebookウィジェットとして追加できるようになります。

サイドバーパネルを クリックして開きます。

ウィジェットのサイドバーを選択する

プラスアイコン(+)をクリックして、サイドバーに新しいウィジェットを追加できます。 をクリックして、サイドバーに新しいウィジェットを追加できます。

最後に、カスタムFacebookフィードウィジェットを 選択して、WordPressのサイドバーにFacebookスライダーを追加します。

カスタムfacebookフィードプロウィジェットを選択する

これで完了です!これで、あなたのウェブサイトを開いて、Facebookスライダーがどのように見えるかを見ることができます。

フェイスブック・スライダー

スライダーがコンテンツの一部である場合は「ページ埋め込み」を、すべてのページに一括で表示したい場合は「サイドバーウィジェット」を使用してください。サイドバー版では表示される投稿数が少ないため、列数を少なくした方が見やすくなります。

今すぐサイトにスクロール式のFacebookフィードを設置しましょう

「Facebook Feed Pro」と「Carousel」拡張機能を組み合わせれば、約10分でスライダーを作成でき、新しい投稿が自動的に取り込まれ続けます。

Facebookのスライダーを作成する

Facebookのスライダーに関する質問

プラグインを使わずに、Facebookのフィードをスライダーにすることはできますか?

Facebook独自の埋め込みツールでは不可能です。「ページプラグイン」や投稿の埋め込み機能には、スライダー、カルーセル、スライドショー形式のレイアウトがなく、デザインを変更する方法もありません。カスタムJavaScriptとショートコードを使えば基本的なスライドショーは作成可能ですが、そのコードの作成とメンテナンスは自分で行う必要があります。

特に違いはありません。これらは同じものを指す2つの呼び名であり、Smash Balloon Facebook Feed Pro 内では、この設定は「Carousel」と呼ばれています。スライダー、スライドショー、またはカルーセルをお探しの場合は、ステップ4にある「Feed Layout」オプションが該当します。

スライダーには一度に何件のFacebook投稿を表示すべきでしょうか?

デスクトップ版とモバイル版は別々に設定してください。デスクトップ版のレイアウトでは3~4列が適していますが、スマートフォンでは通常1~2列が適切です。幅を広く設定すると、次の投稿が半分に切れてしまい、表示が崩れてしまうからです。

サイドバーにFacebookのスライダーを設置することはできますか?

はい。フィードを開き、「埋め込み」をクリックして、「ウィジェットに追加」を選択し、サイドバーパネルに「カスタム Facebook フィード」ウィジェットを追加してください。サイドバーはページよりも幅がかなり狭いので、サイドバーの列数を減らしてください。

Facebookがダウンしても、スライダーは正常に動作し続けますか?

はい。このプラグインは投稿のローカルコピーを保存しておくため、サービス停止中も訪問者には空白のスペースではなく、スライダーが表示されます。

これで構築はすべて完了です。レイアウト設定の1つが、静的フィードとスライド式フィードの違いであり、それ以降は単に色や列数を選ぶだけです。

ステップ4の「モバイルでのカラム数」の設定だけは、絶対に省略しないでください。モニター上では適切に見えるのに、スマホでは投稿が半分に切れてしまうようなスライダーの設定は、ユーザーが修正のために戻ってくる最もよくある原因であり、最初に正しく設定するだけで10秒しかかかりません。

公開されれば、その後は自動的に更新されます。Facebookページに新しい投稿が追加されても、WordPressを再度開く必要なく、カルーセルに表示されます。

「Smash Balloon Facebook Feed Pro」を入手する

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

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