[更新] Smash Balloonのフィードを、ネイティブのGutenbergブロックまたはElementorウィジェットとして追加

WordPressのブロックエディタで新しいページを作成しています。Instagramのフィードを挿入しました。公開する前に、ページ上でその表示を確認したいと考えています。

WordPress 7ではその部分が変更されました。エディタがiframe内に移動したことでプレビューの表示方法が変更されたため、それに合わせてブロックも更新する必要がありました。

6つのSmash Balloonプラグインすべてにおいて、フィードはその内部で正しく表示されます。キャンバス上で作成したものが、そのまま訪問者に表示されます。

すべてのSmash Balloonフィードプラグインは、GutenbergのネイティブブロックまたはElementorのウィジェットとしてページに追加できるようになり、WordPress 7でも正常に動作します。見出し、画像、ボタンを追加するのと同じ方法でフィードを追加してください。

検索して、それを挿入し、ドロップダウンからフィードを選択してください。どのプラグインを使用する場合でも、操作方法は同じです。

Gutenbergでは、この機能は段落ブロック、画像ブロック、ギャラリーブロックなどと同じインサーター内にあります。Elementorでは、他のすべての作成ツールと同様に、ウィジェットパネル内にあります。

次のような方法があります：

• インサーターでフィード名を検索し、ページにドラッグ＆ドロップします
• Smash Balloon ウィジェットを Elementor の任意のセクションまたはカラムにドラッグして配置します
• ブロックまたはウィジェット内のドロップダウンから、表示する保存済みフィードを選択します
• 公開する前に、フィードがキャンバス上に正しく表示されることを確認してください
• Elementorパネルから、新しいフィードを作成するか、現在表示中のフィードを編集します

他のものを追加するのと同じように、フィードを追加しましょう

Smash Balloonのフィードプラグインには、従来から「クラシック埋め込みブロック」または「ショートコード」を通じて、ページにフィードを追加する機能が備わっていました。この点は変わっておらず、これまでに作成したコンテンツが機能しなくなるようなことはありません。

Instagramフィード、カスタムTwitterフィード、TikTokフィード、およびレビューフィードについては、今回のアップデートでネイティブのブロックとウィジェットが追加されたのが新機能です。カスタムFacebookフィードとYouTube Feed Proにはすでにこれらが実装されていましたが、今回のアップデートにより、これら両方がWordPress 7でも正常に動作するようになりました。

これで、フィードがブロックやウィジェットとしてページ上に表示され、ページ作成中にその場で確認できるようになります。ドロップダウンから表示したいフィードを選択すると、配置した場所にフィードが表示されます。

6つのプランのうちどれを利用しているか、また無料版かPro版かに関わらず、フィードの追加方法はすべて同じになりました。

ブロックエディタから直接、任意のフィードを追加できます

インサーターを開き、実行しているプラグインの名前を入力すると、段落ブロック、画像ブロック、ギャラリーブロックと並んで、フィードブロックが表示されます。

それを挿入し、「フィードを選択」ドロップダウンからフィードを選んでください。投稿、動画、レビューなどが、そのページ上のブロックに表示されます。

そこから、実際の配置場所で、実際の幅で、その上に見出し、下にボタンを配置した状態の実際の表示を確認できます。訪問者がページを読み込む前に、ページ上でそれがどのくらいのスペースを占めるかがわかります。

その仕組みは次の通りです：

• ある花屋が、自身のInstagramフィードを「ウェディング」ページに追加し、予約フォームの上部にどれだけのスペースを占めるかを確認した上で、フォームがまだ画面内に表示されていることを承知の上で公開した
• あるジムでは、会員の口コミをクラスのスケジュール表よりも上に表示しており、ページを公開する前に、スケジュール表が画面に正しく表示されているかを確認している。
• あるベーカリーは、注文ボタンの上にTikTokのフィードを表示し、ボタンが依然として操作しやすい位置にあることを確認した

Elementorの任意のセクションにフィードを配置する

Elementorでサイトを作成する場合、Smash Balloonのフィードウィジェットはウィジェットパネルに表示されています。

ウィジェットパネルでプラグインを検索し、そのウィジェットを現在作業中のセクションまたは列にドラッグしてください。

ドロップダウンからフィードを選択すると、配置した列の横にあるプレビューにそのフィードが表示されます。

幅と間隔は、Elementor独自のコントロール（見出しやボタンで使うのと同じもの）で設定するため、フィードはセクションから浮いた状態にならず、セクションの他の部分と揃って表示されます。

フィード自体を変更したい場合は、パネルに新しいフィードを作成したり、現在表示中のフィードを編集したりするためのリンクがあります。どちらも新しいタブで開くため、デザイン中のページはそのままの状態を維持できます。

• あるヨガスタジオでは、クラススケジュール横にインスタグラムのフィードを表示しており、新規の受講生がクラスを選ぶ前に、スタジオの様子や参加している人々の姿を確認できるようにしている
• あるレストランでは、メニューの下にGoogleのレビューを同じ幅で表示しており、客は食事場所を決めるまさにその瞬間にレビューを目にするようになっている
• あるブティックでは、TikTokの動画を商品写真と同じレベルに配置しているため、買い物客は「購入」ボタンをスクロールして通り過ぎてしまうことなく、商品が実際に使われている様子を見ることができます。

WordPress 7 ではフィードが正しく表示されます

WordPress 7 では、ブロックエディタが iframe 内に移動されたため、編集中のブロックの表示方法が変更されました。Smash Balloon のすべてのプラグインはこの変更に合わせて更新されており、6 つすべてがこれと完全に互換性があります。

フィードは、ライブページ上で表示されるのと同じようにエディタ上でも表示されます。これは、新しいブロック、従来のブロック、あるいは従来のElementorウィジェットのいずれを使用する場合でも同様ですので、以前に作成したページはそのままの状態で引き継がれます。

作業中にリアルタイムのフィードを確認できるからこそ、1回の作業でページを完成させることができるのです：

• サロンの料金表の下にレビューフィードを設置し、画面上で両方を表示できるようにすることで、公開後も料金表が見やすく保たれます
• ゲストハウスの予約フォームの上部に、作成中にInstagramのフィードを表示するように設定し、ユーザーがページにアクセスした際にもフォームが画面内に表示されるようにします
• ある醸造所のイベントページで、TikTokのフィードが実際の幅で表示される様子をご覧ください。そうすることで、その下にあるライブ日程が表示範囲から外れてしまうのを防ぐことができます

これまでに作成したすべてのフィードは引き続き機能します

ここでは、過去のページを再度確認するよう求められることはありません。「レガシーブロック」または「レガシーElementorウィジェット」に配置されたフィードは、そのままの状態で引き続き動作します。

これらの古い配置も、WordPress 7のエディタでは正しく表示されるため、1年前に作成したページを開いても、期待どおりにプレビューされます。これは更新するだけで実現でき、特別な設定は一切必要ありません。

ショートコードについても変更はありません。フィードをその方法で配置している場合は、そのまま続けてください。

新しいブロックとウィジェットは、次に配置するフィードや、移動させたい古いフィードに対応しています。

どのプラットフォームで実行しても、同じアップグレードが適用されます

どのSmash Balloonプラグインも、GutenbergのブロックやElementorのウィジェットとして、同じ方法でページにフィードを追加します。プラグイン名を検索して、ページに配置し、ドロップダウンからフィードを選択してください。

3つ試してみても、フィードに投稿する方法は依然として1つしかありません。Instagramのフィードで学んだことは、6か月後にページにレビューを追加する際にも、すでに知っていることなのです。

Elementorでも同様で、無料版とPro版でも同じため、無料プラグインを使用しているサイトもPro版を使用しているサイトも、同じように配置されます。

例えば、あるマーケティング代理店が、あるクライアントのサイトにはInstagramのフィードを、別のクライアントのサイトにはFacebookのフィードを掲載しているとします。どちらのウェブサイトでも同じ方法で構築できるため、新たに指示書を作成する手間やコストを節約できます。

数分でInstagramのフィードを任意のページに追加する方法

この機能は、Instagram Feedの無料版およびPro版で利用可能です。ここで紹介している他のプラグインもすべて同じ仕組みで動作するため、「Custom Twitter Feeds」、「Custom Facebook Feed」、「YouTube Feed Pro」、「TikTok Feeds」、または「Reviews Feed」をご利用の場合でも、以下の手順はそのまま適用できます。

グーテンベルク・ブロックの使用方法

フィードを追加したいページまたは投稿を開き、プラスアイコンをクリックしてブロックインサータを開きます。「Instagram Feed」を検索し、「Instagram Feed」ブロックを選択します。

「フィードを選択」ドロップダウンから 希望のフィードを選択すると、そのページ上にすぐに表示されます。

その後、ページのプレビューを表示して、希望通りの表示になっているか確認し、通常通り公開してください。

Elementorウィジェットの使用方法

Elementorでページを開き、左側のウィジェットパネルで「Instagram Feed」を検索します。そのウィジェットを、ページ上の任意のセクションまたは列にドラッグして配置します。

ウィジェットの設定で、ドロップダウンから希望のフィードを選択してください。

まだ作成していませんか？「新しいフィードを作成」をクリックし、プラグインのダッシュボードから行うのと同じ手順で、ソース、レイアウト、スタイルを選択して設定してください。

表示しているフィードを変更したい場合は、「このフィードを編集」をクリックすると、Elementorを開いたまま、新しいタブでカスタマイザーに直接移動します。

他のElementorウィジェットと同じ方法で列の幅と間隔を調整し、ページを更新してください。

公開したら、フロントエンドのページにアクセスして、フィードが正しく読み込まれ、エディタで表示されていたのと同じ見た目になっているか確認してください。

別のページで旧式のブロックやウィジェットを使用している場合、そちらの設定を変更する必要はありません。現在とまったく同じように動作し続けます。

フィードは、どのページにも組み込む準備ができています

ブロックかウィジェットのどちらかを使えば、たった1分足らずで新しいページにフィードを追加できるようになったことをご存知でしたか？

ショートコードのオプションは、ご希望であれば引き続きご利用いただけますが、ほとんどの新しいページでは、ネイティブのブロックやウィジェットを使った方が手っ取り早く設定できます。

• 新しいフィード用にコピーするショートコードはありません
• GutenbergとElementorの間には、個別の手順はありません
• 公開するまで、フィードがどのように表示されるかは予測できません

すでにSmash Balloonプラグインをご利用の場合は、最新バージョンに更新して、次のページで新しいブロックやウィジェットをお試しください。まだご利用でない場合は、Smash Balloonを使い始めて、初日からネイティブブロックを使って最初のフィードを作成してみてください。

最後に、コミュニティの皆さまに心より感謝申し上げます。皆さまからのフィードバックが私たちの開発の方向性を形作っており、フィードがページにどのように表示されるかについては、よくご意見をいただいています。

Instagram、Facebook、それとも他のプラットフォーム、どれを最初に追加しますか？下のコメント欄に書き込んで、教えてください。