ElementorにSmash Balloonフィードを追加する

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つの条件を満たす必要があります:

  1. 該当するSmash Balloonプラグインがインストールされ、有効化されています。Instagramフィードの場合は「Instagram Feed」(無料版またはPro版)、Facebookの場合は「Custom Facebook Feed」プラグイン、その他のプラットフォームについても同様です。
  2. そのプラグインの「すべてのフィード」ダッシュボードには、少なくとも1つのフィードが存在します。Elementorウィジェットは、Smash Balloonの管理画面で既に作成済みのフィードを表示するものであり、新しいフィードを作成するものではありません。まだフィードを作成していない場合は、まずそのプラグインのフィード作成手順に従ってください。

設定が完了すると、ページの編集画面を開いた瞬間に、このプラグインのElementorウィジェットがElementorのウィジェットパネルに表示されます。


ステップ1. Elementorでページを開く

WordPressの管理画面サイドバーで「ページ」をクリックし、フィードを表示したいページを選択して、「Elementorで編集」をクリックします。Elementorエディタが開き、左側にウィジェットパネル、右側にライブプレビューが表示されます。ウィジェットパネルの上部には「ウィジェット検索」入力欄があり、ここからSmash Balloonのウィジェットを最も素早く見つけることができます。

ElementorにSmash Balloonフィードを追加する — ステップ1
Elementorエディターの「検索ウィジェット」入力欄は、Smash Balloonウィジェットを名前で探す最も手っ取り早い方法です

ステップ2. フィードウィジェットを検索する

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

ElementorにSmash Balloonフィードを追加する — ステップ2(再撮影)
Elementorのウィジェットパネルで「フィード」を検索すると、Smash Balloonのソーシャルフィードウィジェットがすべて一箇所に表示されます。色あせて表示されているウィジェットは、対応するSmash Balloonプラグインが現在サイトにインストールされていないか、有効になっていないことを意味します。

期待していたウィジェットがまったく表示されない場合は、プラグインがインストールされていません。ウィジェットが薄っすらと表示されている場合は、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]).

サポート

ドキュメントに答えが見つからない?

サポート

この記事は役に立ちましたか?