ElementorのウェブサイトにInstagramのフィードをすばやく表示する方法をお探しですか？
インスタグラムのフィードを追加することは、サイトを新鮮に保ち、エンゲージメントを高め、訪問者にインスタグラムをフォローしてもらうための素晴らしい方法です。
インスタグラムでのオーガニックなリーチを維持することが難しくなっている中、ウェブサイトで投稿を共有することで、より多くのオーディエンスとのつながりを築くことができる。
しかし、通常の方法でInstagramのフィードをElementorに完璧に表示させるのは、混乱しがちで時間がかかります。特にコードやウィジェットに慣れていない場合はなおさらだ。
初めてインスタグラムのフィードをElementorに統合しようとしたときのことを覚えている。私はWordPressの初心者だったので、大変でした。
スマッシュ・バルーンでのデジタルマーケターとしての長年の経験で、ユーザーがインスタグラムのフィードをサイト上で美しく表示できるようサポートし、本当に効果的なものを見つけました。
この記事では、私がInstagramのフィードをElementorに追加する手順を5分以内で説明する。初めての方でも、技術に詳しくない方でも大丈夫です！
この記事で
ElementorにInstagramフィードを追加する最も簡単な方法とは？
すべての選択肢の中から、私はこのガイドのためにInstagram Feed Proを選んだ。
複雑な埋め込みコードや長いセットアップに対処する必要はありません。わずか数分で美しいInstagramフィードを作成し、Elementorサイトに追加できます。
実際、このツールを競合他社から際立たせる素晴らしい機能がいくつかある。
- 簡単で迅速なセットアップ： インスタグラム・フィード・プロのセットアップは、コーディング不要で数分しかかかりません。
- たくさんのフィードタイプ： Instagram Feed Proでは、様々なタイプのフィードを選択することができます。ハッシュタグフィード、インスタグラムリール、ショッピング可能なインスタグラムフィードなどを表示できます。
- ショッピング可能なフィード： シンプルなリンクインバイオの代わりに、ショッピング可能なInstagramフィードを作成し、Instagramの投稿に商品をリンクすることで、訪問者にスムーズなショッピング体験を提供することができます。
- あなたのブランディングにマッチします：さらに、このプラグインで作成したフィードはすべて、あなたのウェブサイトの外観を自動的にコピーします。あなたのブランディングとWordPressのテーマに完璧にマッチした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に接続し終える。
簡単だったでしょう？インスタグラムのアクセストークンを手動で作成する必要もなかった。数回クリックするだけで、インスタグラムのアカウントがあなたのフィードに接続されました。
ステップ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に追加されました！あなたのウェブサイトをチェックしてみてください。
それで終わりだ！
ご覧の通り、InstagramフィードウィジェットをElementorに追加するのはとても簡単です。Instagram Feed Proプラグインを使えば、必要なのは数回の簡単なクリックだけで、コードを1行も触る必要はありません。
そして今、あなたのサイトにもそれが可能になり、コンバージョンを高め、より多くの売上を得るための魅力的なページを作成することができる。
なぜInstagramのフィードをElementorに追加するのか？
ElementorはWordPressで人気のランディングページ・ビルダー・プラグインです。
シンプルなエディターで、404ページ、メンテナンスモードページ、セールスページ、その他のランディングページなどのウェブページを作成できます。
また、InstagramのフィードをElementorのページに追加して改善することもできます。そうすることで、より多くのインスタグラムのフォロワー、コンバージョン、そしてビジネスの売上を得ることができます。
ElementorのページにInstagramのフィードを追加すべき理由は以下の通りです：
- あなたのECサイトでは、レビューや体験談のインスタグラム投稿を表示することができる。他の人があなたの商品を楽しんでいるのを見れば、社会的証明として機能し、あなたから購入する可能性が高くなる。
- インスタグラムのプロフィールのフィードをWooCommerceに追加することで、関連する画像やフル動画をウェブサイトに表示することができます。そのため、画像や動画をサイトにアップロードしなくても、より魅力的なページにすることができます。
- 自分のインスタグラムの投稿をサイトに埋め込むことは、より多くの人に見てもらえることを意味する。そして、より多くのインスタグラムのフォロワーを獲得することができる。
- Instagramのフィードは、訪問者に素晴らしいオンラインショッピング体験を与えることもできます。ショッピング可能なインスタグラムフィードをサイトに追加し、商品を直接販売することができます。
ご覧のように、ElementorのInstagramフィードは、あなたのビジネスを促進し、多くの方法でより多くの売上を得るのに役立ちます。
ElementorサイトにInstagramフィードを埋め込みたいですか？今すぐInstagram Feed Proを入手しましょう！
リールをお持ちですか？インスタグラムのリールの閲覧数を増やす方法について、参考になる記事をご紹介します。
Elementorにソーシャルフィードを追加する人気記事
- ElementorでYouTubeプレイリストを埋め込む方法（ベストな方法）
- ElementorにTwitterフィードを追加する方法
- ElementorにYouTube動画ギャラリーを追加する方法
- 初心者向け】Elementorにソーシャルメディア・フィードを追加する方法
