Instagram フィードをウェブサイトに無料で埋め込む方法 (101 ガイド)

Instagram フィードを Web サイトに埋め込みたいとお考えですか? オンラインでの存在感を高め、新鮮でダイナミックなコンテンツで訪問者を引き付けるのに役立ちます。カラフルな Instagram の投稿や魅力的な動画を紹介することで、視聴者をあなたの世界に招き入れ、楽しくシームレスにコンテンツとやりとりできるようにします。

このシンプルな追加によって、サイトに活気のある雰囲気がどのように作り出されるかを見てみましょう。

ショートガイド: ウェブサイトに Instagram フィードを追加するにはどうすればいいですか?

1. ログインまたは ユーザー登録 タグボックス付き
2. ダッシュボードの「ソーシャルフィードを追加」をクリックします
3. ソースとして「Instagram」を選択
4. 次に、「ハッシュタグ(#)」、「ハンドル(@)」、「ストーリー(@)」などのいずれかを入力してフィードを追加します。
5. 次に、「フィードを作成」をクリックしてInstagramビジネスアカウントを接続します。
6. フィードの準備ができました
7. 「公開」をクリックし、ウェブサイト構築プラットフォームを選択します。
8. 最後に、埋め込みコードをコピーしてバックエンドに貼り付けます。簡単ですよね?

技術的な専門知識や複雑な手順を必要とせず、Instagram フィードをシンプルかつ簡単に収集、整理し、Web サイトに統合するためのチュートリアルを作成しました。

ステップバイステップガイド: Instagram フィードをウェブサイトに無料で埋め込む方法は?

ウェブサイトにInstagramフィードを素早く追加して視聴者を魅了するには、 Tagbox のような UGC プラットフォームを強くお勧めします。複数のフィードで訪問者の注目を集め、ユーザーの意思決定に影響を与えるさまざまな機能を提供しています。

技術的な専門知識や複雑な手順を必要とせず、Instagram フィードをシンプルかつ簡単に収集、整理し、Web サイトに統合するためのチュートリアルを作成しました。

ステップ1: TagboxでInstagramフィードを作成する

• 作る 無料のTagboxウィジェットアカウント.

ステップ2: ネットワークを選択 – Instagram

• 選択する 'インスタグラム' Instagram の投稿を収集するためのソースとして。

• あなたの選択します。 フィードタイプ Instagramからそれらの投稿を収集します。

どのような種類の Instagram 投稿を埋め込むことができますか?

• Instagram フィードタイプのリスト:
  • ハッシュタグ （＃） – ライブで収集 ウェブサイト上のInstagramハッシュタグフィード.
  • ハンドル (@) – ビジネスプロフィールから Instagram の投稿を収集します。
  • ストーリー - この Instagramストーリーを埋め込む ウェブサイト上。
  • メンション (@) – ブランドが言及されている Instagram の投稿を集約します。
  • タグを付けました – Instagram でタグ付けされたフィードをキュレートします。
  • リール – ビジネスプロフィールからリールを収集して Instagramリールを埋め込む ウェブサイトで。
  • 私のハンドル – 自社のビジネスアカウントから Instagram にアップロードされた投稿を収集します。

• フィードタイプを選択し、それに応じて入力してください。Instagram の投稿が収集されます。

ステップ3: Instagramフィード埋め込みコードを生成する 

すべての投稿を取得し、モデレーションとカスタマイズが完了したら、以下の手順に従って、ウェブサイト コードで使用できる Instagram プロフィールまたはページ フィード埋め込みコードを取得し、ウェブサイトに Instagram プロフィールを埋め込みます。

• セットアップボタンをクリックすると、セットアップが開始されます パブリッシュ ウィジェット エディター画面のボタン。

• 現在地に最も近い 「公開」 ウェブサイトに Instagram フィードを埋め込むオプション。

• さあ、あなたの ウェブサイト構築プラットフォーム (HTML、WordPress、Wix、Shopify、Weebly、Squarespace、Elementor など)

• ウィジェットの高さと幅をカスタマイズし、生成された埋め込みコードをコピーします。これで、ウィジェットの生成とコピーが完了しました。 「Instagram フィード埋め込みコード」 ウェブサイトの CMS 用。以下の手順に従って、ウェブサイト ビルダーに Instagram フィードを表示します。

ステップ4: 埋め込みコードを使用してInstagramフィードをウェブサイトに統合する

• ウェブサイトにログインし、Instagram の投稿を埋め込むページのバックエンドまたはエディター セクションに移動します。
• タグボックスからコピーしたInstagram埋め込みコードを貼り付けます 無料のウェブサイトウィジェット ページの本文に追加し、変更を公開/更新します。
• Instagram フィードを Web サイトに正常に埋め込むことができます。

ボーナスヒント：Instagram フィードをショッピング可能にする（近日公開）

別のウェブサイトビルダーに Instagram フィードを埋め込む方法は?

ここでは、すべての一般的な CMS プラットフォームのステップバイステップのソリューションを紹介します。見逃す心配はありません。今すぐ探索しましょう!

1. HTMLウェブサイトの場合 –

HTML は、企業やブランドから広く信頼されている、整理されたウェブサイト プラットフォームです。あなたもその 1 つであるようです。ウェブサイト訪問者にもっと多くのものを提供して、滞在時間を長くし、ウェブサイトの滞在時間を増やしたいと思いませんか?

さて、ウェブサイトの HTML コードに Instagram フィードを埋め込むための簡単な手順は次のとおりです。

1. HTML ウェブサイトにログインし、Instagram フィードを追加するランディング ページを選択します。
2. コピーした「Instagram フィード HTML コード」をページ/ブログ/サイドバー セクションに貼り付けます。
3. 変更を適用すると、完了です!!

埋め込みに成功しました HTML上のInstagramウィジェット ウェブサイトをご覧ください。

2. WordPressウェブサイトの場合 –

WordPress は、独自性を備えた未来的な Web ページをデザインするのに最適なプラットフォームです。Web サイトの訪問者にユニークなコンテンツを提供したい場合、Instagram の投稿を埋め込むことは最適なソリューションです。

以下にいくつかの手順を示します。 WordPressにInstagramフィードを追加する サイト：

1. WordPress ウェブサイトにログインします。
2. Instagram 投稿ギャラリーを埋め込む Web ページを選択して編集します。
3. WordPress エディターのバージョン 6.0 以降では、ダッシュボードから「ページ」>「新しいページ セクションの追加」を選択します。
4. (+)ボタンを選択し、カスタムHTMLオプションを選択し、Instagram埋め込みコードを貼り付け、変更を適用して、WPウェブサイトにInstagramギャラリーを表示します。表示するには、WordPressのすべてのバージョンの完全なチュートリアルを確認してください。 Instagram ウィジェット WordPress で.

3. Squarespaceウェブサイトの場合 –

Squarespace はユニークなウェブサイトビルダーであり、Squarespace が提供するすべてのテンプレートを試してみることを恐れない企業にとって好ましい選択肢です。

SquarespaceにInstagramフィードを追加する ウェブサイトは、ウェブサイト訪問者を長く引き付けておくための完璧な視覚的補助になります。次の手順を実行してください。

1. ページまたは投稿エディターを開き、「ブロックを追加」をクリックします。
2. メニューから埋め込みを選択し、 URL フィールドにアイコンが表示されます。
3. 次に、そのボックスに Instagram フォトギャラリーの埋め込みコードを貼り付けて、[設定] をクリックします。
4. 完了したら、「適用」をクリックして変更を公開します。表示するための完全なガイド Instagram ウィジェットを Squarespace に ウェブサイトをご覧ください。

4. Wixウェブサイトの場合 –

ウィックス Wix では、ユーザーが自分の好きなように Web ページを設計および開発できる自由が与えられるため、完全に自社で Web サイトを作成することを好む企業にとって、Wix は最適な選択肢です。

ここでは、次の簡単な手順に従ってください WixにInstagramフィードを追加する ウェブサイト：

1. クラシックエディタでWixにInstagramフィードを埋め込む

• クラシックエディターの場合は以下の手順に従ってください WixウェブサイトにInstagramフィードを埋め込む.
• 「+」をクリックします。
• 利用可能なリストから「ウィジェットを埋め込む」オプションを選択します。
• ページでは、ページレイアウトに応じてウィジェットの高さと幅を調整するオプションがあります。
• 「コードを入力」をクリックします。
• 埋め込みコードを Wix エディタに貼り付けます。
• 「更新」をタップすると、Instagram フィードがエディター ページに表示されます。
• 「公開」ボタンをクリックして変更を確定します。

さて、これでライブは終わりです Wix Instagram ウィジェット.

2. ADIエディタを使用してWixにInstagramフィードを埋め込む

• Wix ADI エディターで作業する際に、変更された手順がいくつかあります。それらを見てみましょう。
• 「+」アイコンをクリックします。
• Instagram フィードを埋め込むセクションを選択します。
• 左側の「HTML埋め込み」を選択します。
• 組み込みのテンプレートから選択し、そこでデフォルトのコンテンツを編集します。
• HTMLの横にある「選択」ボタンをクリックします。
• ここでは、Instagram フィード埋め込みコードの代わりに「ウェブサイト」オプションを選択します。
• フィードのプレビュー URL を追加し、フィード表示の幅と高さを調整します。
• 次に、「公開」ボタンをタップして、Wix ウェブサイトでフィードが機能するようにします。

5. Weeblyウェブサイトの場合 –

視覚的に魅力的なInstagramコンテンツを Weeblyの ウェブサイトをカスタマイズすることで、eコマース ウェブサイトに驚くべき視覚的なマーケティングのメリットがもたらされます。

Weebly ウェブサイトに Instagram の投稿を簡単に埋め込むための簡単な手順をいくつかまとめましたので、他を探す必要はありません。

1. 「埋め込みコード」要素を見つけます（画面の左側のメニューにあります）
2. Instagram から Weebly ウェブサイトにフィードを添付するページに、埋め込みコード要素をドラッグ アンド ドロップします。
3. HTML ボックスをクリックし、「カスタム HTML の編集」オプションを選択します。
4. Instagramフィード埋め込みコードを貼り付けて表示します Instagram ウィジェット Weebly ウェブサイト.

6. Shopifyウェブサイトの場合 –

Shopifyサービス は、より多くのユーザーにリーチするために無料の電子商取引 Web サイトを作成するためのシームレスなプラットフォームを探している企業に最適な Web サイトです。

ShopifyにInstagramフィードを追加する ウェブサイト訪問者を引き付け、コンバージョン率を向上させるストアです。 

1. 販売チャネルセクションのオンラインストアをクリックします。サイドバーにドロップダウンリストが表示されますので、テーマオプションを選択します。
2. 画面の右側に、現在のテーマのアクションボタンがあります。
3. そのアクション ボタンをクリックし、ドロップダウン リストから [コードの編集] を選択します。
4. Instagramプロフィールやページフィードを埋め込むレイアウト/テンプレート/セクション（例：ホームページの場合 – Index.liquid）を選択します。
5. Instagramの投稿からコピーしたコードを貼り付けて「保存」をクリックします。これで Shopify Instagramウィジェット あなたのストアでライブ配信します。

7. Googleサイトの場合 –

Google サイトにより、ユーザーは簡単にウェブサイトを作成できます。コンテンツを必要な場所にドラッグ アンド ドロップするだけで済みます。ウェブ開発者、ウェブサイト デザイナー、その他のコーダーは必要ありません。チームのウェブページ、一般向けウェブサイト、社内プロジェクト センターなどを作成できます。

ブランドは、数多くの利点と、顧客がスマートフォンからでも Google サイトにアクセスできるレスポンシブ機能により、これを非常に重要視しています。

それでは、Instagram フィードを Google サイトに埋め込む方法を見てみましょう。

1. フィードを作成したら、生成されたコードをコピーします。 
2. Google サイト アカウントを開いてログインします。
3. 右側で、Instagram フィード ウィジェットを埋め込むページを選択します。(ここでは、連絡先ページを選択できるとします。)
4. ダッシュボードで [挿入] タブと > [埋め込みオプション] を選択します。
5.  Web から埋め込むためのポップアップ ボックスが表示されたら、[埋め込みコード] を選択し、埋め込みコードを貼り付けて、[次へ] をクリックします。
6. ウィジェットは、Web ポップアップ フォームから取得した埋め込みのプレビューとして表示されます。
7. クリック INSERT Instagram の投稿を Google サイトの Web ページに組み込むボタン。

8. Elementorウェブサイトの場合 

Elementor は、コーディングなしで魅力的な Web サイトを簡単に構築し、オンラインでの存在感を高めるための直感的なプラットフォームを求める企業にとって理想的なツールです。

1. WordPress管理者アカウントにログインする
2. Instagramフィードを追加するページを選択します
3. 「Elementorで編集」をクリックします
4. HTML 要素を、Instagram フィードを埋め込むウェブサイト ページの目的のセクションにドラッグ アンド ドロップします。
5. コードを貼り付けて「更新」をクリックします。

今すぐウェブサイトを開いて、埋め込まれた Elementor の Instagram ウィジェット ウェブサイトをご覧ください。

9. Webflowウェブサイトの場合 

Webflow は、デザイン、開発、ホスティングを 1 か所に統合​​した直感的なプラットフォームを提供し、クリエイティブなコントロールを完全に備えたプロフェッショナルな Web サイトを設計したいと考えている企業に最適なソリューションです。

1. Webflow管理者アカウントにログインし、プロジェクトを選択します
2. 左側のメニューから「要素を追加」をクリックします。
3. 「埋め込み」要素をウェブサイトページの目的のセクションにドラッグ アンド ドロップします。
4. HTML 埋め込みコード エディターのポップアップが表示されるので、コードを貼り付けて、「保存して閉じる」をクリックします。
5. [公開] をクリックし、[選択したドメインに公開] を選択します。

今すぐウェブサイトを開いて、Webflow ウェブサイトに埋め込まれた Instagram ウィジェットをお楽しみください。

10. Bloggerウェブサイトの場合 

Blogger は、簡単にブログを始めたいと考えている個人や企業にとって優れたプラットフォームです。アイデアを共有したり、より幅広いユーザーとつながったりするためのシンプルで使いやすいインターフェイスを提供します。

1. Blogger アカウントにログインします。 
2. Instagram フィードを追加するページを選択します。
3. HTML コード エディターを開き、コピーしたコードを body タグ セクションに貼り付けます。
4. 次に「公開」をクリックします。 

おめでとうございます！ Blogger の Instagram ウィジェット ウェブサイトをご覧ください。

11. Bigcommerceウェブサイトの場合 

BigCommerce は、オンライン ストアの拡大を目指す企業にとって理想的なプラットフォームです。シームレスな e コマース エクスペリエンスを実現し、世界中のユーザーにリーチするための強力な機能と柔軟性を提供します。

1. BigCommerce ダッシュボードにログインし、「ストアフロント」に移動します。
2. 次に、「Web ページ」を選択して、Instagram フィード コードをストアに埋め込みます。
3. 「Webページ」を選択すると、すべてのページにリダイレクトされます。
4. 「Web ページの作成」を選択し、必要な詳細をすべて入力します。
5. すべての詳細を入力したら、下にスクロールして「保存して終了」をクリックします。

BigCommerce ストアに Instagram ウィジェットを正常に埋め込みました。

12. Majentoウェブサイトの場合

Magentoは、高度なカスタマイズと拡張性を求める企業向けに設計された、強力で多用途なeコマースプラットフォームです。幅広い機能と柔軟性を備えたMagentoは、企業がカスタマイズされたオンラインショッピング体験を構築し、グローバル市場の需要に合わせて効率的に拡張することを可能にします。

1. Magento Commerceアカウント（別名Adobe Commerce）にログインします。
2. Instagram フィードを表示する Web ページに移動します。
3. 「HTML」を選択し、コピーしたコードを貼り付けます。

これで完了です。Magento ウェブサイトに Instagram フィードが追加されました。

13. PrestaShopウェブサイトの場合

PrestaShopは、機能豊富でユーザーフレンドリーなeコマースプラットフォームです。プロフェッショナルなオンラインストアの構築を目指す企業に最適です。オープンソースであることと幅広いカスタマイズオプションを備えたPrestaShopは、企業が独自のショッピング体験を提供しながら、グローバルなeコマース市場においてシームレスに事業を拡大することを可能にします。

1. 次に、PrestaShop ウェブサイトの管理パネルにログインし、ページを作成または編集します。
2. Instagram フィード ウィジェットを表示する場所に埋め込みコードを貼り付けます。
3. ページを保存して再読み込みします。

これで完了です。PrestaShop ウェブサイトに Instagram フィードが追加されました。

Instagram を使用してウェブサイトに Instagram フィードを埋め込む (手動の方法)

驚かれるかもしれませんが、Instagram 自体が、ユーザーに Instagram フィードを自分の Web サイトに埋め込むことを提案しています。そのためには、アカウントを開設し、埋め込み設定もオンになっていることを確認してください。

唯一の制限は、Instagram ビジュアル ギャラリー全体を Web サイトに埋め込むことができる他の埋め込みツールとは異なり、一度に 1 つの投稿しか埋め込めないことです。

したがって、iframe コードを使用して Instagram の投稿を Web サイトに埋め込む場合は、次の簡単な手順に従ってください。

• 店は開いています Instagram.com ブラウザ上で
• ウェブサイトに埋め込みたいInstagramフィードに移動します
• 投稿の右上隅にある3つの点（…）をクリックします
• 埋め込みオプションをクリックしてHTML埋め込みコードを生成します
• ウェブサイトにInstagramフィードを表示したいウェブページのエディターにiframe Instagramフィード埋め込みコードをコピーして貼り付けます。

例えば、 Instagram動画を埋め込むWordPress ページに写真を配置し、「カスタム HTML」ブロックを追加して、埋め込みコードを貼り付けます。これで完了です。

Instagram の埋め込みオプションは限られています。一度に挿入できる投稿は 1 つだけです。カスタマイズ、コンテンツ モデレーション、パフォーマンス分析、リアルタイム コンテンツ更新、インタラクティブ デザインなど、Web サイトのレイアウトに合わせた独自の機能はありません。そのため、この目的には、Tagbox などの Instagram ツールが役立ちます。カスタマイズが豊富で、新しい投稿をリアルタイムで更新でき、コーディング不要のツールで、クリックするだけでさまざまな種類の投稿を収集できます。

ウェブサイトに Instagram フィードを埋め込むメリット:

Instagram フィードをウェブサイトに埋め込むと、いくつかのメリットがあります。そのいくつかを見てみましょう。

1. エンゲージメントの強化

Instagram フィードを Web サイトに埋め込むと、新鮮でリアルタイムなコンテンツを Web サイトに取り込むことができます。この魅力的なコンテンツにより、サイト訪問者は Web サイトでより長い時間過ごすようになり、直帰率が低下します。

さらに、魅力的な Instagram コンテンツを Web サイトに追加すると、Web サイトの静的な側面を紹介するだけではありません。視聴者はライブ更新を見たり、リールを見たり、サイト上で Instagram フィードを閲覧したりできるようになります。全体として、これにより Web サイトのエンゲージメントと可視性が向上します。

2. ブランド信頼の向上

展示する ユーザー生成コンテンツ ウェブサイトに Instagram フィードを埋め込んで社会的証明を構築することで、訪問者の信頼を得ることができます。これにより、ブランドは多くの訪問者を引き付け、ビジネスを大幅に成長させることができます。お客様の声や満足した顧客レビューを表示すると、他の人が購入を決定する際に影響を与えます。ブランドの信頼性が証明され、多くのユーザーがブランドを信頼していることを示します。さらに、Instagram フィードを埋め込むと、ソーシャル コミュニティを確立し、より多くのユーザー生成コンテンツを生成するのに役立ちます。

3.美学の向上

Tagboxのようなトップソーシャルメディアアグリゲーターの多くは、Instagramフィードに魅力的なテーマとレイアウトを提供しています。ウェブサイトのデザインに合わせて簡単にマッチさせることができ、ウェブサイトの美観が向上します。第一印象は94%がデザインに関係しているため、フィードをウェブサイト全体の美観に合わせることは重要です。したがって、 Instagramウィジェット あなたのウェブサイトにこれを追加すると、テキスト中心のウェブサイトが美しく活気に満ちたものになります。

このような統合により、ソーシャル メディアの創造性を新しい視聴者に宣伝し、Web サイトのデザインを維持するのにさらに役立ちます。さらに、ユーザーが初めて Web サイトにアクセスしたときに Instagram にリダイレクトされ、全体的な可視性が向上します。

4.より広いリーチ

Instagram フィードを Web サイトに埋め込むことの最も明白でありながら見落とされがちなメリットは、コンテンツのリーチが大幅に高まることです。Web サイトを閲覧する人が増えるほど、Instagram ブランド ページにアクセスする人が増え、その逆も同様です。Web サイトには、リーチを高めるために魅力的なフィードを紹介できるさまざまなタッチポイントがあります。フィードを表示する場所として最も推奨されるのはホームページかもしれませんが、製品ページも推奨されます。なぜでしょうか。これらは、ユーザーがブランドに対する認識を構築するために訪れる可能性が最も高い場所だからです。これにより、ユーザーはブランドについてさらに詳しく知りたいと思うようになり、コンバージョンする可能性が高まります。

5. UI UXを改善する

潜在的なユーザーがあなたのウェブサイトを訪問するたびに、彼らはあなたの美しいビジュアルと活気のあるフィードに自動的に惹きつけられます。これにより、ユーザー エクスペリエンスが向上し、インパクトが増し、ユーザー エンゲージメントが向上します。Instagram からの高品質なコンテンツと画像は、ウェブサイトの外観と雰囲気を向上させ、ユーザーにとって関連性のあるものにします。 

オーバートゥーユー

Instagram は間違いなく優れたマーケティング ツールです。売上を伸ばすためのオーディエンスから、信頼できる関係を構築するためのユーザー生成コンテンツまで、すべてがここにあります。このプラットフォームは常に変化しているため、ビジネスはこれらの変化に迅速に適応する必要があります。こうすることで、顧客の Web サイト エクスペリエンスをより効率的に向上させることができます。

ウェブサイトに Instagram フィードを埋め込むことで、ブランドの信頼性を高め、コンバージョンを増やすことができます。Tagbox を使用すると、すばやくアップロードして 1 つのページに複数のフィードを埋め込むことができ、エンゲージメントと売上の観点からパフォーマンスを追跡することもできます。