Instagram フィードをウェブサイトに埋め込む方法 - 完全ガイド
皆さんは、ブランディングやマーケティングにおける Instagram の魅力をご存知でしょう。現代のマーケティングにおいて、Instagram フィードを Web サイトに埋め込むことは間違いなく素晴らしいアイデアです。
エンゲージメントを高め、Web サイトを魅力的にし、リードを生み出すのに役立ちます。その数多くのメリットは、その重要性を知るのに十分です。しかし、プロセスについての説明が必要ですか? 心配しないでください。適切なプラットフォームを使用しています。
このブログ記事では、 Instagram フィードをウェブサイトに埋め込む方法、その重要性、利点などについて詳しく説明します。
まずは基本から始めましょう。
Instagram フィードとは何ですか?
Instagram フィードは、ユーザーが写真や動画を共有したり、インスピレーションを得たり、関心のある人や物とつながったりする場所です。
これらの写真や動画は、Instagram をスクロールすると表示されます。Instagram アカウントを開くたびに、フィードに新しいコンテンツが更新されます。
この Instagram フィードを Web サイトに埋め込むことで、訪問者を引き付け、ブランドに関する最新のコンテンツを表示できます。
ウェブサイトにInstagramフィードを埋め込む方法
Instagramフィードをウェブサイトに埋め込むにはさまざまな方法があります。さまざまな方法を段階的に見ていきましょう。
方法1.使用 Tagshop (推奨)
埋め込み ウェブサイト上のInstagramフィード Tagshop直接アップロードする場合と比べて、いくつかの利点があります。以下の手順に従って、フィードを視覚的に魅力的なものにしましょう。
ステップ1 – コンテンツのキュレーション
- ログインして開始するか、 アカウントを作成する Tagshop
- ログイン後、「Instagram” ソースネットワークとして
- ハッシュタグ、ストーリー、プロフィール、メンション、リールなどのさまざまなオプションを使用して Instagram フィードを作成できます。
- ハッシュタグを入力してください。 「フィードを作成」ボタンをクリックして、Instagram アカウントを接続します。
ステップ2 – フィードを面白くする
- フィードはお好みに応じて変更できます。サイドバーから「コンテンツ、公開/非公開にしたい投稿、無関係な投稿を選択します。
- フィードの外観を変更するには、 ウェブサイト > テーマ、カスタマイズ、CTA ボタン。
オプション: Instagram フィードをショッピング可能にする
あなたがしたい場合 Instagramフィードをショッピング可能にする、以下の手順に従うか、 Instagramフィードをウェブサイトに埋め込むには、3番目のステップに進んでください。フィードをショッピング可能にするには、製品カタログをアップロードする必要があります。これを行うには、次の手順に従ってください。
1. サイドバーから、「コンテンツ」>「製品カタログ」に移動します。
ここでは、Web サイト ビルダーから直接製品を同期したり、カスタム アップロードを行うことができます。
2. 商品を同期したら、フィードで買い物ができるようにタグ付けします。これを行うには、 「タグ製品」 フィード上の投稿の下にあるボタン。
3. 名前、カテゴリ、タグ、SKU で製品を検索します。
4. ホットスポット機能をオンにして、1 つの投稿に複数のタグを追加します。
ステップ3. – ウェブサイトにInstagramフィードを公開する
フィードの編集が完了したら、「Webサイト" サイドバーから「コードを生成ダッシュボードの右下隅にある「」をクリックします。
2. ギャラリーの幅と高さを調整し、埋め込みコードをコピーします。
4. これらの手順に従うと、Instagram フィードを任意の Web サイトに簡単に埋め込むことができます。
あらゆる CMS プラットフォームに Instagram フィードを追加する方法
連絡先 Tagshop、することができます あらゆるCMSプラットフォームにInstagramフィードを埋め込む、 といった WordPress、Shopify、Wix、Magento、HTML など。 ここでは、タスクを簡素化するための、関連するすべての CMS プラットフォームのステップバイステップのソリューションを示します。
ShopifyストアにInstagramフィードを追加する
また、ご購読はいつでも停止することが可能です ShopifyストアにInstagramフィードを追加する; ブランドがより多くのオーディエンスにリーチするのに最適です。以下の手順に従って、InstagramフィードをShopifyウェブサイトに追加できます。Instagramフィードコードを生成したら、 Tagshop アプリで、次の手順に従います。
ステップ 1 - Shopify 管理パネルに移動します。
ステップ 2 - 「オンライン ストア」オプションを探します。
ステップ3 – ドロップダウンメニューから「ページ'
ステップ4 – Instagramフィードを表示するページを見つけるか、新しいページを作成します
ステップ5 – 「HTML」セクションで、Instagramコードを埋め込むことができます。
ステップ 6 – すべての変更を保存すれば完了です。
注意: 作業を簡素化するために、 無料のShopifyアプリをインストールする Instagram フィードを Shopify ストアに直接埋め込みます。
________________________________________________________________________
WordPressにInstagramフィードを埋め込む
埋め込み手順は次のとおりです。 WordPress ウェブサイト上の Instagram フィード
ステップ 1. WordPress ダッシュボードにログインします。
ステップ2. Instagramフィードを埋め込むページを開き、「カスタムHTMLブロック」を選択します。
ステップ3. コピーしたInstagramフィードコードを貼り付けます。 Tagshop
ステップ 4 – 公開ボタンをクリックすると完了です。
________________________________________________________________________
WixウェブサイトにInstagramフィードを表示する
WixウェブサイトにInstagramフィードを追加する も簡単です。以下の手順に従ってください。
ステップ1 - Wix管理者アカウントにログイン
ステップ2-「メインページ」セクションで、「+'ボタン
ステップ3-「埋め込みコード」をクリックし、「HTMLを埋め込む」を選択します。
ステップ 5 - フィードに生成された埋め込みコードをここに貼り付けます。
ステップ6 – 「保存」をクリックして変更を適用します
________________________________________________________________________
Instagram フィードを Squarespace に表示する
手順を踏んで SquarespaceにInstagramフィードを追加する:
ステップ 1 - Squarespace 管理パネルにログインします。
ステップ 2 – Instagram フィードを追加するページを選択するか、新しいフィードを作成します。
ステップ3 – ページを編集し、「Add Section> 空白セクションを追加する
ステップ4 – URLフィールドで、「 「コード」をクリックしてここにコードを貼り付けます
ステップ5 – 「Save' その後 '申し込む' 変更を公開するには
________________________________________________________________________
HTML ウェブサイトに Instagram フィードを追加する
HTML ウェブサイトに Instagram フィードを埋め込むには、次の手順に従います。
ステップ1 – HTMLウェブサイトにログインする
ステップ2 – Instagramフィードを統合したいページを探す
ステップ3 – 貼り付ける Tagshop Instagram フィードコード
ステップ 4 – すべての変更を適用すれば完了です。
________________________________________________________________________
Webflow サイトにライブ Instagram フィードを表示する
Webflow サイトに Instagram フィードを表示するには、次の手順に従います。
ステップ1 – Webflow管理パネルにログインする
ステップ2 – 「要素を追加' 左側のメニューから
ステップ3 – 'をドラッグアンドドロップします埋め込む' 要素を目的のウェブサイトページのセクションに追加します
ステップ4 – HTML埋め込みコードエディタが表示されます
ステップ5 – 貼り付け Tagshop- ここにコピーしたコードを生成し、保存をクリックします
________________________________________________________________________
ElementorウェブサイトにInstagramフィードを追加する
Instagram フィードを Elementor ウェブサイトに表示するには、次の手順に従います。
ステップ1 – WordPress管理者アカウントにログインする
ステップ 2 – フィードを統合するページを選択します。
ステップ 3 - 「Elementor で編集」をクリックします。次に、フィードを埋め込む場所に HTML 要素をドラッグ アンド ドロップします。
ステップ4 – コードを貼り付けて「アップデイト」をクリックすると、フィードがウェブサイト上で公開されます。
ウェブサイト上の Instagram フィードのライブ例
方法2. 直接アップロード(Instagram自体を使用)
Instagram では、直接アップロードすることでウェブサイトにフィードを埋め込むことができますが、1 つずつしか埋め込むことができません。投稿を手動で埋め込む必要があるため、このプロセスは退屈に思えます。次の手順に従ってください。
ステップ1 – Instagramアカウントにアクセスする
ステップ2 – 埋め込みたい投稿を検索する
ステップ3 – XNUMXつのドットをクリックしてメニューを開きます
ステップ4 – 「埋め込み」を選択してコードをコピーします
ステップ 5 – この埋め込みコードを Web サイトのバックエンドに貼り付けます。
ステップ 6 – ウェブサイトを更新すると、ウェブサイトに Instagram の投稿が XNUMX つ表示されます。
ウェブサイト上のInstagramフィードの例
ここに一流の Instagram フィードの例 あなたにとって、それらを見てみましょう。
サッカニー: Instagram ハッシュタグ フィード
Instagram ハッシュタグ フィードは、企業がトピック固有のコンテンツを自社の Web サイトに直接表示できるため、最も人気のあるフィード タイプの 1 つです。
それはかなりの量を捉えている UGC オーディエンスからあなたのブランドを競合他社から際立たせるのに役立ちます。Sauconyはウェブサイトでこのフィードを使用して、 UGC ハッシュタグキャンペーン「Run Your World」のために。
フィリップス: Instagram スライダー ウィジェット
この Instagram スライダー このテンプレートでは、1 つの投稿に多数の画像とビデオが表示されるため、Web サイトのユーザーはインタラクティブなコンテンツをスワイプして閲覧できます。
フィリップスは、Instagram スライダー ウィジェットを使用して採用ページにインスピレーションを与えるフィードを生成することで、自社の Web サイトで雇用主ブランディングを行いました。これは、ブランドと潜在的な新入社員の両方にとって有益でした。
それではホームへ: Instagram ハッシュタグ フィード
Sohomeのウェブサイトには、ショッピング可能なInstagramフィードと視覚的に魅力的な UGC ギャラリー。この電子商取引サイトは、タグ付けされた製品を含む 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 サイトへのトラフィックとエンゲージメントが向上します。
- 売り上げを伸ばす: フィードをショッピング可能にする 売上とコンバージョンを促進します。
- リードを生成する: 詳細な分析ツールを使用して訪問を追跡し、リードを測定します。
まとめ
Instagram フィードをウェブサイトに統合することは、e コマース戦略の転換点となります。私たちは、Shopify、WordPress、HTML などのさまざまな e コマース プラットフォームに Instagram フィードを埋め込む方法を学び、その重要性と利点を理解するまで、長い道のりを歩んできました。
これらをすべて実装することで、ブランドを次のレベルに引き上げ、競合他社から目立つようになります。この記事では、 Instagramフィードを表示する方法 あなたのウェブサイトに埋め込むには、 Tagshop 最大限に活用するためです。
おすすめのブログ:
Instagram ストーリーをあらゆるウェブサイトに埋め込む (コード不要のソリューション)
3ステップでウェブサイトにInstagramプロフィールを埋め込む方法
よくある質問
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. コードを貼り付けて、適用した変更をすべて保存すれば完了です。