Instagram フィードをウェブサイトに埋め込む方法 - 完全ガイド

ウェブサイトにInstagramフィードを埋め込む
読書の時間: 13

皆さんは、ブランディングやマーケティングにおける Instagram の魅力をご存知でしょう。現代のマーケティングにおいて、Instagram フィードを Web サイトに埋め込むことは間違いなく素晴らしいアイデアです。 

エンゲージメントを高め、Web サイトを魅力的にし、リードを生み出すのに役立ちます。その数多くのメリットは、その重要性を知るのに十分です。しかし、プロセスについての説明が必要ですか? 心配しないでください。適切なプラットフォームを使用しています。 

このブログ記事では、 Instagram フィードをウェブサイトに埋め込む方法、その重要性、利点などについて詳しく説明します。

まずは基本から始めましょう。

Instagram フィードとは何ですか?

Instagram フィードは、ユーザーが写真や動画を共有したり、インスピレーションを得たり、関心のある人や物とつながったりする場所です。 

これらの写真や動画は、Instagram をスクロールすると表示されます。Instagram アカウントを開くたびに、フィードに新しいコンテンツが更新されます。

この Instagram フィードを Web サイトに埋め込むことで、訪問者を引き付け、ブランドに関する最新のコンテンツを表示できます。

4ステップでウェブサイトにInstagramフィードを埋め込む
ハッシュ ハッシュ

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印
ハンドル ハンドル

インスタグラムのメンション

今すぐ試す
右矢印 右矢印
物語 物語

Instagram Stories

今すぐ試す
右矢印 右矢印
リール リール

Instagram Reels

今すぐ試す
右矢印 右矢印
言及 言及

Instagramのプロフィール

今すぐ試す
右矢印 右矢印

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

Instagramフィードをウェブサイトに埋め込むにはさまざまな方法があります。さまざまな方法を段階的に見ていきましょう。  

方法1.使用 Tagshop (推奨)

埋め込み ウェブサイト上のInstagramフィード Tagshop直接アップロードする場合と比べて、いくつかの利点があります。以下の手順に従って、フィードを視覚的に魅力的なものにしましょう。

ステップ1 – コンテンツのキュレーション 

にログイン Tagshop
  • ログイン後、「Instagram” ソースネットワークとして 
Instagramの投稿を集約する
  • ハッシュタグ、ストーリー、プロフィール、メンション、リールなどのさまざまなオプションを使用して Instagram フィードを作成できます。 
Instagramの投稿を収集する
  • ハッシュタグを入力してください。フィードを作成」ボタンをクリックして、Instagram アカウントを接続します。 

ステップ2 – フィードを面白くする

  • フィードはお好みに応じて変更できます。サイドバーから「コンテンツ、公開/非公開にしたい投稿、無関係な投稿を選択します。 
Instagramフィードをフィルターする
  • フィードの外観を変更するには、 ウェブサイト > テーマ、カスタマイズ、CTA ボタン。 
Instagramフィードを表示

オプション: Instagram フィードをショッピング可能にする

あなたがしたい場合 Instagramフィードをショッピング可能にする、以下の手順に従うか、 Instagramフィードをウェブサイトに埋め込むには、3番目のステップに進んでください。フィードをショッピング可能にするには、製品カタログをアップロードする必要があります。これを行うには、次の手順に従ってください。 

1. サイドバーから、「コンテンツ」>「製品カタログ」に移動します。 

ここでは、Web サイト ビルダーから直接製品を同期したり、カスタム アップロードを行うことができます。 

ウェブサイトにInstagramフィードを表示する

2. 商品を同期したら、フィードで買い物ができるようにタグ付けします。これを行うには、 「タグ製品」 フィード上の投稿の下にあるボタン。

3. 名前、カテゴリ、タグ、SKU で製品を検索します。

Instagramフィードをショッピング可能にする

4. ホットスポット機能をオンにして、1 つの投稿に複数のタグを追加します。

ステップ3. – ウェブサイトにInstagramフィードを公開する 

フィードの編集が完了したら、「Webサイト" サイドバーから「コードを生成ダッシュボードの右下隅にある「」をクリックします。 

ウェブサイトにInstagramウィジェットを埋め込む

2. ギャラリーの幅と高さを調整し、埋め込みコードをコピーします。

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

4. これらの手順に従うと、Instagram フィードを任意の Web サイトに簡単に埋め込むことができます。

あらゆる CMS プラットフォームに Instagram フィードを追加する方法

連絡先 Tagshop、することができます あらゆるCMSプラットフォームにInstagramフィードを埋め込む、 といった WordPress、Shopify、Wix、Magento、HTML など。 ここでは、タスクを簡素化するための、関連するすべての CMS プラットフォームのステップバイステップのソリューションを示します。 

ShopifyストアにInstagramフィードを追加する

また、ご購読はいつでも停止することが可能です ShopifyストアにInstagramフィードを追加する; ブランドがより多くのオーディエンスにリーチするのに最適です。以下の手順に従って、InstagramフィードをShopifyウェブサイトに追加できます。Instagramフィードコードを生成したら、 Tagshop アプリで、次の手順に従います。

ステップ 1 - Shopify 管理パネルに移動します。

Shopifyにログイン

ステップ 2 - 「オンライン ストア」オプションを探します。

shopifyにInstagramフィードを追加する

ステップ3 – ドロップダウンメニューから「ページ'

ステップ4 – Instagramフィードを表示するページを見つけるか、新しいページを作成します

ステップ5 – 「HTML」セクションで、Instagramコードを埋め込むことができます。 

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

ステップ 6 – すべての変更を保存すれば完了です。 

ShopifyにInstaフィードを追加する

注意: 作業を簡素化するために、 無料のShopifyアプリをインストールする Instagram フィードを Shopify ストアに直接埋め込みます。  

tagshop Shopifyアプリ

________________________________________________________________________

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

埋め込み手順は次のとおりです。 WordPress ウェブサイト上の Instagram フィード

ステップ 1. WordPress ダッシュボードにログインします。

ワードプレスにログイン

ステップ2. Instagramフィードを埋め込むページを開き、「カスタムHTMLブロック」を選択します。

InstagramをWordPressに埋め込む

ステップ3. コピーしたInstagramフィードコードを貼り付けます。 Tagshop 

ステップ 4 – 公開ボタンをクリックすると完了です。 

________________________________________________________________________

WixウェブサイトにInstagramフィードを表示する

WixウェブサイトにInstagramフィードを追加する も簡単です。以下の手順に従ってください。

ステップ1 - Wix管理者アカウントにログイン 

Wixウェブサイトにログイン

ステップ2-「メインページ」セクションで、「+'ボタン

Instagramをwixウェブサイトに埋め込む

ステップ3-「埋め込みコード」をクリックし、「HTMLを埋め込む」を選択します。

WixウェブサイトにInstagramを追加する

ステップ 5 - フィードに生成された埋め込みコードをここに貼り付けます。

Instagram フィードを Wix ウェブサイトに表示する

ステップ6 – 「保存」をクリックして変更を適用します

________________________________________________________________________

Instagram フィードを Squarespace に表示する

手順を踏んで SquarespaceにInstagramフィードを追加する

ステップ 1 - Squarespace 管理パネルにログインします。

Squarespaceにログイン

ステップ 2 – Instagram フィードを追加するページを選択するか、新しいフィードを作成します。

SquarespaceにInstagramの投稿を埋め込む

ステップ3 – ページを編集し、「Add Section空白セクションを追加する

Squarespaceのインスタグラム

ステップ4 – URLフィールドで、「 「コード」をクリックしてここにコードを貼り付けます 

Squarespace の Instagram ウィジェット

ステップ5 – 「Save' その後 '申し込む' 変更を公開するには

Squarespace の Instagram 投稿

________________________________________________________________________

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

HTML ウェブサイトに Instagram フィードを埋め込むには、次の手順に従います。

ステップ1 – HTMLウェブサイトにログインする

ステップ2 – Instagramフィードを統合したいページを探す

ステップ3 – 貼り付ける Tagshop Instagram フィードコード 

ステップ 4 – すべての変更を適用すれば完了です。

________________________________________________________________________

Webflow サイトにライブ Instagram フィードを表示する

Webflow サイトに Instagram フィードを表示するには、次の手順に従います。

ステップ1 – Webflow管理パネルにログインする

Webflowウェブサイトにログイン

ステップ2 – 「要素を追加' 左側のメニューから

Webflow ウェブサイトの Instagram フィード

ステップ3 – 'をドラッグアンドドロップします埋め込む' 要素を目的のウェブサイトページのセクションに追加します

ウェブサイト上のインスタグラム投稿

ステップ4 – HTML埋め込みコードエディタが表示されます

Webflow の Instagram 投稿

ステップ5 – 貼り付け Tagshop- ここにコピーしたコードを生成し、保存をクリックします

Webflow ウェブサイトの Instagram 投稿

________________________________________________________________________

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

Instagram フィードを Elementor ウェブサイトに表示するには、次の手順に従います。

ステップ1 – WordPress管理者アカウントにログインする 

エレメンターストアのインスタグラム

ステップ 2 – フィードを統合するページを選択します。

Elementor ウェブサイトの Instagram

ステップ 3 - 「Elementor で編集」をクリックします。次に、フィードを埋め込む場所に HTML 要素をドラッグ アンド ドロップします。 

Elementor の Instagram フィード

ステップ4 – コードを貼り付けて「アップデイト」をクリックすると、フィードがウェブサイト上で公開されます。 

Elementor ウェブサイトの Instagram フィード

ウェブサイト上の Instagram フィードのライブ例

4ステップでウェブサイトにInstagramフィードを埋め込む
ハッシュ ハッシュ

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印
ハンドル ハンドル

インスタグラムのメンション

今すぐ試す
右矢印 右矢印
物語 物語

Instagram Stories

今すぐ試す
右矢印 右矢印
リール リール

Instagram Reels

今すぐ試す
右矢印 右矢印
言及 言及

Instagramのプロフィール

今すぐ試す
右矢印 右矢印

方法2. 直接アップロード(Instagram自体を使用)

Instagram では、直接アップロードすることでウェブサイトにフィードを埋め込むことができますが、1 つずつしか埋め込むことができません。投稿を手動で埋め込む必要があるため、このプロセスは退屈に思えます。次の手順に従ってください。 

ステップ1 – Instagramアカウントにアクセスする

ステップ2 – 埋め込みたい投稿を検索する

ステップ3 – XNUMXつのドットをクリックしてメニューを開きます

Instagram post

ステップ4 – 「埋め込み」を選択してコードをコピーします

インスタグラムの投稿コード

ステップ 5 – この埋め込みコードを Web サイトのバックエンドに貼り付けます。

ステップ 6 – ウェブサイトを更新すると、ウェブサイトに Instagram の投稿が XNUMX つ表示されます。 

ウェブサイト上のInstagramフィードの例

ここに一流の Instagram フィードの例 あなたにとって、それらを見てみましょう。

サッカニー: Instagram ハッシュタグ フィード

Instagram ハッシュタグ フィードは、企業がトピック固有のコンテンツを自社の Web サイトに直接表示できるため、最も人気のあるフィード タイプの 1 つです。

ウェブサイト上の Instagram フィード

それはかなりの量を捉えている UGC オーディエンスからあなたのブランドを競合他社から際立たせるのに役立ちます。Sauconyはウェブサイトでこのフィードを使用して、 UGC ハッシュタグキャンペーン「Run Your World」のために。

フィリップス: Instagram スライダー ウィジェット

この Instagram スライダー このテンプレートでは、1 つの投稿に多数の画像とビデオが表示されるため、Web サイトのユーザーはインタラクティブなコンテンツをスワイプして閲覧できます。

Instagramフィードを埋め込む

フィリップスは、Instagram スライダー ウィジェットを使用して採用ページにインスピレーションを与えるフィードを生成することで、自社の Web サイトで雇用主ブランディングを行いました。これは、ブランドと潜在的な新入社員の両方にとって有益でした。 

それではホームへ: Instagram ハッシュタグ フィード

Sohomeのウェブサイトには、ショッピング可能なInstagramフィードと視覚的に魅力的な UGC ギャラリー。この電子商取引サイトは、タグ付けされた製品を含む Instagram ハッシュタグ フィードを使用して、視聴者を引き付けています。 

ウェブサイトにInstagramフィードを表示する

ケルン・センチュリオンズ: Instagram カルーセルフィード

ケルン センチュリオンズは、ヨーロッパ フットボール リーグ (ELF) のアメリカン フットボール チームです。メインの Web ページにはフィードがカルーセル形式で表示され、投稿が自動的にスライド表示されます。この形式を使用する主な利点は、必要なスペースが少なく、ナビゲーションが簡単なことです。 

ウェブサイトのインスタグラム

フェルドマール: 水平列フィード

水平列フィードは、ウェブサイトのフッター領域にフィードを表示します。定評のある時計会社であるFeldmarは、このウィジェットを使用して、 UGC ウェブサイト上。 

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

WordPress に Instagram フィードを埋め込む利点。

いくつかあります ウェブサイトにInstagramフィードを埋め込むメリットInstagramフィードをウェブサイトに統合することで、ブランドの信頼性と透明性を高めることができます。また、 UGC 視聴者があなたのブランドとつながることができるように。では、メリットを一つずつ見ていきましょう。 

ブランド認知度と露出の向上

婚約 Instagramの動画当社のウェブサイト ブランド認知度を高め、ユーザーをより長く楽しませることができます。 

  • リーチを拡大: きみの UGC Instagram ウェブサイトにフィードを追加すると、リーチとトラフィックが次のレベルに上がります。新しい視聴者をターゲットにすることで、ブランド認知度が向上します。 
  • ブランドの認知度を高める: 視覚的に魅力的な Instagram フィードは、ブランドの認知度を高めることができます。ブランドの USP と価値を強調して、ブランドの信頼性を高めます。 
  • 新しいフォロワーを引き付ける: 視聴者と定期的に交流することで、新しい顧客やフォロワーを引き付けることができます。 

社会的証明を強化する: 

提供 社会的証明 オーディエンスにブランドへの注目を喚起するには、ブランドに対する信頼感を伝えることだけが必要です。昨今、顧客はそのような信頼と信頼性の証拠を求めています。

  • 相互作用を奨励する: ウェブサイトに Instagram フィードを追加すると、インタラクションの感覚が高まります。顧客にビデオによる推薦文やレビューなどを共有するよう促しましょう。 
  • コミュニティを作成する: 強力なコミュニティは、次のようなものを提供することで顧客基盤と忠誠心を強化するのに役立ちます。 UGC キャンペーンに参加してください。 

ウェブサイトのコンテンツとSEOの強化

Instagramフィードをウェブサイトに統合すると あなたのSEOを強化する 検索エンジンのランキング。その方法は次のとおりです 

  • 新鮮なコンテンツ: あなたのウェブサイトは常に最新のリアルタイム コンテンツを提供し、視聴者が繰り返し訪問したくなるようにします。 
  • 改善されたSEO: 確立されたウェブサイトフィードはウェブサイトのランキングとSEOを向上させます 
  • 滞在時間の増加: 優れたユーザー エクスペリエンスにより、滞在時間とエンゲージメントが向上します。 

トラフィックとコンバージョンを促進する

全体的に、ユーザー エクスペリエンスは常に良い結果と売上をもたらします。次の点を考慮して、常に視覚的に魅力的で価値のあるコンテンツを訪問者に提供してください。 

  • Instagramへの直接トラフィック: リアルタイム フィードにより、Web サイトへのトラフィックとエンゲージメントが向上します。 
  • 売り上げを伸ばす: フィードをショッピング可能にする 売上とコンバージョンを促進します。
  • リードを生成する: 詳細な分析ツールを使用して訪問を追跡し、リードを測定します。 
4つのステップでウェブサイトにInstagramフィードを表示する
ハッシュ ハッシュ

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印
ハンドル ハンドル

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印
物語 物語

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印
リール リール

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印
言及 言及

インスタグラムハッシュタグ

今すぐ試す
右矢印 右矢印

まとめ 

Instagram フィードをウェブサイトに統合することは、e コマース戦略の転換点となります。私たちは、Shopify、WordPress、HTML などのさまざまな e コマース プラットフォームに Instagram フィードを埋め込む方法を学び、その重要性と利点を理解するまで、長い道のりを歩んできました。

これらをすべて実装することで、ブランドを次のレベルに引き上げ、競合他社から目立つようになります。この記事では、 Instagramフィードを表示する方法 あなたのウェブサイトに埋め込むには、 Tagshop 最大限に活用するためです。  

おすすめのブログ:

Instagram ストーリーをあらゆるウェブサイトに埋め込む (コード不要のソリューション)

3ステップでウェブサイトにInstagramプロフィールを埋め込む方法

4 分で Instagram ハッシュタグ フィードを Web サイトに埋め込む

Instagram Reels を無料でウェブサイトに埋め込む方法

よくある質問

Instagramフィードをウェブサイトに埋め込むには、Instagramから直接アップロードするか、 Tagshop 時間を節約します。

Instagram の投稿の右上隅にある 3 つのドット (…) をクリックします。[埋め込み] をクリックします。[埋め込みコードをコピー] をクリックします。これにより、Instagram フィードのコードが生成されます。

Instagram > メニューの 3 つのドット (…) > 埋め込みコード > コードをコピーして Web サイトのバックエンドに貼り付けることで、Web サイトに Instagram フィードを無料で表示できます。

Instagramプロフィールをウェブサイトに統合するには Tagshop同じことを実行するための簡単なガイドを以下に示します。

ステップ1 - ログインまたはサインイン Tagshop アカウント

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

ステップ3 - ソースネットワークとしてInstagramを選択する

ステップ4-利用可能なオプションの中からInstagramプロフィール(個人アカウント)としてフィードを選択します。

ステップ5-「フィードを作成」をクリックします

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

ステップ 7 - 埋め込みコードをコピーして、Web サイトのバックエンドに貼り付けます。

Instagram ハッシュタグ フィードを Web サイトに埋め込む方法について理解を深めるための簡単なガイドを以下に示します。

ステップ1 – ログイン Tagshop アカウントまたはサインアップ

ステップ 2 – ダッシュボードに移動して、「ソーシャル フィードを追加」をクリックします。

ステップ3 – ソースネットワークとしてInstagramを選択する

ステップ4 – (#)ハッシュタグを選択し、フィードをキャプチャするハッシュタグを入力します。

ステップ5 – 「フィードを作成」と「公開」をクリックします。

ステップ6 – 新しいダイアログボックスで、お好みのウェブサイトプラットフォームを選択します。

ステップ 7 – コピーしたコードを Web サイトのバックエンドに貼り付けます。

1. 無料で作成 Tagshop アカウントまたはログイン

2. 「フィードを追加」セクションをクリックします

3. Instagramを選択し、「リールのみ」を選択します。

4. 右上のフィルター>投稿タイプ>ビデオ付きからフィルターを追加することもできます

5. 公開オプションをクリックし、埋め込みコードをコピーします。

6. WordPressアカウントにログインし、リールを埋め込むページを選択します。

7. コードを貼り付けて、適用した変更をすべて保存すれば完了です。

目次