DiviのウェブサイトにInstagramのフィードを追加する方法をお探しですか？
Elegant ThemesのDiviは、コーディング不要で簡単に美しいページを作成できるユーザーフレンドリーなサイトビルダーを備えた人気のテーマです。
また、InstagramのコンテンツをDiviウェブサイトでクロスプロモーションしたい場合、簡単なソリューションがあります。
この記事では、わずか数クリックでInstagramのフィードをDiviサイトに埋め込む方法をご紹介します。
以下は、この記事をナビゲートするための目次です。下のセクションをクリックすると、お好きなセクションに飛べます：
- DiviウェブサイトにInstagramフィードを追加する理由
- DiviのInstagramフィードをサイトに追加する最も簡単な方法
- DiviのウェブサイトにInstagramのフィードを追加する方法（5つの簡単なステップ）
- ボーナス：Diviサイトに魅力的な動画を追加する方法
DiviウェブサイトにInstagramフィードを追加する理由
人気のページビルダープラグインであるDiviは、ウェブサイトのデザインを簡単にします。ボタン、コールトゥアクションセクション、画像、アニメーションなどを使って、美しいWordPressサイトを作成できます。
Diviを使って、あなたのブランドのための素晴らしいWordPressウェブサイトをすでに構築したとしましょう。次のステップは、より多くの顧客を獲得するためのプロモーションです。
インターネットで何かを宣伝したいのであれば、ソーシャルメディアを無視することはできない。
2023年の世界のソーシャルメディアユーザーは推定48億9000万人で、これは世界人口の約半分に相当する。
スタティスタ
インスタグラムだけで、あなたがリーチできるアクティブなインスタグラムユーザーは10億人を超える！
また、インスタグラムを使ってブランドを宣伝したいなら、Diviサイトにインスタグラムの投稿フィードを追加するのが簡単な方法だ。
実際、インスタグラムのフィードがあなたのサイトを助けることができる素晴らしい方法をいくつか紹介しよう：
- エンゲージメントを高める - 関連するインスタグラムコンテンツのハッシュタグフィードを埋め込むことで、サイト訪問者の注目を集め、サイトとの交流を促します。
- ブランドの信頼を築く - 顧客からのレビューや証言を埋め込めば、社会的証明として機能します。つまり、実際に商品を楽しんでいる人を見ることで、訪問者の購買意欲を刺激することができるのです。
- 売上の増加 - Diviウェブサイトにショッピング可能なInstagramフィードを追加すると、サイト訪問者に商品ページを直接宣伝することができるため、サイト訪問者が購入する可能性が高まります。
- 時間の節約-インスタグラムのフィードは自動的に更新されるため、手動でアップロードすることなく、美しいインスタグラムの画像や動画をウェブサイトに表示することができます。
- オンラインプレゼンスを高める： インスタグラムの投稿をサイトに表示することで、インスタグラムのフォロワーを増やし、さらに多くの潜在顧客にアプローチすることができます。
しかし、Diviで素晴らしいウェブサイトを構築することはできても、ソーシャルメディアマーケティングの機能はあまり備わっていない。
そこで、コーディング不要ですぐにインスタグラムのフィードを追加できる、ワードプレスに最適なインスタグラムフィードプラグインをご紹介します！
さらに良いことに、このプラグインはDiviウェブサイトでも100％うまく機能する。
DiviのInstagramフィードをウェブサイトに追加する最も簡単な方法
DiviのウェブサイトにInstagramのフィードを追加する最も簡単な方法は、市場で最高のInstagramフィードプラグインであるInstagram Feed Proを使用することです。
インスタグラムのフィードアグリゲーターとしてNo.1のInstagram Feed Proは、コーディング不要で、わずか数クリックでインスタグラムのフィードを作成、カスタマイズし、Diviサイトに埋め込むことができます。
その上、以下のような素晴らしい機能も満載なので、すぐにインスタグラムのフィードを追加し始めることができる：
- 超簡単で迅速なセットアップ：カスタムCSSやJavaScriptのような複雑なコーディング言語は必要ありません。
- 豊富な飼料の種類： たくさんのフィードタイプから選ぶことができる。ハッシュタグフィード、インスタグラムリール、インスタグラムフィードカルーセルをサポートしています。
- ビジュアルフィードカスタマイザー：インスタグラムのフィードはすべて高度にカスタマイズ可能なので、ビジュアル・カスタマイザーを使って数回クリックするだけでパーソナライズできる。
- 軽量かつ高速：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プラグインを入手しよう。あとは、Diviサイトにインストールして 有効化 するだけだ。
その方法がわからない場合は、WordPressにプラグインをインストールする方法についてのチュートリアルをご覧ください。
ステップ2：インスタグラムのフィードを作成する
これですぐにインスタグラムのフィードを作成できる。
次に、WordPressのダッシュボードからInstagramのフィード " すべてのフィードに 移動します。そして、新規追加 ボタンをクリックして、新しいインスタグラムフィードを作成します。
その後、Diviウェブサイトに表示するInstagramフィードの種類を選択できる。
ここには3つのオプションがある：
- ユーザーのタイムライン： インスタグラムのプロフィールからすべての写真と動画を表示
- 公開ハッシュタグ： 特定のハッシュタグを持つInstagramの投稿を表示するように選択します。
- タグ付けされた投稿 Instagramのフィードを使用して、あなたのアカウントにタグ付けされた投稿を表示します。
リストから希望のインスタグラムフィードタイプを選んだら、「次へ」をクリックする。
このチュートリアルでは、ユーザーのタイムラインフィードを使用します。
ステップ3：インスタグラムのアカウントに接続する
このステップでは、あなたのビジネスまたはクリエイターのインスタグラムアカウントをこの新しいフィードに接続することができる。
インスタグラムのアカウントをまだお持ちでない方は、アカウントをアップグレードするためのガイドをご覧ください。
次のページで、Add Source ボタンをクリックする。
次に、インスタグラムの接続をベーシックと アドバンスから 選ぶことができる。
基本的な接続を使えば、インスタグラムのアカウントから写真や動画を投稿できる。
高度な接続により、ハッシュタグフィード、ショッパブルフィード、ストーリー、メンションなど、あらゆる種類のコンテンツを表示できる。
使用したいインスタグラムの接続を選び、「接続」をクリックする。
このガイドでは、インスタグラムの上級者向けコネクションを使うことにする。
次のページで、Facebookと接続する ボタンをクリックします。
プラグインはFacebookにリダイレクトします。ここで、プラグインにあなたのアカウントへの読み取り専用アクセス権を与えることができます。
つまり、Instagram Feed ProはあなたのInstagramのコンテンツを見ることはできますが、変更を加えることはできません。
Continue（続行）ボタンを押すだけで、次に進むことができます。
アカウントの設定を完了するには、ウェブサイトに接続したインスタグラムのアカウントをクリックし、「追加」をクリックします。
プラグインのダッシュボードに戻ります。最後に「Next 」をクリックして、InstagramアカウントをDiviサイトに統合することができます。
ステップ4：インスタグラムのフィードをカスタマイズする
美しいフィードを素早くデザインできるよう、Instagram Feed Proにはインポート可能なフィードテンプレートが付属している。
ユニークなデザインのテンプレートがたくさんあります：
- デフォルト
- シンプルなグリッド
- シンプル・グリッドXL
- シンプルな列
- シンプルなカルーセル
- 石工カード
- ハイライト
- シングルポスト
- シングルポストカルーセル
DiviのInstagramフィードに表示したいテンプレートを選択したら、「Next」をクリックします。
次のページでは、ビジュアルフィードカスタマイザーが表示されます。ここでは、ライブフィードエディタを使って、インスタグラムフィードのデザインとコンテンツをカスタマイズすることができます。
左側には、Instagramフィードのデザインを変更するためのすべてのオプションがあるカスタマイズパネルが表示されます。
つまり、フィードのレイアウト、カラースキーム、ヘッダーのスタイル、フィードのサイズ、ロードモアボタン、投稿のデザインなどを数クリックで設定することができます。
そして右側では、インスタグラムのフィードのライブプレビューで、すべての変更をリアルタイムで見ることができる。
フィードレイアウトオプションを クリックして、DiviサイトのInstagramフィードのカスタマイズを開始します。
ここでは、Diviソーシャルメディアフィードのレイアウトオプションを4種類から選択できます：
- グリッド
- カルーセル
- 石工
- ハイライト
グリッドレイアウトを使えば、たくさんの写真や動画を整然と並べたイメージギャラリーを見せることができます。
Diviのソーシャルメディアフィードをダイナミックに見せたいなら、カルーセルオプションがあります。
この方法で、Diviサイトに美しいInstagramスライダーを追加できる。
インスタグラムの投稿のオリジナルの比率を維持したいですか？
そして、私が作成したこの例のように、石積みの オプションを選ぶことができる。
最後に、インスタグラムの投稿をより見やすくするハイライト オプションがある。
このレイアウトでは、投稿のサイズが4倍になります。
あとは、好きなインスタグラムのフィードレイアウトを選んで「保存」をクリックするだけ。
Divi Instagramフィードのカスタマイズを続けたいですか？小さなカスタマイズ ボタンをクリックしてください。
ここから、配色 オプションをクリックして続けることができます。
インスタグラムのフィードの色を簡単に設定できるように、4つの配色から選ぶことができる：
- テーマからの継承：あなたのウェブサイトのWordPressテーマの色を使用する
- 明るい：DiviのInstagramフィードの背景を明るく、フォントを暗くします。
- 暗い：暗い背景で明るい文字色を使用する。
- カスタム：手動ですべての色を選択する
配色を選んだら、「保存」 ボタンをクリックして変更を確定します。
その後、残りのオプションを使ってInstagramフィードを自分好みにカスタマイズできる。サイズ、投稿スタイル、フォント、フォローボタンのデザインなどを選択できる。
ステップ5：InstagramのフィードをDiviに追加する
最後に、InstagramのフィードをDivi WordPressサイトに追加する方法をご紹介しましょう。投稿やページに直接追加することもできますし、サイドバーに掲載することもできます。
DiviでWordPressページにInstagramフィードを追加する
インスタグラムのフィードをワードプレスのページに追加するには、ライブフィードエディターから始めることができます。
まず、上部にある埋め込み ボタンをクリックします。
すると、あなたのInstagramフィードのショートコードが書かれたポップアップが表示されます。このコードをサイトに貼り付ければ、インスタグラムのフィードを埋め込むことができる。
続行するには、コピー ボタンをクリックします。
その後、ダッシュボードからページ " 新規追加に 進み、WordPressエディタを開きます。
ここで、「Use Divi Builder 」ボタンをクリックします。
WordPressの投稿にも同じことができる。WordPressのダッシュボードから、投稿 " 新規追加に 進み、Divi Builderを使うをクリックするだけです。
Diviページビルダーが開きます。ここでは、3つの方法があります：
- ビルド開始：空白のテンプレートから始め、ページを構築することができます。
- レイアウトを見る： あらかじめ用意されたレイアウトをチェックし、編集を開始します。
- ページを選択します：または、既存のページのデザインをコピーして編集することもできます。
どちらかお好きな方をお選びください。
Start Buildingオプションを選択すると、白紙のテンプレートからすぐに編集を開始することができます。
しかし、「レイアウトを参照 」を選ぶと、「ライブラリから読み込む 」ポップアップが表示されます。ここで利用可能なすべてのレイアウトをブラウズできます。
ページのレイアウトを選択するには、そのレイアウトをクリックするだけです。
レイアウトの詳細 ページが開きます。あとは「このレイアウトを使用する 」をクリックするだけで、ページの編集を始めることができます。
代わりに「ページを選択 」を選ぶと、あなたがデザインした既存のページレイアウトが表示されます。
ここで、いずれかのオプションをクリックするだけで、年齢の編集を開始することができます。
DiviにInstagramフィードを追加する前に、そのためのスペースを作る必要があります。これは、新しい行を作成することを意味します。
そのためには、Diviビルダーのページにある小さな緑色のプラスアイコン（+）をクリックします。
行の挿入 」ポップアップが表示されます。ここで利用可能な行のコレクションから好きなものをクリックして選択するだけです。
最後に、プラスアイコン（+）を クリックして、Diviページに新しいモジュールを追加できます。
次に、検索バーを使ってコードモジュールを探し、下の検索結果からそれをクリックする。
そうすると、左側にコード設定が表示されます。ここで、コードフィールドに行き、先ほどのショートコードを貼り付けます。
そして、右下のチェックアイコンを クリックしてください。
これで完了です！これでDiviサイトにInstagramフィードが追加されました。
ご覧の通り、このWordPressソーシャルメディアフィードプラグインを使えば、技術に詳しくなくてもインスタグラムの投稿を超簡単に埋め込むことができる。
これで、ウェブサイトにアクセスすると、DiviのInstagramフィードがページに埋め込まれているのが見えます。
DiviのInstagramフィードをサイドバーに追加
Instagramのフィードをサイドバーやフッターに表示したい場合はどうすればいいのか？
それでは、InstagramのフィードをInstagramウィジェットとしてDiviのサイドバーやフッターに埋め込む方法について説明しよう。
まず、WordPressのダッシュボードから「外観 " ウィジェット」を開きます。
このページでサイドバーパネルを クリックし、インスタグラムのフィードをDiviテーマのサイドバーエリアに追加する。
また、InstagramのフィードをDiviのフッターエリアに表示したい場合は、フッターパネルを クリックすればよい。
このチュートリアルではサイドバーを使います。
サイドバーを選択した後、プラスアイコン（+）を クリックし、オプションからショートコードウィジェットを 選択します。
最後に、先ほどのショートコードをショートコードフィールドに 貼り付けます 。
ショートコードの貼り付けが終わったら、Updateを クリックして変更を保存してください。
これでDiviのサイドバーにInstagramのフィードが追加されました。Instagram Feed Proのようなプラグインを使ったからこそ、こんなに素早く簡単にできたのだ。
あなたのサイトをチェックするだけで、インスタグラムのフィードがサイドバー部分に埋め込まれているのがわかる。
以下に、このチュートリアルのために作成したInstagramのdiviフィードの例を示します。
ボーナス：Diviサイトに魅力的な動画を追加する方法
DiviのInstagramフィードを設定したら、ソーシャルメディアマーケティングを次のステップに進める素晴らしい方法があります。
10億人以上のアクティブユーザーを持つTikTokは、ショートビデオのNo.1プラットフォームであり、あなたのビデオを投稿し、新しい人々にリーチするための素晴らしい場所です。
また、あなたがTikTokに積極的に投稿していなくても、あなたの競合が代わりに投稿していることになる。
良いニュースは？DiviサイトにTikTok動画を追加することで、サイトのトラフィックを再生回数、「いいね！」数、TikTokフォロワー数に簡単に変換できます。
そして、TikTokの視聴者にInstagramや他のソーシャルメディアプラットフォームをフォローしてもらうことができる。
さらに、TikTokをあなたのサイトに統合するのはとても簡単です。TikTok Feed Proを使えば、わずか数分でTikTok動画をDiviに追加することができます！
専門家のアドバイスすぐに始めるには、DiviウェブサイトにTikTokフィードを追加する方法のガイドをご覧ください。
以上だ！この記事で、InstagramのフィードをDiviのウェブサイトに数分で埋め込む方法をご理解いただけたと思います。
Instagram Feed Proプラグインを使えば、WordPressを初めて使う人でも、Instagramのコンテンツをサイトに追加するのがこれまで以上に簡単になります。
Instagramフィードでより多くのフォロワーとエンゲージメントを獲得する準備はできていますか？今すぐInstagram Feed Proを使い始めれば、DiviテーマにInstagramフィードを作成、カスタマイズ、追加して、ウェブサイトを成長させることができます。
Diviに他のソーシャルメディアフィードを埋め込みたいですか？次の記事をご覧ください：
- Divi WordPressサイトにYouTube動画を表示する方法
- DiviにGoogleレビューウィジェットを埋め込む方法
- DiviのWordPressサイトにFacebookフィードを簡単に追加する方法
この記事がお役に立ちましたら、Twitterや Facebookをフォローしてください。
