Elfsight Birthday Sale
Language:

ShopifyにInstagramを追加する方法

コード不要のシンプルなウィジェットで、InstagramフィードをShopifyストアにシームレスに統合する方法をご紹介します。このガイドでは、ブランドに関連する最も魅力的なInstagram投稿をカスタマイズ、フィルタリング、表示する手順を詳しく解説し、ストアのビジュアル魅力を高め、顧客のエンゲージメントを向上させるお手伝いをします。
インスタグラムフィードアプリを作成する
Share:
Facebookにシェアする
Share on X
Share on LinkedIn
Share on WhatsApp
Copy Link

ShopifyのInstagramフィードとは

ヒント: Shopify InstagramフィードはElfsightが提供する強力なウィジェットで、ブランドのInstagramコンテンツをShopifyストア上に直接表示できます。視覚的に魅力的なこのフィードは訪問者の目を引き、ブランドの認知度と存在感を高めるのに役立ちます。

ShopifyストアにInstagramフィードを統合することで、訪問者がサイト内をより長く閲覧するよう促せます。この動的なコンテンツの存在はユーザーのエンゲージメントを高め、最終的には検索エンジンのランキング向上にも寄与します。

使いやすいエディターを試して、アプリ作成の簡単さを体験してみましょう!⇓

ShopifyにInstagramフィードを追加する方法

ShopifyにはInstagram連携のための多彩なオプションがあり、Instagramフィードをウェブサイトに追加したり、Shopifyストアに写真を投稿したり、Instagramストーリーズで商品をシェアしたりできます。主な方法を見ていきましょう。

方法対象メリット
ShopifyアプリすべてのShopifyストアオーナー– 最も簡単でコード不要
– 豊富な機能
公式Instagram埋め込みコード技術に詳しくないユーザー– 単一投稿の表示
– カスタマイズは限定的
カスタムコード開発スキルのある方– フィードの見た目を細かく制御可能

主要なInstagram連携の方法がわかったところで、それぞれの使い方を詳しく見ていきましょう。

#1 方法:Shopify Instagramフィードアプリ

InstagramフィードをShopifyストアに簡単に統合するには、以下のステップに従ってください。完了すれば、ウィジェットが正常に追加され、ストアの機能が向上します。

  1. ウェブサイトのビジュアルエディターにアクセスします。まずShopify管理画面にログインし、販売チャネル → オンラインストアへ進みます。
  2. 次に「カスタマイズ」ボタンをクリックします。
  3. 目的のページにカスタムLiquidセクションを挿入します。ビジュアルエディターを開くとデフォルトでホームページが表示されます。別のページを編集したい場合は、画面上部のドロップダウンメニューから選択してください。ウィジェットを追加するには「セクションを追加」をクリックします。
  4. 次に「カスタムLiquid」を選択します。
  5. インストールコードを入力します。カスタムLiquidのフィールドにウィジェットのインストールコードを貼り付けます。カラースキームや上下のパディングも好みに合わせて調整可能です。設定が完了したら保存してください。

これでウィジェットの設置が完了しました。

ShopifyヴィンテージテーマにInstagramフィードを追加する方法

ヒント:ヴィンテージテーマとは、2021年7月にOnline Store 2.0にアップデートされる前の古い構造のShopifyテーマを指します。
  1. ウェブサイトのビジュアルエディターにアクセスします。Shopify管理画面にログインし、オンラインストア → テーマへ進み、「カスタマイズ」ボタンをクリックします。
    Embed Instagram Feed to Shopify vintage themes step 1
  2. 目的のページにカスタムコンテンツセクションを挿入します。ビジュアルエディターを開くとデフォルトでホームページが表示されます。別のページを編集したい場合は、画面上部のドロップダウンメニューから選択してください。
    Embed Instagram Feed to Shopify vintage themes step 2

    ウィジェットを追加するには「セクションを追加」をクリックします。

    Embed Instagram Feed to Shopify vintage themes step 2.2
  3. インストールコードを入力します。不要なセクションがあれば「ブロックを削除」ボタンで消去します。
    Embed Instagram Feed to Shopify vintage themes step 3
    Embed Instagram Feed to Shopify vintage themes step 3.2

    「ブロックを追加」をクリックし、「カスタムHTML」を選択します:

    Embed Instagram Feed to Shopify vintage themes step 3.3

    HTMLフィールドにウィジェットのインストールコードを貼り付け、コンテナ幅を100%に設定して保存します:

    Embed Instagram Feed to Shopify vintage themes step 3.4

これでShopifyの特定ページにElfsightウィジェットを無事追加できました!

Shopifyサイトの全ページにInstagramフィードを追加する方法

以下の簡単な手順で、Shopifyストアの全ページにInstagramフィードをシームレスに統合できます。

  1. ウェブサイトのビジュアルエディターにアクセスします。Shopify管理画面にログインし、オンラインストア → テーマへ進み、「カスタマイズ」ボタンをクリックします。
  2. 目的のページにカスタムコンテンツセクションを挿入します。ビジュアルエディターを開くとデフォルトでホームページが表示されます。別のページを編集したい場合は、画面上部のドロップダウンメニューから選択してください。
  3. ウィジェットを追加するには「セクションを追加」をクリックします。
  4. インストールコードを入力します。不要なセクションがあれば「ブロックを削除」ボタンで消去します。
  5. こちらが「ブロックを削除」ボタンの場所です。
  6. 「ブロックを追加」をクリックし、「カスタムHTML」を選択します。
  7. HTMLフィールドにウィジェットのインストールコードを貼り付け、コンテナ幅を100%に設定して保存します。

これでウィジェットの設置が完了し、Shopifyストアに新たな機能が加わりました。お疲れさまです!

Shopifyの商品ページにInstagramフィードを追加する方法

Shopifyストアの商品ページにInstagramフィードを統合するには、ウィジェットのコードを該当箇所に挿入するだけです。

  1. オンラインストアページにアクセスします。販売チャネル → オンラインストアへ進みます。
  2. コードを編集します。「…」ボタンをクリックし、「コードを編集」を選択。テーマのテンプレートを開きます。
  3. 商品セクションを探します。Sections → main-product.liquidファイルを開きます。
  4. インストールコードを挿入します。Instagramフィードを表示したい場所にウィジェットのコードを貼り付け、保存します。

これでInstagramフィードが美しくShopifyストアに統合され、視覚的な魅力が増し、顧客の関心を引きつけます。

#2 方法:公式Instagram埋め込みコード

Instagramは組み込み機能を提供しており、アカウントが公開設定であれば、InstagramのコンテンツをShopifyストアに直接表示できます。以下の手順で簡単に埋め込みが可能です:

  1. ステップ1:ウェブブラウザでInstagramを開き、埋め込みたい投稿やリールに移動します。
  2. ステップ2:投稿の右側にある三点リーダーをクリックし、メニューから「埋め込み」を選択。表示されたリンクをコピーします。
  3. ステップ3:ShopifyのエディターでInstagramフィードを表示したい場所にリンクを貼り付ければ完了です。

Instagramの自己埋め込み機能は便利ですが、いくつか制限があります。例えば、一度に埋め込めるのは単一の投稿のみで、Shopifyストア上でのフィードの見た目をカスタマイズすることはできません。

#3 方法:カスタムコードの作成

技術的な知識が豊富でコーディングに慣れている場合は、独自のウェブアプリケーションを開発することも可能です。このプロセスは認証トークンの取得から始まり、公式APIへのアクセスを得ますが、多くの開発者にとってここが最初の難関となります。

Instagramは複数のデータ漏洩を受けてAPIを継続的に更新しており、Instagram APIからFacebookのGraph APIへの移行が急速に進んでいます。この変更により、特定のIDが削除され、他ユーザーの写真を収集する機能が制限される可能性があります。

独自のShopify Instagramプラグインを作成する大きなデメリットは、継続的なメンテナンスが必要になることです。Instagramの仕様変更に伴い、アプリのアップデートが必須となり、更新が遅れると数日から数週間にわたりサイトの機能が不完全になる恐れがあります。

重要: この方法はプロのウェブ開発者向けです。必要に応じて開発者を雇い、特定の要件に合わせたカスタムInstagramフィードコードを作成してもらうこともできます。カスタム開発は、独自のShopifyサイトや高度にパーソナライズされた埋め込みコンテンツが必要な場合に最適で、最も重要な要望に応え、正確な機能を実現できます。

なぜShopifyストアにInstagramフィードを追加する必要があるのか

InstagramフィードをShopifyストアに統合することで、以下のような大きなメリットが得られます:

ユーザー生成コンテンツ(UGC)の最大活用

Instagramフィードを埋め込むことで、顧客が作成したコンテンツを効果的に紹介できます。特定のハッシュタグを使って商品写真を投稿してもらい、それらをストアに表示することで、実際のユーザーが商品を楽しんでいる様子を示し、ブランドの信頼性を高めます。

ブランドの認知度向上

Instagramフィードは、訪問者にブランドの独自の美学や個性を伝える役割を果たします。これにより、単なる訪問者が熱心なフォロワーへと変わり、ブランドロイヤルティが向上します。

訪問者のエンゲージメントと滞在時間の増加

Instagramフィードの視覚的な魅力は訪問者の関心を引きつけ、サイト内での滞在時間を延ばします。これにより、商品をじっくり見てもらう機会が増え、売上アップにつながります。

信頼感の向上と信用構築

顧客の満足した体験やブランドとの良好な交流を映し出すInstagramフィードは、社会的証明として機能し、潜在顧客にブランドの信頼性を安心感として提供します。

ショッパブル投稿による販売促進

多くのInstagramフィード埋め込みツールはショッパブル投稿機能を備えており、訪問者がInstagramフィード内のアイテムをクリックすると、直接Shopifyの該当商品ページに移動でき、購入プロセスをスムーズにします。

Shopify用Instagramフィードテンプレート

Instagramフィードテンプレートは、魅力的なInstagramフィードをウェブサイトに埋め込み、ユーザーがShopifyサイトの魅力をより深く体験できる優れたツールです。今日購入に至らなくても、後で再訪して購入するきっかけになるかもしれません。

テンプレート1:Instagramプロフィールウィジェット

Instagram Profile Widget

プロフィールウィジェットは、Instagramの全フィードをFacebookページに直接表示できる多用途なオプションです。このウィジェットを追加することで、フォロワーに最新投稿からストーリーズ、ハイライトまで、ブランドのソーシャルメディア活動を包括的に見せることができます。鮮やかなビジュアルストーリーがFacebookのオーディエンスをInstagramへ誘導します。

このテンプレートが優れている理由:

  • 最新のInstagram投稿を表示し、ブランドのビジュアルアイデンティティをユーザーに伝えます。
  • フォロワー数やエンゲージメント統計を見せることで、潜在顧客の信頼と信用を築きます。
  • ユーザーにInstagramプロフィールのフォローを促し、複数プラットフォームでの一貫したプレゼンスを拡大します。

テンプレート2:Instagram投稿スライダー

Instagram Post Slider

投稿スライダーは、魅力的なInstagramコンテンツをFacebookページ上でスタイリッシュかつダイナミックに紹介する方法です。厳選したInstagram投稿をリンクし、Facebookのオーディエンスをブランドの物語に引き込みます。滑らかなトランジションと視覚的に魅力的なレイアウトで、注目を集め好奇心を刺激します。

このテンプレートの主な利点:

  • ウェブサイトのページ上で最近のInstagram投稿を活気あるスライドショー形式で表示します。
  • ウィジェットのインタラクティブなスワイプナビゲーションでユーザーを惹きつけます。
  • 他のフォーマットより多くの投稿を表示でき、訪問者にInstagramコンテンツをより多く探索する機会を提供します。

ElfsightのInstagramフィードウィジェットは強力なカスタマイズ機能を備え、Shopifyサイトを魅力的でインタラクティブな要素に変える無限の可能性を提供します。

これらを含む50以上の素晴らしいデザインを、当社の優れたテンプレートカタログでご覧ください。

Template Catalog

50以上のInstagramフィードテンプレートを探る

あらゆる用途に対応した既成テンプレートをチェックするか、自分だけのテンプレートを作成しましょう!

Instagramフィードをショッパブルにする方法

Instagramフィードをショッパブルに変えることで、顧客が気に入ったコンテンツから直接購入しやすくなり、EC戦略を大幅に強化できます。効果的な方法は以下の通りです:

1. 適切なツールを選ぶ

Instagramフィードをショッパブルにするには、InstagramコンテンツとECプラットフォームをシームレスに統合できる信頼性の高いツールが必要です。ElfsightのInstagramフィードプラグインは優れた選択肢で、Instagram内で直接ショッパブル投稿を作成するわけではありませんが、Instagramフィードをウェブサイトに埋め込むことで、商品ページへのトラフィックを促進します。

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

ElfsightのInstagramフィードプラグインを使えば、簡単にInstagramフィードをウェブサイトに埋め込めます。このステップは、Instagramプロフィールの視覚的魅力を保ちつつオンラインストアに統合するために重要です。サイト上にフィードを表示することで、ユーザーが商品をじっくり閲覧しやすいシームレスな体験を作り出せます。

3. 画像を商品ページにリンクさせる

フィードをサイトに埋め込んだら、画像を対応する商品ページにリンクさせてショッパブルにします。ユーザーが画像をクリックすると、該当商品の詳細ページに直接移動でき、購入までの導線がスムーズになります。これがショッパブルフィードの強みです。

4. ユーザー生成コンテンツ(UGC)を強調する

ユーザー生成コンテンツは潜在顧客の信頼を築く強力なツールです。顧客にInstagramで商品写真をシェアしてもらい、そのコンテンツを埋め込みフィードに表示しましょう。これにより社会的証明が強化され、共感を呼ぶショッパブルコンテンツが増えます。

5. ショッパブルフィードをプロモーションする

ショッパブルフィードを設定したら、SNSやメールニュースレターで積極的に告知しましょう。フォロワーに直接コンテンツから購入できることを知らせ、特定のキャンペーンや割引を作成してトラフィックと売上をさらに伸ばせます。

これらのステップを踏み、Elfsight Instagramフィードプラグインなどのツールを活用すれば、Instagramフィードを効果的にショッパブル化し、ECストアへの集客と売上増加を実現できます。

ShopifyストアのどこにInstagramフィードを追加できる?

Shopifyサイトの重要な箇所にInstagramフィードウィジェットを効果的に配置することで、顧客のエンゲージメントを大幅に高め、コンバージョン率を向上させ、訪問者の体験を通じて継続的な良好な関係を築けます。最適な設置場所はビジネスの目的によって異なりますが、以下の戦略的な場所が特に効果的です。

訪問者のエンゲージメントを高める

最適な場所:ホームページ

Increase Visitor Engagement

ホームページにInstagramフィードを追加すると、サイトがよりインタラクティブで視覚的に魅力的になり、訪問者の関心を引きつけて滞在時間を延ばします。

Instagramフォロワーを増やす

理想的な場所:フッター

Grow Your Instagram Following

ウェブサイトのフッターにInstagramフィードを埋め込むことで、ソーシャルメディアとサイトの連携が強化され、両方のプラットフォームでの認知度と交流が増加します。これによりフォロワー数の増加とブランドエンゲージメントの向上が期待できます。

オーディエンスとの交流を深める

理想的な場所:ブログページ

Deepen Audience Interaction

ブログページにInstagramフィードを配置することで、サイトのコンテンツとリアルタイムのソーシャルメディア更新を結びつけ、訪問者の関心を引きつけます。これにより訪問者のエンゲージメントが深まり、Instagram投稿への交流も促進されます。

まとめ

まとめると、ShopifyストアにInstagramフィードを追加することで、ユーザーのエンゲージメントが大幅に向上し、サイトに視覚的な動的要素が加わります。Instagramフィードを最も目立つ場所に戦略的に配置することで、訪問者がブランドとより深くつながり、コンバージョン率の向上につながります。

InstagramフィードをShopifyストアに統合する最も簡単な方法は、コード不要でカスタマイズも簡単な信頼できるアプリを使うことです。Elfsight Instagramフィードプラグインは直感的なインターフェースと多彩な機能を備え、Instagramコンテンツを美しく表示できます。Elfsightを使えば、技術的な知識がなくても手軽にInstagramフィードを埋め込めます。

Elfsight Birthday Sale
33% OFF
Get your spot at our party!
Grab The Deal