ウェブサイト上のインスタグラムフィード

Instagram フィードをウェブサイトに無料で埋め込む方法 (簡単な手順)

13分読み取り

ウェブサイトをよりインタラクティブで魅力的なものにしたいとお考えですか? ウェブサイトに Instagram フィードを埋め込むと、魅力的なコンテンツを訪問者に直接提供できます。これにより、訪問者は Instagram の活気に満ちた投稿や動画とやり取りできるようになり、関心を維持し、行動を起こすよう促すことができます。

知っていましたか - 多くの人がInstagramを使って新商品を見つけています。 35% Instagram ユーザーの 72% が、アプリで商品を見た後に購入しています。また、顧客の XNUMX% は、Instagram で商品の写真を見ると、その商品を購入する可能性が高くなると考えています。

5分でウェブサイトにInstagramを埋め込む

Instagram
ハッシュタグ

今すぐ試す

Instagram
Handle

今すぐ試す

Instagram
ストーリー

今すぐ試す

Instagram
リール

今すぐ試す

Instagram
メンションとタグ付け

今すぐ試す

| クレジットカードは不要 |

ウェブサイトに Instagram フィードを埋め込む 2 つの方法

A. Instagram埋め込みオプションを使用してInstagramの投稿を埋め込む

B. Tagbox を使ってウェブサイトに Instagram フィードを埋め込む方法

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

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

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

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

Instagramフィードを埋め込む
  1. Open Instagram.com ブラウザ上で
  2. に行きます Instagramのフィード ウェブサイトに埋め込みたい
  3. XNUMXつの点をクリックします (...) 投稿の右上隅
  4. セットアップボタンをクリックすると、セットアップが開始されます 埋め込む HTML埋め込みコードを生成するオプション
  5. コピー & 貼り付ける ウェブサイトにInstagramフィードを表示したいウェブページのエディターにiframe Instagramフィード埋め込みコードを入力します。
  6. たとえば、WordPress ページに Instagram の写真を埋め込むには、「カスタム HTML」ブロックを追加し、埋め込みコードを貼り付けます。これで完了です。

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

Tagbox を使用して Instagram を Web サイトに埋め込む手順は次のとおりです。

B. Tagboxを使用してウェブサイトにInstagramフィードを埋め込む方法

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

ウェブサイトに Instagram を埋め込むためのクイックガイド!

1. Tagboxにログインまたはサインアップ

2. ダッシュボードの「ソーシャルフィードを追加」をクリックします

3. ソースとして「Instagram」を選択

4. 次に、「ハッシュタグ(#)」、「ハンドル(@)」、「ストーリー(@)」などのいずれかを入力してフィードを追加します。

5. 次に、「フィードを作成」をクリックしてInstagramビジネスアカウントを接続します。

6. フィードの準備ができました

7. 「公開」をクリックし、ウェブサイト構築プラットフォームを選択します。

8. 最後に、埋め込みコードをコピーしてバックエンドに貼り付けます。簡単ですよね?

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

ステップ1: Instagramフィードウィジェットを作成する

Instagramフィードを埋め込むにはサインアップしてください

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

  • 選択 'インスタグラム' Instagram の投稿を収集するためのソースとして。
Instagramフィードを選択してウェブサイトに掲載する
  • あなたの選択します。 フィードタイプ Instagramからそれらの投稿を収集します。

どのような種類の Instagram フィードを埋め込むことができますか?

  • Instagram フィードタイプのリスト:
    • ハッシュタグ (#) – ライブで収集 ウェブサイト上のInstagramハッシュタグフィード.
    • ハンドル (@) – ビジネスプロフィールから Instagram の投稿を収集します。
    • ストーリー - この Instagramストーリーを埋め込む ウェブサイト上。
    • メンション (@) – ブランドが言及されている Instagram の投稿を集約します。
    • タグを付けました – Instagram でタグ付けされたフィードをキュレートします。
    • リール – ビジネスプロフィールからリールを収集して Instagramリールを埋め込む ウェブサイトで。
    • 私のハンドル – 自社のビジネスアカウントから Instagram にアップロードされた投稿を収集します。
Instagram フィードをウェブサイトに埋め込むにはどうすればいいですか?
  • フィードタイプを選択し、それに応じて入力してください。Instagram の投稿が収集されます。
公開ボタンをクリックしてInstagramを埋め込んでください

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

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

  • セットアップボタンをクリックすると、セットアップが開始されます パブリッシュ ウィジェット エディター画面のボタン。
Instagram フィードレイアウト
  • "を選択します。ウェブページに埋め込むウェブサイトに Instagram フィードを埋め込むための「」オプション。
ウェブページに埋め込むを選択
  • さあ、あなたの ウェブサイト構築プラットフォーム (HTML、WordPress、Wix、Shopify、Weebly、Squarespace など)
Instagramフィードを無料で埋め込む
  • ウィジェットの高さと幅をカスタマイズし、生成された埋め込みコードをコピーします。これで、ウィジェットの生成とコピーが完了しました。 「Instagram フィード埋め込みコード」 ウェブサイトの CMS 用。以下の手順に従って、ウェブサイト ビルダーに Instagram フィードを表示します。

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

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

Instagram
ハッシュタグ

今すぐ試す

Instagram
Handle

今すぐ試す

Instagram
ストーリー

今すぐ試す

Instagram
リール

今すぐ試す

Instagram
メンションとタグ付け

今すぐ試す

| クレジットカードは不要 |

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

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

1. Instagram フィードをウェブサイトの HTML に統合するにはどうすればいいですか?

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

インスタグラムフィード html

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

  1. HTML ウェブサイトにログインし、Instagram フィード ウィジェットを追加するランディング ページを選択します。
  2. コピーした「Instagram フィード HTML コード」をページ/ブログ/サイドバー セクションに貼り付けます。
  3. 変更を適用すると、埋め込みが完了します。 HTML上のInstagramウィジェット ウェブサイトをご覧ください。

2. WordPress に Instagram フィードを埋め込むにはどうすればいいですか?

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

WordPressにInstagramを埋め込む

WordPress サイトに Instagram フィードを埋め込むには、次の手順に従ってください。

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

WordPressのすべてのバージョンの完全なチュートリアルを確認してください WordPressにInstagramフィードを埋め込む.

3. Squarespace に Instagram フィードを埋め込むにはどうすればいいですか?

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

Squarespace の Instagram フィード

Squarespace の Web サイトに Instagram フィードを追加すると、Web サイトの訪問者を長く引き付けておくための完璧な視覚的補助になります。次の手順に従います。

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

完全ガイド SquarespaceにInstagramフィードを追加する ウェブサイトをご覧ください。

4. Wix ウェブサイトに Instagram フィードを追加するにはどうすればいいですか?

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

Wix の Instagram フィード

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

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

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

これで完了です。Instagram フィードが Wix ウェブサイトで公開されました。

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

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

Instagram
ハッシュタグ

今すぐ試す

Instagram
Handle

今すぐ試す

Instagram
ストーリー

今すぐ試す

Instagram
リール

今すぐ試す

Instagram
メンションとタグ付け

今すぐ試す

| クレジットカードは不要 |

5. Weebly に Instagram フィードを埋め込むにはどうすればいいですか?

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

Instagram フィードを Shopify に埋め込む

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

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

6. Shopify ストアに Instagram フィードを追加するにはどうすればいいですか?

Shopify は、より多くのユーザーにリーチするために無料の e コマース ウェブサイトを作成するためのシームレスなプラットフォームを探している企業に最適なウェブサイトです。

インスタグラムフィード shopify

Shopify ストアに Instagram フィードを追加して、ウェブサイト訪問者の関心を引き、コンバージョン率を向上させます。 

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

7. Instagram フィードを Google サイトに埋め込むにはどうすればいいですか?

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

Google サイトの Instagram フィード

ブランドは、スマートフォンからでもGoogleサイトにアクセスできるレスポンシブ機能と数多くの利点があるため、これを非常に重要視しています。では、どのように実現できるか見てみましょう。 Instagram フィードを Google サイトに埋め込む.

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

Instagram
ハッシュタグ

今すぐ試す

Instagram
Handle

今すぐ試す

Instagram
ストーリー

今すぐ試す

Instagram
リール

今すぐ試す

Instagram
メンションとタグ付け

今すぐ試す

| クレジットカードは不要 |

小切手 - コピーできるウェブサイトのInstagramフィードの例

ビジュアルコンテンツを表示するためのレスポンシブなテーマが必要ですか? ギャラリー テーマを試して、瞬く間にユーザーを魅了しましょう。

あなたに渡る

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

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

画像
ブランドのウェブサイトに Instagram フィードを埋め込む準備はできていますか?

Instagramフィードを収集、管理し、あらゆるウェブサイトに追加して、社会的証明と信頼性を高めます

サインアップは無料です

クレジットカードは必要ありません。

無料のソーシャル メディア アグリゲーター

Facebook、YouTube、Instagram、Twitterのソーシャルフィードをプロのようにウェブサイトに埋め込みます

タグ埋め込み クレジットカードは必要ありません
ソーシャルメディアアグリゲーター、Tagembed

よくあるご質問

Instagram フィードを無料で埋め込むには、固有のハッシュタグ (#)、ハンドル (@)、ビデオ、リール、ストーリー、メンション、タグなどを使用して、Web サイトでコンテンツを収集、キュレート、表示できる Taggbox ウィジェット ツールを使用できます。生成された Instagram フィード埋め込みコードを Web サイトのページに埋め込むだけです。

Instagram にアクセスし、埋め込みコードを生成したい投稿を選択してから、3 つのドットをクリックしてその他のオプションを表示します。次に、埋め込みオプションを選択して、Instagram フィードの埋め込みコードを生成します。複数の Instagram 投稿を埋め込みたい場合は、tagbox Instagram アグリゲータにサインアップして、すべての投稿を収集します。

Tagbox は、数回クリックするだけで Instagram フィードをウェブサイトに埋め込むためのシームレスなソリューションを提供します。Tagbox を使用してウィジェットを収集およびキュレートしたら、ダッシュボードで利用可能なオプションから CMS プラットフォームを選択する必要があります。次に、Instagram フィードを表示したいウェブサイトのバックエンドにコピーして貼り付けることができる一意の HTML コードが生成されます。

はい、Taggboxには独占的な WordPressのプラグイン WordPress ダッシュボードのプラグイン セクションで「Taggbox」を検索すると、これらのサイトが見つかります。WordPress ダッシュボードにプラグインを追加すると、WordPress ウェブサイトに Instagram フィード ウィジェットを簡単に追加できるようになります。

Instagram フィードをウェブサイトの複数のページに表示できます。フッター、サイドバー、ヘッダー、ホームページ、ブログ、または任意のウェブページでもかまいません。Instagram フィードを表示したいウェブサイトのバックエンドに埋め込みコードをコピーして貼り付けるだけです。

はい、Taggbox では、数回クリックするだけで特定の投稿を追加できるカスタム投稿機能を提供しています。Taggbox アカウントにログイン > アプリとその他に移動 > 「カスタム投稿」を選択 > 投稿 URL を追加 > 「投稿を作成」ボタンをクリックします。フィードからの特定の投稿が自動的に表示されます。

ユーザー生成コンテンツでバイヤージャーニーを促進

無料トライアルを開始

新年セールでこのお祭りシーズンをお祝いしましょう!

すべてのプランが 30% オフとなり、休暇を最大限に満喫できます。 コードTAG30を使用する チェックアウト時に割引を受けられます。

閉じる