DiviのウェブサイトにInstagramのフィードを追加する方法（最良の方法）

DiviのウェブサイトにInstagramのフィードを追加する方法をお探しですか？

Elegant ThemesのDiviは、ユーザーフレンドリーなサイトビルダーを備えた人気のテーマで、簡単に美しいページを作成することができます。

また、InstagramのコンテンツをDiviウェブサイトでクロスプロモーションしたい場合、簡単なソリューションがあります。

この記事では、わずか数クリックでInstagramのフィードをDiviサイトに埋め込む方法をご紹介します。

以下は、この記事をナビゲートするための目次です。下のセクションをクリックすると、お好きなセクションに飛べます：

DiviウェブサイトにInstagramフィードを追加する理由

人気のページビルダープラグインであるDiviは、ウェブサイトのデザインを簡単にします。ボタン、コールトゥアクションセクション、画像、アニメーションなどを使って、美しいWordPressサイトを作成できます。

Diviを使って、あなたのブランドのための素晴らしいWordPressウェブサイトをすでに構築したとしましょう。次のステップは、より多くの顧客を獲得するためのプロモーションです。

インターネットで何かを宣伝したいのであれば、ソーシャルメディアを無視することはできない。

インスタグラムだけでも、あなたがリーチできるアクティブなインスタグラムユーザーは20億人以上いる！

また、インスタグラムを使ってブランドを宣伝したいなら、Diviサイトにインスタグラムの投稿フィードを追加するのが簡単な方法だ。

実際、インスタグラムのフィードがあなたのサイトを助けることができる素晴らしい方法をいくつか紹介しよう：

• エンゲージメントを高める - 関連するインスタグラムコンテンツのハッシュタグフィードを埋め込むことで、サイト訪問者の注目を集め、サイトとの交流を促します。
• ブランドの信頼を築く - 顧客からのレビューや証言を埋め込めば、社会的証明として機能します。つまり、実際に商品を楽しんでいる人を見ることで、訪問者の購買意欲を刺激することができるのです。
• 売上の増加 - Diviウェブサイトにショッピング可能なInstagramフィードを追加すると、サイト訪問者に商品ページを直接宣伝することができるため、サイト訪問者が購入する可能性が高まります。
• 時間の節約-インスタグラムのフィードは自動的に更新されるため、手動でアップロードすることなく、美しいインスタグラムの画像や動画をウェブサイトに表示することができます。
• オンラインプレゼンスを高める： インスタグラムの投稿をサイトに表示することで、インスタグラムのフォロワーを増やし、さらに多くの潜在顧客にアプローチすることができます。

しかし、Diviで素晴らしいウェブサイトを構築することはできても、ソーシャルメディアマーケティングの機能はあまり備わっていない。

良いニュースは、あなたがすぐにInstagramのフィードを追加し始めることができるように、WordPressのための最高のInstagramのフィードプラグインを紹介することです！

さらに良いことに、このプラグインはDiviウェブサイトでも100％うまく機能する。

DiviのInstagramフィードをウェブサイトに追加する最も簡単な方法

DiviのウェブサイトにInstagramのフィードを追加する最も簡単な方法は、市場で最高のInstagramフィードプラグインであるInstagram Feed Proを使用することです。

インスタグラムのフィードアグリゲーターとしてNo.1のInstagram Feed Proは、コーディング不要で、わずか数クリックでインスタグラムのフィードを作成、カスタマイズし、Diviサイトに埋め込むことができます。

その上、以下のような素晴らしい機能も満載なので、すぐにインスタグラムのフィードを追加し始めることができる：

• 超簡単で迅速なセットアップ：カスタムCSSやJavaScriptのような複雑なコーディング言語は必要ありません。
• 豊富な飼料の種類： たくさんのフィードタイプから選ぶことができる。このプラグインは、ハッシュタグフィード、Instagram Reels、Instagramフィードカルーセルをサポートしています。
• ビジュアルフィードカスタマイザー：インスタグラムのフィードはすべて高度にカスタマイズ可能なので、ビジュアル・カスタマイザーを使って数回クリックするだけでパーソナライズできる。

• 軽量かつ高速：Instagram Feed Proは軽量に最適化されているため、Instagramのフィードとサイトの読み込みが超高速になり、SEOに最適です。
• インスタグラム・ショッピング： オンラインストアやWooCommerceサイトでは、ショッピング可能なフィードを作成し、訪問者があなたから購入し、コンバージョンを高めることができます。
• 最高のカスタマーサポート：インスタグラム・フィード・プロでは、フィードに問題が発生した場合に、WordPressの専門家チームがあなたをサポートします。

使いやすくカスタマイズしやすいため、Instagram Feed ProはDiviとも互換性のあるWordPress用の最高のInstagramフィードプラグインとなっている。

現在、100万人以上のアクティブユーザーを抱え、評価は 星4.9/5。そして、そのユーザーベースには、世界的に有名なブランドも含まれている。

ご覧のように、コカ・コーラのような有名企業でさえ、スマッシュ・バルーンのインスタグラム・フィードやスマッシュ・バルーンのソーシャルメディア・プラグインを使って、ソーシャルメディア・フィードをサイトに追加している。

Smash BalloonはDiviでは使えないと思っている方もご安心ください。すべてのSmash BalloonプラグインはDiviと完全に互換性があります。

DiviウェブサイトにInstagramフィードを設定する準備はできましたか？今すぐInstagram Feed Proを始めましょう！

DiviのウェブサイトにInstagramのフィードを追加する方法（5つの簡単なステップ）

DiviのウェブサイトにInstagramのフィードを埋め込むには、以下のステップバイステップの指示に従うだけです。

始めよう。

ステップ1：Instagram Feed Proのインストールと有効化

まず、Instagram Feed Proプラグインを入手する必要がある。

プラグインのzipファイルを入手したら、Diviのウェブサイトにインストールして有効化するだけです。

プラグインをインストールする方法については、チュートリアルをご覧ください。

ステップ2：新しいDiviインスタグラムフィードを作成する

プラグインがアクティブになったので、最初のフィードを作成できます。

開始するには、WordPressのダッシュボードからInstagramのフィード " すべてのフィードに移動します。

次に、新規追加ボタンをクリックしてセットアップを開始します。

プラグインは、Diviサイトに表示するフィードの種類を選択するよう求めます。主な選択肢は3つあります：

• ユーザーのタイムライン：Instagramのプロフィールからすべての写真とビデオを表示します。
• 公開ハッシュタグ：特定のハッシュタグを含むInstagramの投稿を表示します。
• タグ付き投稿あなたのアカウントにタグ付けされた投稿のフィードを作成します。

最適なオプションを選択したら、「Next」ボタンをクリックします。

このガイドでは、ユーザータイムラインフィードタイプについて説明します。

ステップ3：インスタグラムのアカウントに接続する

このステップでは、Instagramアカウントをフィードにリンクさせます。最良の結果を得るには、ビジネスアカウントまたはクリエイターアカウントを使用することをお勧めします。

インスタグラムのアカウントをまだお持ちでない方は、アカウントをアップグレードするためのガイドをご覧ください。

次のページで、Add Source ボタンをクリックする。

次に、インスタグラムの接続をビジネス・ベーシックと ビジネス・アドバンスから 選ぶことができる。

基本的な接続を使えば、インスタグラムのアカウントから写真や動画を投稿できる。

高度な接続により、ハッシュタグフィード、ショッパブルフィード、ストーリー、メンションなど、あらゆる種類のコンテンツを表示できる。

使用したいインスタグラムの接続を選び、「接続」をクリックする。

このガイドでは、インスタグラムの上級者向けコネクションを使うことにする。

次のページで、Facebookと接続する ボタンをクリックします。

プラグインはFacebookにリダイレクトします。ここで、プラグインにあなたのアカウントへの読み取り専用アクセス権を与えることができます。

つまり、Instagram Feed ProはあなたのInstagramのコンテンツを見ることはできますが、変更を加えることはできません。

Continue（続行）ボタンを押すだけで、次に進むことができます。

プラグイン設定に戻ったら、先ほど接続したアカウントを選択し、追加をクリックします。

最後に、「次へ」ボタンをクリックしてアカウントの接続を完了し、カスタマイズのステップに進みます。

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

美しいフィードを素早くデザインできるよう、Instagram Feed Proにはインポート可能なフィードテンプレートが付属している。

ユニークなデザインのテンプレートがたくさんあります：

• デフォルト
• シンプルなグリッド
• シンプル・グリッドXL
• シンプルな列
• シンプルなカルーセル
• 石工カード
• ハイライト
• シングルポスト
• シングルポストカルーセル

DiviのInstagramフィードに表示したいテンプレートを選択したら、「Next」をクリックします。

次のページでは、ビジュアルフィードカスタマイザーが表示されます。ここでは、ライブフィードエディタを使って、インスタグラムフィードのデザインとコンテンツをカスタマイズすることができます。

左側には、Instagramフィードのデザインを変更するためのすべてのオプションがあるカスタマイズパネルが表示されます。

つまり、フィードのレイアウト、カラースキーム、ヘッダーのスタイル、フィードのサイズ、ロードモアボタン、投稿のデザインなどを数クリックで設定することができます。

そして右側では、インスタグラムのフィードのライブプレビューで、すべての変更をリアルタイムで見ることができる。

フィードレイアウトオプションを クリックして、DiviサイトのInstagramフィードのカスタマイズを開始します。

ここでは、Diviソーシャルメディアフィードのレイアウトオプションを4種類から選択できます：

• グリッド
• カルーセル
• 石工
• ハイライト

グリッドレイアウトを使えば、たくさんの写真や動画を整然と並べたイメージギャラリーを見せることができます。

Diviのソーシャルメディアフィードをダイナミックに見せたいなら、カルーセルオプションがあります。

この方法で、Diviサイトに美しいInstagramスライダーを追加できる。

インスタグラムの投稿のオリジナルの比率を維持したいですか？

そして、私が作成したこの例のように、石積みの オプションを選ぶことができる。

最後に、インスタグラムの投稿をより見やすくするハイライト オプションがある。

このレイアウトでは、投稿のサイズが4倍になります。

あとは、好きなインスタグラムのフィードレイアウトを選んで「保存」をクリックするだけ。

Divi Instagramフィードのカスタマイズを続けたいですか？小さなカスタマイズ ボタンをクリックしてください。

ここから、配色 オプションをクリックして続けることができます。

インスタグラムのフィードの色を簡単に設定できるように、4つの配色から選ぶことができる：

• テーマからの継承：あなたのウェブサイトのWordPressテーマの色を使用する
• 明るい：DiviのInstagramフィードの背景を明るく、フォントを暗くします。
• 暗い：暗い背景で明るい文字色を使用する。
• カスタム：手動ですべての色を選択する

配色を選んだら、「保存」 ボタンをクリックして変更を確定します。

その後、残りのオプションを使ってInstagramフィードを自分好みにカスタマイズできる。サイズ、投稿スタイル、フォント、フォローボタンのデザインなどを選択できる。

ステップ5：DiviのInstagramフィードを埋め込む

最後に、InstagramのフィードをDivi WordPressサイトに追加する方法を紹介しよう。これには2つの方法があります：

• DiviのInstagramフィードをページに追加する
• DiviのInstagramフィードをサイドバーまたはフッターに追加する

投稿やページに直接追加することもできるし、サイドバーに掲載することもできる。

方法1：DiviのInstagramフィードをページに追加する

Divi WordPressのページにInstagramのフィードを追加するには、ライブフィードエディタから始めることができます。

まず、上部にある埋め込み ボタンをクリックします。

すると、あなたのInstagramフィードのショートコードが書かれたポップアップが表示されます。このコードをサイトに貼り付ければ、インスタグラムのフィードを埋め込むことができる。

続行するには、コピー ボタンをクリックします。

その後、ダッシュボードからページ " 新規追加に 進み、WordPressエディタを開きます。

ここで、「Use Divi Builder 」ボタンをクリックします。

WordPressの投稿にも同じことができる。

WordPressのダッシュボードから、投稿 " 新規追加に 進み、Divi Builderを使うをクリックするだけです。

Diviページビルダーが開きます。ここでは、3つの方法があります：

• ビルド開始：空白のテンプレートから始め、ページを構築することができます。
• レイアウトを見る： あらかじめ用意されたレイアウトをチェックし、編集を開始します。
• ページを選択します：または、既存のページのデザインをコピーして編集することもできます。

どちらかお好きな方をお選びください。

Start Buildingオプションを選択すると、白紙のテンプレートからすぐに編集を開始することができます。

しかし、「レイアウトを参照 」を選ぶと、「ライブラリから読み込む 」ポップアップが表示されます。ここで利用可能なすべてのレイアウトをブラウズできます。

ページのレイアウトを選択するには、そのレイアウトをクリックするだけです。

レイアウトの詳細 ページが開きます。あとは「このレイアウトを使用する」をクリックするだけで、ページの編集を始めることができます。

代わりに「ページを選択 」を選ぶと、あなたがデザインした既存のページレイアウトが表示されます。

ここで、いずれかのオプションをクリックするだけで、年齢の編集を開始することができます。

DiviにInstagramフィードを追加する前に、そのためのスペースを作る必要があります。これは、新しい行を作成することを意味します。

そのためには、Divi Builderのページにある小さな緑色のプラスアイコン（+）をクリックします。

行の挿入 」ポップアップが表示されます。ここで利用可能な行のコレクションから好きなものをクリックして選択するだけです。

最後に、プラスアイコン（+）を クリックして、Diviページに新しいモジュールを追加できます。

次に、検索バーを使ってコードモジュールを探し、下の検索結果からそれをクリックする。

そうすると、左側にコード設定が表示されます。ここで、コードフィールドに行き、先ほどのショートコードを貼り付けます。

そして、右下のチェックアイコンを クリックしてください。

これで完了です！これでDiviサイトにInstagramフィードが追加されました。

ご覧の通り、このWordPressソーシャルメディアフィードプラグインを使えば、技術に詳しくなくてもインスタグラムの投稿を超簡単に埋め込むことができる。

これで、ウェブサイトにアクセスすると、DiviのInstagramフィードがページに埋め込まれているのが見えます。

方法2：DiviのInstagramフィードをサイドバーまたはフッターに追加する

Instagramのフィードをサイドバーやフッターに表示したい場合はどうすればいいのか？

それでは、InstagramのフィードをInstagramウィジェットとしてDiviのサイドバーやフッターに埋め込む方法について説明しよう。

まず、WordPressのダッシュボードから「外観 " ウィジェット」を開きます。

このページでサイドバーパネルを クリックし、インスタグラムのフィードをDiviテーマのサイドバーエリアに追加する。

また、フッターにインスタグラムのコンテンツを表示したい場合は、フッターパネルを クリックしてください。

このチュートリアルではサイドバーを使います。

サイドバーを選択した後、プラスアイコン（+）を クリックし、オプションからショートコードウィジェットを 選択します。

最後に、先ほどのショートコードをショートコードフィールドに 貼り付けます 。

ショートコードの貼り付けが終わったら、Updateを クリックして変更を保存してください。

Instagramフィードの埋め込みが完了しました！ウェブサイトにアクセスすると、Diviのページや投稿に表示されるライブフィードを確認できます。

以下は、このチュートリアルのために作成したDiviのInstagramフィードの例です。

Instagramを超える：TikTok動画でDiviサイトを強化する

DiviのInstagramフィードを設定したら、ソーシャルメディアマーケティングを次のステップに進める素晴らしい方法があります。

16億人以上のアクティブユーザーを抱えるTikTokは、短編動画コンテンツの圧倒的なプラットフォームとして急速に成長し、新たな視聴者にリーチする比類のない機会を提供している。

良いニュースは？TikTok動画をDiviサイトに追加することで、以下のことが可能になります：

• ウェブサイトのトラフィックを変換します：サイト訪問者をTikTokの視聴者、「いいね！」、フォロワーに変え、コンテンツのリーチを広げます。
• クロスプロモート：TikTokの視聴者がInstagramや他のソーシャルプラットフォームをフォローするよう誘導し、マルチチャネルのコミュニティを育成する。
• 競争力を維持視聴者や競合他社が積極的に関与する場所で、貴社のブランドが常に目に留まり、適切であるようにします。

さらに、TikTokをあなたのサイトに統合するのはとても簡単です。TikTok Feed Proを使えば、わずか数分でTikTok動画をDiviに追加できます！

Instagram Feed Proのように、TikTok Feed Proは全てのプロセスを簡素化し、100％コードフリーにしている。

専門家のアドバイスすぐに始めるには、DiviウェブサイトにTikTokフィードを追加する方法をご覧ください。

それで終わりだ！

この記事では、InstagramのフィードをDiviのウェブサイトに数分で埋め込む方法を紹介した。

Instagram Feed Proプラグインを使えば、WordPressを初めて使う人でも、Instagramのコンテンツをサイトに追加するのがこれまで以上に簡単になります。

Instagramのフィードでより多くのフォロワーとエンゲージメントを得る準備はできていますか？

今すぐInstagram Feed Proを使い始めれば、DiviテーマにInstagramフィードを作成、カスタマイズ、追加して、ウェブサイトを成長させることができます。

Diviサイトのさらなる強化：より多くのソーシャルメディア統合

Diviでより多くのソーシャルメディアプラットフォームをシームレスに統合したいですか？Diviのエキスパートによる関連ガイドをご覧ください：

• Divi WordPressサイトにYouTube動画を表示する方法
• DiviにGoogleレビューウィジェットを埋め込む方法
• DiviのWordPressサイトにFacebookフィードを簡単に追加する方法
• DiviサイトにGoogleレビューウィジェットを埋め込む方法