Elementorでページを作成する場合、Smash Balloonのソーシャルフィードプラグインには専用のElementorウィジェットが付属しており、フィードを任意のページに視覚的に配置することができます。Instagram、Facebook、YouTube、TikTok、Twitter/X用のウィジェットが用意されており、いずれも操作方法は同じです。ウィジェットパネルから目的のウィジェットを探し、キャンバスにドラッグして配置し、ドロップダウンメニューから表示する保存済みフィードを選択し、ページを公開するだけです。ショートコードもコードも一切必要ありません。
このガイドでは、Smash BalloonのElementorウィジェット全般の構成について解説しています。ページ下部には、Instagram Feedプラグインごとの詳細な手順へのリンクも掲載しています。
Smash BalloonのElementorウィジェットは、無料のソーシャルフィードプラグインに同梱されています。Instagram Feed Elementorウィジェットは、バージョン6.2.9以降、無料のInstagram Feedプラグインに含まれており、同様のウィジェットがFacebook Feed、YouTube Feed、TikTok Feed、およびCustom Twitter Feedsの無料版にも同梱されています。また、Elementor Proは必要ありません。これらのウィジェットは、Elementor FreeとElementor Proの両方で動作します。
始める前に
これらのウィジェットをウィジェットパネルに表示させるには、サイト上で次の2つの条件を満たす必要があります:
- 該当するSmash Balloonプラグインがインストールされ、有効化されています。Instagramフィードの場合は「Instagram Feed」(無料版またはPro版)、Facebookの場合は「Custom Facebook Feed」プラグイン、その他のプラットフォームについても同様です。
- そのプラグインの「すべてのフィード」ダッシュボードには、少なくとも1つのフィードが存在します。Elementorウィジェットは、Smash Balloonの管理画面で既に作成済みのフィードを表示するものであり、新しいフィードを作成するものではありません。まだフィードを作成していない場合は、まずそのプラグインのフィード作成手順に従ってください。
設定が完了すると、ページの編集画面を開いた瞬間に、このプラグインのElementorウィジェットがElementorのウィジェットパネルに表示されます。
ステップ1. Elementorでページを開く
WordPressの管理画面サイドバーで「ページ」をクリックし、フィードを表示したいページを選択して、「Elementorで編集」をクリックします。Elementorエディタが開き、左側にウィジェットパネル、右側にライブプレビューが表示されます。ウィジェットパネルの上部には「ウィジェット検索」入力欄があり、ここからSmash Balloonのウィジェットを最も素早く見つけることができます。

ステップ2. フィードウィジェットを検索する
検索ボックスに「フィード」と入力すると、ウィジェットパネルがフィード形式のウィジェットに絞り込まれます。Smash Balloonのセットは、Instagramフィード、Facebookフィード、YouTubeフィード、Twitterフィード(X)、TikTokフィードというカード形式で表示されます。これらはそれぞれ、そのプラグイン専用のSmash Balloonウィジェットであり、Elementorの汎用埋め込み要素ではありません。

期待していたウィジェットがまったく表示されない場合は、プラグインがインストールされていません。ウィジェットが薄っすらと表示されている場合は、Elementorには登録されていますが、現在有効になっていません。プラグインをインストールするか有効にしてから、エディタを更新すると、ウィジェットをドラッグできるようになります。
ウィジェットは外して、フィードを選んでください
パネルから目的のウィジェットを、フィードを表示したいページのセクションまでドラッグします。ドラッグ中にElementorがドロップエリアをハイライト表示するため、既存のコンテナ内に配置することも、新しいセクションとして配置することも可能です。ウィジェットの設定パネルが自動的に開きます。
各Smash Balloonウィジェットの設定画面上部には、「フィードを選択」というドロップダウンメニューがあります。表示したいフィードを選択すると、右側のプレビューペインが実際のコンテンツで更新されます。Smash Balloonカスタマイザーで設定したスタイル、レイアウト、ヘッダー、およびカスタマイズ内容はそのまま反映されます。Elementorは、Elementorを使用していないページで表示されるのと同じ見た目でフィードをレンダリングします。
Elementorパネルの左下にある「公開」または「更新」をクリックして保存してください。これで、そのページにフィードが表示されるようになります。
プラグインごとの解説
特にInstagramフィードのElementorウィジェットに関する詳細な手順については、このドキュメントサイトの「ElementorへのInstagram Feed Proの埋め込み」ガイドをご覧ください。Facebook、YouTube、Twitter/X、TikTokの各ウィジェットの手順も同様の構成になっています。各プラットフォーム固有の注意事項については、各プラグインのドキュメントをご確認ください。
Elementor Freeでもウィジェットは動作しますか?
はい。Smash BalloonのElementorウィジェットは、いずれもElementor Proを必要としません。無料版でもPro版でも動作します。
1つのページに複数のフィードウィジェットを配置することはできますか?
はい。ウィジェットを異なるセクションに複数回配置し(または、同じページ上の異なるプラグイン用に異なるウィジェットを使用し)、それぞれに別のフィードを選択してください。
なぜパネル内のウィジェットが薄くなっているのですか?
これは、そのプラットフォーム用のSmash Balloonプラグインが現在インストールされていないか、有効になっていないことを意味します。プラグインをインストールまたは有効にすると、ウィジェットが利用可能になります。
フィードのスタイル設定は、Elementorで行うべきですか、それともSmash Balloonのカスタマイザーで行うべきですか?
フィードレベルのスタイル設定(ヘッダー、レイアウト、色、投稿数)は、保存された各フィードについて、Smash Balloonのカスタマイザーで制御されます。Elementorの役割は配置、つまりページ上のどこにフィードを表示するかを決めることです。
1つのページで、異なるSmash Balloonプラグインのフィードを組み合わせて表示することはできますか?
はい。各プラグインのウィジェットは独立しているため、同じページ内で、ヘッダー部分にInstagramのフィード、サイドバーにYouTubeのフィード、ページ下部にFacebookのフィードを表示させることも可能です。
「Reviews Feed」プラグイン用のElementorウィジェットはありますか?
現時点ではありません。Reviews Feed Pro のフィードを Elementor ページに埋め込むには、Elementor のショートコードウィジェットにフィードのショートコードを入力してください(例: [reviews-feed feed=1]).