5分以内でElementorにInstagramフィードを追加する
ホーム ブログ 5分以内にインスタグラムのフィードをElementorに追加する方法

5分以内にインスタグラムのフィードをElementorに追加する方法

インスタグラムのフィードをElementorに追加する方法

簡単な手順:「Smash Balloon Instagram Feed Proをインストールし、フィードを作成して、Instagramアカウントを連携させ、レイアウトを選択します。その後、Elementorのページに「Instagram Feed」ウィジェットをドラッグ&ドロップし、ドロップダウンメニューからフィードを選択します。

実際に時間がかかるのはどこかというと、5つのステップのうち4つはそれぞれ1分もかかりません。フィードの見た目を決めるのはステップ4のレイアウトの選択ですので、そこだけは時間をかけてじっくりと検討する価値があります。

ビジネス用またはクリエイター用のInstagramアカウントが必要です。手動で生成するアクセストークンは必要ありません。

「5分」というのは比喩ではなく、実数です。私はこれを何度も経験してきたので、その1分1分がどこへ消えていくのかよく分かっています。

5つの手順のうち4つは、クリック1回で完了します。プラグインをインストールし、フィードに名前を付け、アカウントを連携させ、ウィジェットを配置するだけです。どれも特に考える必要はありません。

残りの時間を費やすのはレイアウトの選択です。なぜなら、フィードがページ上で適切に表示されるか、それとも単に「あるだけ」に見えるかは、このレイアウト次第だからです。4つのレイアウトすべてと、それぞれがどのようなビジネスに適しているかをご紹介します。

この記事で

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のフィードを追加する方法(ステップバイステップ)

「Instagram Feed Pro」をインストールし、フィードを作成してタイプを選択します。Instagramのビジネスアカウントを連携させ、レイアウトと配色を選択した後、Elementorのページに「Instagram Feed」ウィジェットをドラッグ&ドロップし、フィードを選択します。

手順は全部でたったの5つで、そのほとんどは1~2分で終わります。

ステップ1:Instagram Feed Proプラグインをインストールして有効化する

始めるには、Instagram Feed Proのコピーをここから入手できる。次に、あなたのウェブサイトにプラグインをインストールして有効化するだけです。

その方法をご覧になりたい方は、WordPressプラグインのインストール方法をご覧ください。

これでステップ1は完了です。あとはあと4つ残っています。

ステップ2:新しいElementor Instagramフィードを作成する

プラグインをインストールして有効化したら、Instagram Feed Proを使って新しいフィードを作成できる。

まず、WordPressのダッシュボードエリアからInstagramのフィード " すべてのフィードメニューに移動します。

新規追加 ボタンをクリックして開始します。

インスタグラムフィードプロ

次のページでは、この3つのオプションから好きなInstagramフィードのタイプを選ぶことができる:

異なるインスタグラムのフィードタイプを1つのフィードにまとめたいですか?ここで複数のオプションを選択するだけです。

最後に、インスタグラムのフィードタイプを選択したら、「次へ」 ボタンをクリックします、

このElementorのInstagramフィードチュートリアルでは、ユーザータイムラインフィードを使用します。このフィードタイプを選択すると、Instagram Feed Proは自分のInstagramプロフィールからの投稿を表示します。

フィードタイプを選択 instagramフィードプロ

ここで複数のタイプを選択すると、それらが1つのフィードに統合されます。また、必要に応じて後からフィードに情報源を追加することも可能です。すべてご自身で自由に設定できます。

ステップ3:ElementorのInstagramフィードをInstagramに接続する

このステップでは、新しいフィードをインスタグラムのアカウントに接続し、インスタグラムの写真や動画をウェブサイトに表示できるようにする。

ソースの追加」ボタンをクリックしてください。

インスタグラム、フィードにソースを追加

現在、Instagram独自のAPI制限により、ビジネスアカウントまたはクリエイターアカウントをウェブサイトに連携させることができます。

まだお持ちでない方は、Instagramのビジネスアカウントへの変更に関するガイドをご覧ください。

アカウントの準備ができたら、2種類の接続を選択できます:

  • ビジネスベーシック:インスタグラムのプロフィールからコンテンツを表示し、エンゲージメントとフォロワーを獲得することができる。
  • ビジネス上級者向け:投稿の上に、ハッシュタグフィード、Instagramリール、ショッパブルフィードなどを表示することができます。

お好みのオプションを選んだら、「接続」をクリックする

インスタグラムの接続タイプを選択する

このガイドでは、ビジネス・ベーシック ・タイプを選択することにする。

次に、Instagramアカウントと接続を クリックします。

インスタグラムの基本プロフィールに接続する

次に、プラグインにInstagramアカウントへの読み取り専用 アクセス権を与えることができる。

つまり、Instagram Feed Proはあなたのコンテンツだけを見ることができ、何も変更できないので、このSmash Balloonプラグインは完全に安全です。つまり、このSmash Balloonプラグインは完全に安全です。

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

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

インスタグラムのフィードのソースとしてアカウントを確認する

簡単だったでしょう?Instagramのアクセストークンを手動で作成する必要さえありませんでした。ほんの数回クリックするだけで、Instagramアカウントがフィードに連携されました。

ステップ4:ElementorのInstagramフィードをカスタマイズする

アカウントの接続が完了したら、次はフィードのカスタマイズを始めよう。

プラグインがライブフィードエディタを開きます。左側のパネルでは、フィードのレイアウト、配色、投稿のレイアウト、ヘッダーのスタイル、ボタン、余白、その他のスタイル設定を行うことができます。

すると、右側にインスタグラムのフィードがどのように見えるかのライブプレビューが表示される。

インスタグラム・フィード・プロ用ライブ・フィード・エディター

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

フィード・レイアウト・オプションを選択する

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

フィードレイアウトオプション instagramフィードをelementorに追加する

たくさんのインスタグラム画像を行と列で同時に表示したい場合は、グリッド オプションをお試しください。

私は通常、インスタグラムのフィードにグリッドレイアウトを使用している。

インスタグラムのグリッドレイアウト

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

インスタグラム用カルーセルレイアウト

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

インスタグラムのフィードレイアウト

最後に、「いいね!」、コメント、キャプションを削除することで、投稿により焦点を当てるハイライト オプションがある。

実際、このレイアウトでは特定の写真やビデオのサイズが4倍になる。

インスタグラムのハイライトレイアウト

まずは、フィードレイアウトの活用例をいくつかご紹介します:

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

気に入ったインスタグラムのフィードレイアウトを選択したら、「変更を保存」をクリックする。

上部にある小さなカスタマイズ・ ボタンを探してクリックし、メインのカスタマイズ・オプションに戻る。

カスタマイズ・オプションに戻る

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

ライブ・フィード・エディター

新しいインスタグラムのフィードは、4つの異なるカラースキームから選ぶことができる:

  • テーマからの継承:あなたのウェブサイトのテーマの色を簡単に継承
  • 明るい:暗いフォントとともに明るい背景を見せる
  • ダーク:背景に濃い色を選び、フォントは淡い色にする。
  • カスタム:あなたのInstagramフィードのすべての色を選択
インスタグラム・フィード・プロの配色オプション

オプションから好きな配色を選び、「保存 」をクリックするだけで変更が反映されます。

その後、Instagram Feed Proのライブフィードエディターを使って、ヘッダーレイアウト、投稿スタイル、ロードモアボタン、ライトボックスデザインなどをカスタマイズできる。

最後に、Instagramフィードの残りの部分をカスタマイズした後、保存をクリックして変更を確定する。

残りの時間を費やす価値があるのは、このステップです。「グリッド」「カルーセル」「メイソンリー」「ハイライト」は、同じものを表示するための4つの方法というのではなく、訪問者にまず何に注目してもらうべきかという問いに対する4つの異なる答えなのです。

ステップ5:InstagramのフィードをElementorに追加する

カスタマイズが終わったら、InstagramのフィードをElementorに追加しましょう。

「Instagram Feed Pro」を使えば、近日公開ページ、オプトインページ、販売ページなど、Elementorで作成したあらゆるページにInstagramのフィードを簡単に表示できます。

はじめに、ダッシュボードからページ " 新規追加 メニューに進み、新しいWordPressページを作成します。

その後、上部にある「Elementorで編集 」ボタンをクリックするだけです。

新しいワードプレスページを作成する

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

この例では、WordPressのページを使います。

ワードプレスの新規投稿を作成する

Elementorエディタの右側には、ウェブページのライブプレビューが表示されます。左側には、ページに追加できるすべてのElementorウィジェットがあります。

次のステップでは、左側の検索フィールドで "instagram "と入力する。

インスタグラムフィードウィジェットを検索 elementor

そしてその下に、検索結果のInstagram Feed ウィジェットが表示されるはずだ。

あとはウィジェットをドラッグして 右側にドロップ するだけです。

インスタグラムのフィード・ウィジェットをページにドラッグする

Instagramフィードウィジェットの設定をエディター上で確認できるようになりました。

ここでドロップダウンメニューを使って、先ほど作成したInstagramフィードを選択する。

インスタグラムのフィードを選択する

ウィジェットの設定画面には、「新しいフィードを作成」リンクと「このフィードを編集」リンクもあり、どちらも新しいタブで開きます。ページにさらに合うようにデザインを微調整したい場合に便利です。

最後にPublish ボタンをクリックして完成。

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

インスタグラムフィードの例

それで終わりだ!

公開されれば、これで作業は完了です。新しいInstagramの投稿は自動的にページに表示されるため、この5分が初期費用ではなく、総費用となります。

あと5分、その後は自動で動くよ

フィードを一度設定しておけば、新しいInstagramの投稿がすべて、エディタを再度開くことなくElementorのページに表示されます。

Instagramフィードプロを入手

なぜInstagramのフィードをElementorに追加するのか?

WordPressで人気のランディングページ作成プラグインであるElementorを使えば、404ページ、メンテナンス画面、セールスページ、その他のランディングページなどを簡単に作成できます。

elementorのホームページにインスタグラムのフィードを追加する

デザイン経験が全くないWordPressサイトの初心者であっても、美しいサイトを作成し、訪問者の関心を引きつけることは簡単です。

また、InstagramのフィードをElementorのページに追加して改善することもできます。そうすることで、より多くのインスタグラムのフォロワー、コンバージョン、そしてビジネスの売上を得ることができます。

ElementorのページにInstagramのフィードを追加すべき理由は以下の通りです:

  • ECサイト上で、レビューや顧客の声を紹介したInstagramの投稿を表示することができます。他の人があなたの商品を気に入っている様子を目にすることで、それは「ソーシャルプルーフ」として機能し、購入意欲を高めることにつながります。
  • インスタグラムのプロフィールのフィードをWooCommerceに追加することで、関連する画像やフル動画をウェブサイトに表示することができます。そのため、画像や動画をサイトにアップロードしなくても、より魅力的なページにすることができます。
  • 自分のインスタグラムの投稿をサイトに埋め込むことは、より多くの人に見てもらえることを意味する。そして、より多くのインスタグラムのフォロワーを獲得することができる。
  • Instagramのフィードを活用すれば、訪問者に素晴らしいオンラインショッピング体験を提供することも可能です。サイトに「ショッピング機能付き」のInstagramフィードを追加し、商品を直接販売することができます。

ご覧の通り、ElementorのInstagramフィードは、さまざまな方法でビジネスの宣伝や売上向上に役立ちます。

ElementorサイトにInstagramフィードを埋め込みたいですか?今すぐInstagram Feed Proを入手しましょう!

専門家のアドバイス:Instagramフィードを設定したら、Instagramチャットウィジェットを追加しましょう。そうすれば、コンテンツを気に入った訪問者がサイトを離れることなく、あなたにメッセージを送ることができます。ウェブサイトにInstagramチャットを設定する方法は以下の通りです。

よくある質問

これにはInstagramのビジネスアカウントが必要ですか?

はい。Instagram Feed Proはビジネスアカウントまたはクリエイターアカウントを通じて接続するため、個人プロフィールでは利用できません。アカウントの切り替えは無料で、Instagramアプリの「設定」から約1分で完了します。また、フォロワーから見たアカウントの外観には変化はありません。

「Business Basic」と「Business Advanced」の違いは何ですか?

「Business Basic」では、自分のプロフィールからの投稿が表示され、ほとんどのサイトに対応しています。「Business Advanced」では、ハッシュタグフィード、リール、ショッピング機能付きフィードが追加されます。ページに自分の投稿のみを表示したい場合は「Basic」を、これらの追加機能のいずれかを利用したい場合は「Advanced」を選択してください。

迷っている場合は、どのレイアウトを選べばいいですか?

グリッド。あらゆる種類のコンテンツに対応し、どの列幅でも見やすく表示されます。また、後から別のレイアウトに変更する場合でも、フィードを再構築することなく、カスタマイザーで2回クリックするだけで切り替えが可能です。

アクセストークンを生成せずに、これを実行することはできますか?

はい、そしてそここそが、皆さんが「時間がかかるだろう」と予想する5分間の部分です。「接続」をクリックし、読み取り専用アクセスを承認すれば、トークンの処理はプラグインが自動的に行います。開発者ダッシュボードから何かをコピーする必要は一切ありません。

このフィードは、6か月後も最新の情報であるでしょうか?

はい。Instagramから新しい投稿を自動的に取得するため、エディタを閉じた後もページは更新され続けます。5分という時間は総利用時間であり、月額料金ではありません。

今すぐElementorにInstagramフィードを追加しましょう

ElementorサイトにInstagramフィードを追加することは、コンテンツを新鮮で魅力的な状態に保つ素晴らしい方法です。

私の経験から言うと、手動埋め込みや複雑なウィジェットでこれを試みると、イライラすることがあります。

だからこそ、Smash Balloon Instagram Feed Proをお勧めします。このツールはプロセス全体を簡素化し、コーディング不要でわずか数分で美しくカスタマイズされたフィードを作成できます。

どうすれば始められるかは、以下の通りだ:

  • Instagram Feed Proを今すぐ入手し、14日間リスクフリーでお試しください。ElementorにInstagramフィードを簡単に追加する方法を始めましょう。
  • ビジュアルエディターを使用して、ウェブサイトのスタイルとブランディングに完璧にマッチする見事なフィードを作成しましょう
  • シンプルなドラッグ&ドロップウィジェットで、フィードをElementorページにシームレスに追加できます

Instagram Feed ProとElementorの併用についてご質問はありますか?コメント欄でお知らせください。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

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