ElementorのウェブサイトにInstagramのフィードをすばやく表示する方法をお探しですか?
インスタグラムのフィードを追加することは、サイトを新鮮に保ち、エンゲージメントを高め、訪問者にインスタグラムをフォローしてもらうための素晴らしい方法です。
インスタグラムでのオーガニックなリーチを維持することが難しくなっている中、ウェブサイトで投稿を共有することで、より多くのオーディエンスとのつながりを築くことができる。
しかし、通常の方法でInstagramのフィードをElementorに完璧に表示させるのは、混乱しがちで時間がかかります。特にコードやウィジェットに慣れていない場合はなおさらだ。
初めてインスタグラムのフィードをElementorに統合しようとしたときのことを覚えている。私はWordPressの初心者だったので、大変でした。
スマッシュ・バルーンでのデジタルマーケターとしての長年の経験で、ユーザーがインスタグラムのフィードをサイト上で美しく表示できるようサポートし、本当に効果的なものを見つけました。
この記事では、私がInstagramのフィードをElementorに追加する手順を5分以内で説明する。初めての方でも、技術に詳しくない方でも大丈夫です!
この記事で
- ElementorにInstagramフィードを追加する最も簡単な方法とは?
- ElementorにInstagramのフィードを追加する方法(ステップバイステップ)
- 今すぐElementorにInstagramフィードを追加しましょう
- Elementorにソーシャルフィードを追加する人気記事
ElementorにInstagramフィードを追加する最も簡単な方法とは?

すべての選択肢の中から、私はこのガイドのためにInstagram Feed Proを選んだ。
複雑な埋め込みコードや長いセットアップに対処する必要はありません。わずか数分で美しいInstagramフィードを作成し、Elementorサイトに追加できます。
実際、このツールを競合他社から際立たせる素晴らしい機能がいくつかある。
- 簡単で迅速なセットアップ: インスタグラム・フィード・プロのセットアップは、コーディング不要で数分しかかかりません。
- 豊富なフィードの種類:Instagram Feed Proでは、さまざまな種類のフィードから選択できます。ハッシュタグフィードやInstagram Reelsなどを表示することが可能です。
- ブランドイメージにぴったり:さらに、このプラグインで作成するすべてのフィードは、ウェブサイトのデザインを自動的に反映し、ブランドイメージやWordPressのテーマと完璧に調和します。
- ショッピング可能なフィード: シンプルなリンクインバイオの代わりに、ショッピング可能なInstagramフィードを作成し、Instagramの投稿に商品をリンクすることで、訪問者にスムーズなショッピング体験を提供することができます。
- レスポンシブInstagramフィード:このInstagram WordPressプラグインは自動的にレスポンシブInstagramフィードを作成します。つまり、フィードはどんな画面サイズやデバイスでも見栄えがよく、うまく機能します。
Instagramフィードのためのこの最高のWordPressプラグインで私が特に高く評価しているのは、ビジュアルフィードカスタマイザーで、数回クリックするだけで、Instagramフィードのデザインとコンテンツの両方をコントロールすることができる。

さらに、このツールはかなり軽量なので、Elementorに大量の写真や動画を追加しても、サイトの表示速度は以前と変わらず速いままでした。
おまけに、他のユーザーもこのプラグインに満足しているようだ。Instagram Feed Proは、100万人以上のユーザーから 4.9/5つ星の 評価を得ている。

プロヒント:InstagramのコンテンツをDiviで表示したいですか?InstagramのフィードをDiviのウェブサイトに埋め込む方法をご紹介します。
試す準備はできましたか?ここからInstagram Feed Proを始めることができます!
ElementorにInstagramのフィードを追加する方法(ステップバイステップ)
ElementorのInstagramフィードを追加するのは、実はとても簡単です。そのための5つの簡単なステップを以下に説明しよう。
ステップ1:Instagram Feed Proプラグインをインストールして有効化する
始めるには、Instagram Feed Proのコピーをここから入手できる。次に、あなたのウェブサイトにプラグインをインストールして有効化するだけです。
その方法をご覧になりたい方は、WordPressプラグインのインストール方法をご覧ください。
ステップ2:新しいElementor Instagramフィードを作成する
プラグインをインストールして有効化したら、Instagram Feed Proを使って新しいフィードを作成できる。
まず、WordPressのダッシュボードエリアからInstagramのフィード " すべてのフィードメニューに移動します。
新規追加 ボタンをクリックして開始します。

次のページでは、この3つのオプションから好きなInstagramフィードのタイプを選ぶことができる:
- ユーザーのタイムライン: 自分のインスタグラム投稿を表示
- 公開ハッシュタグ: 特定のハッシュタグが付いたインスタグラムの写真や動画を表示する
- タグ付けされた投稿 あなたのInstagramアカウントにタグ付けされた投稿を埋め込む
異なるインスタグラムのフィードタイプを1つのフィードにまとめたいですか?ここで複数のオプションを選択するだけです。
最後に、インスタグラムのフィードタイプを選択したら、「次へ」 ボタンをクリックします、
このElementorのInstagramフィードチュートリアルでは、ユーザータイムラインフィードを使用します。このフィードタイプを選択すると、Instagram Feed Proは自分のInstagramプロフィールからの投稿を表示します。

ステップ3:ElementorのInstagramフィードをInstagramに接続する
このステップでは、新しいフィードをインスタグラムのアカウントに接続し、インスタグラムの写真や動画をウェブサイトに表示できるようにする。
ソースの追加」ボタンをクリックしてください。

これで、あなたのビジネスやクリエイターのInstagramアカウントをウェブサイトに接続することができる。
まだお持ちでない方は、Instagramのビジネスアカウントへの変更に関するガイドをご覧ください。
アカウントの準備ができたら、2種類の接続を選択できます:
- ビジネスベーシック:インスタグラムのプロフィールからコンテンツを表示し、エンゲージメントとフォロワーを獲得することができる。
- ビジネス上級者向け:投稿の上に、ハッシュタグフィード、Instagramリール、ショッパブルフィードなどを表示することができます。
お好みのオプションを選んだら、「接続」をクリックする。

このガイドでは、ビジネス・ベーシック ・タイプを選択することにする。
次に、Instagramアカウントと接続を クリックします。

次に、プラグインにInstagramアカウントへの読み取り専用 アクセス権を与えることができる。
つまり、Instagram Feed Proはあなたのコンテンツだけを見ることができ、何も変更できないので、このSmash Balloonプラグインは完全に安全です。つまり、このSmash Balloonプラグインは完全に安全です。

そうしたら、最後に「Next(次へ) 」をクリックして、フィードをInstagramに接続し終える。

簡単だったでしょう?Instagramのアクセストークンを手動で作成する必要さえありませんでした。ほんの数回クリックするだけで、Instagramアカウントがフィードに連携されました。
ステップ4:ElementorのInstagramフィードをカスタマイズする
アカウントの接続が完了したら、次はフィードのカスタマイズを始めよう。
プラグインがライブフィードエディタを開きます。左側のパネルでは、フィードのレイアウト、配色、投稿のレイアウト、ヘッダーのスタイル、ボタン、余白、その他のスタイル設定を行うことができます。
すると、右側にインスタグラムのフィードがどのように見えるかのライブプレビューが表示される。

まず、左側の「Feed Layout」 オプションを選択し、インスタグラムのフィードのレイアウトを変更します。

インスタグラム・フィード・プロでは、4つの異なるレイアウト・オプションがある:グリッド、カルーセル、メイソンリー 、ハイライトです。

たくさんのインスタグラム画像を行と列で同時に表示したい場合は、グリッド オプションをお試しください。
私は通常、インスタグラムのフィードにグリッドレイアウトを使用している。

インスタグラムの投稿をダイナミックに見せたいですか?そんな時はインスタグラムのカルーセルレイアウトを使って写真や動画を表示してみてはいかがでしょうか。

また、インスタグラムのギャラリーの写真や動画を、元の比率を保ったまま異なるカラムで表示できるメイソンレイアウトも ある。

最後に、「いいね!」、コメント、キャプションを削除することで、投稿により焦点を当てるハイライト オプションがある。
実際、このレイアウトでは特定の写真やビデオのサイズが4倍になる。

まずは、フィードレイアウトの活用例をいくつかご紹介します:
- あるアパレルブティックでは、ベストセラー商品の写真をグリッド状に配置し、フィードを商品カタログとしても活用できるようにすることで、ショッピング機能付きのフィードを実現しています。
- あるウェディングフォトグラファーが、カルーセルを使って最近の挙式で撮影したお気に入りの写真を次々と表示し、一枚一枚に注目を集めている。
- あるインテリアデザイナーが、レンガ造りの壁を背景に、完成したリビングルームの広角ショットと、個々の家具を捉えた縦長のクローズアップを、すべて実際のサイズ感のまま組み合わせています。
- ハイライトフィードを活用する美術写真家。重要な写真を拡大表示し、「いいね」やキャプションを非表示にすることで、閲覧者が作品そのものに集中できるようにしている。
気に入ったインスタグラムのフィードレイアウトを選択したら、「変更を保存」をクリックする。
上部にある小さなカスタマイズ・ ボタンを探してクリックし、メインのカスタマイズ・オプションに戻る。

左側の配色 オプションをクリックして、Instagramフィードの色を変更する。

新しいインスタグラムのフィードは、4つの異なるカラースキームから選ぶことができる:
- テーマからの継承:あなたのウェブサイトのテーマの色を簡単に継承
- 明るい:暗いフォントとともに明るい背景を見せる
- ダーク:背景に濃い色を選び、フォントは淡い色にする。
- カスタム:あなたのInstagramフィードのすべての色を選択

オプションから好きな配色を選び、「保存 」をクリックするだけで変更が反映されます。
その後、Instagram Feed Proのライブフィードエディターを使って、ヘッダーレイアウト、投稿スタイル、ロードモアボタン、ライトボックスデザインなどをカスタマイズできる。
最後に、Instagramフィードの残りの部分をカスタマイズした後、保存をクリックして変更を確定する。
ご覧の通り、Instagram Feed Proを使えばカスタマイズはとても簡単だ。そのため、複雑なコーディングをすることなく、思い通りのフィードを作ることができる。
ステップ5:InstagramのフィードをElementorに追加する
カスタマイズが終わったら、InstagramのフィードをElementorに追加しましょう。
「Instagram Feed Pro」を使えば、近日公開ページ、オプトインページ、販売ページなど、Elementorで作成したあらゆるページにInstagramのフィードを簡単に表示できます。
はじめに、ダッシュボードからページ " 新規追加 メニューに進み、新しいWordPressページを作成します。
その後、上部にある「Elementorで編集 」ボタンをクリックするだけです。

代わりにWordPressの投稿を使うこともできます。その場合は、ダッシュボードからPosts " Add New に進み、Elementor で編集を選択します。
この例では、WordPressのページを使います。

Elementorエディタの右側には、ウェブページのライブプレビューが表示されます。左側には、ページに追加できるすべてのElementorウィジェットがあります。
次のステップでは、左側の検索フィールドで "instagram "と入力する。

そしてその下に、検索結果のInstagram Feed ウィジェットが表示されるはずだ。
あとはウィジェットをドラッグして 右側にドロップ するだけです。

Instagramフィードウィジェットの設定をエディター上で確認できるようになりました。
ここでドロップダウンメニューを使って、先ほど作成したInstagramフィードを選択する。

最後にPublish ボタンをクリックして完成。
これでインスタグラムのフィードがElementorに追加されました!あなたのウェブサイトをチェックしてみてください。

それで終わりだ!
ご覧の通り、ElementorにInstagramフィードウィジェットを追加するのはとても簡単です。「Instagram Feed Pro」プラグインを使えば、コーディングは一切不要で、数回クリックするだけで設定できます。
なぜInstagramのフィードをElementorに追加するのか?
WordPressで人気のランディングページ作成プラグインであるElementorを使えば、404ページ、メンテナンス画面、セールスページ、その他のランディングページなどを簡単に作成できます。

デザイン経験が全くないWordPressサイトの初心者であっても、美しいサイトを作成し、訪問者の関心を引きつけることは簡単です。
また、InstagramのフィードをElementorのページに追加して改善することもできます。そうすることで、より多くのインスタグラムのフォロワー、コンバージョン、そしてビジネスの売上を得ることができます。
ElementorのページにInstagramのフィードを追加すべき理由は以下の通りです:
- あなたのECサイトでは、レビューや体験談のインスタグラム投稿を表示することができる。他の人があなたの商品を楽しんでいるのを見れば、社会的証明として機能し、あなたから購入する可能性が高くなる。
- インスタグラムのプロフィールのフィードをWooCommerceに追加することで、関連する画像やフル動画をウェブサイトに表示することができます。そのため、画像や動画をサイトにアップロードしなくても、より魅力的なページにすることができます。
- 自分のインスタグラムの投稿をサイトに埋め込むことは、より多くの人に見てもらえることを意味する。そして、より多くのインスタグラムのフォロワーを獲得することができる。
- Instagramのフィードを活用すれば、訪問者に素晴らしいオンラインショッピング体験を提供することも可能です。サイトに「ショッピング機能付き」のInstagramフィードを追加し、商品を直接販売することができます。
ご覧の通り、ElementorのInstagramフィードは、さまざまな方法でビジネスの宣伝や売上向上に役立ちます。
ElementorサイトにInstagramフィードを埋め込みたいですか?今すぐInstagram Feed Proを入手しましょう!
専門家のアドバイス:Instagramフィードを設定したら、Instagramチャットウィジェットを追加しましょう。そうすれば、コンテンツを気に入った訪問者がサイトを離れることなく、あなたにメッセージを送ることができます。ウェブサイトにInstagramチャットを設定する方法は以下の通りです。
今すぐElementorにInstagramフィードを追加しましょう
ElementorサイトにInstagramフィードを追加することは、コンテンツを新鮮で魅力的な状態に保つ素晴らしい方法です。
私の経験から言うと、手動埋め込みや複雑なウィジェットでこれを試みると、イライラすることがあります。
だからこそ、Smash Balloon Instagram Feed Proをお勧めします。このツールはプロセス全体を簡素化し、コーディング不要でわずか数分で美しくカスタマイズされたフィードを作成できます。
どうすれば始められるかは、以下の通りだ:
- Instagram Feed Proを今すぐ入手し、14日間リスクフリーでお試しください。ElementorにInstagramフィードを簡単に追加する方法を始めましょう。
- ビジュアルエディターを使用して、ウェブサイトのスタイルとブランディングに完璧にマッチする見事なフィードを作成しましょう
- シンプルなドラッグ&ドロップウィジェットで、フィードをElementorページにシームレスに追加できます
Instagram Feed ProとElementorの併用についてご質問はありますか?コメント欄でお知らせください。
Elementorにソーシャルフィードを追加する人気記事
- ElementorでYouTubeプレイリストを埋め込む方法(最良の方法)
- ElementorにTwitterフィードを追加する方法
- ElementorにYouTube動画ギャラリーを追加する方法
- ElementorにTripadvisorのレビューを追加する方法
- 初心者向け】Elementorにソーシャルメディア・フィードを追加する方法
