Shopifyへのインスタフィード埋め込みで投稿&UGCを活用!方法とおすすめアプリを紹介

ECサイトを運営する上で、SNSを活用しない手はありません。その中でも幅広いユーザーを持つInstagram(通称インスタ)は、集客やプロモーションに高いポテンシャルを備えていると言えます。そこで、インスタに投稿した画像や動画をShopifyサイトに埋め込むメリットや、その方法、便利なアプリなどについて説明します。

Shopifyで構築したECサイトにインスタを埋め込むメリット

ルネ フルトレール公式オンラインストア

フランスで誕生したスカルプ&ヘアケアブランド「ルネ フルトレール」公式オンラインストアにもインスタグラムのフィードが埋め込まれている


Shopifyとインスタの連携と聞いて、真っ先に思い浮かべるのは「Instagramショッピング」ではないでしょうか。「Instagramショッピング」は、インスタに投稿した写真や動画から直接買い物をしたりECサイトに誘導したりする機能で、インスタユーザーを取り込む強力な販促ツールであることは間違いありません。

一方、今回紹介するのはインスタに投稿した写真や動画を自社で運営するShopifyで構築したECサイトに埋め込む方法です。インスタに投稿する商材写真やキャンペーンのお知らせなど力を入れたコンテンツをそのままECサイトに取り入れることでどのようなメリットがあるか見ていきましょう。

「Instagramショッピング」についてはコチラの記事で詳しく紹介しています。ぜひ併せてご覧ください。

サイト更新の簡略化

インスタのフィードをECサイトに埋め込んだ場合、インスタに投稿するだけで自社ECにも最新の投稿が反映されます。そのため、新商品のイメージ画像やインスタのハッシュタグを使ったキャンペーン情報などがサイトの利用者にもリアルタイムに届けられます
また、その際ECサイト側の更新の手間が省けることもメリットの1つと言えます。

ほかのユーザーの反応を伝えやすい

インスタの投稿には、インスタユーザーからの「いいね!」やコメントが付きます。ECサイトに訪れた顧客は、そうしたインスタユーザーの反応も含めて投稿をEC上で見ることができます。
さらに、キャンペーン用のハッシュタグなどを用いて、実際に購入したユーザーの投稿をECサイトに埋め込むことで、見込み客の背中を押す効果も期待できます。

インスタアカウントのフォロワー獲得

ECサイトを利用している既存顧客でも、ブランドのインスタアカウントをフォローしているとは限りません。そのような顧客に、インスタならではのお得情報があることを周知すれば、インスタアカウントの新規フォロワー獲得から、顧客との接点が増加し、顧客ロイヤルティの向上にも繋がります。

Shopifyにインスタのフィードを埋め込む3つの方法

Shopifyで構築したECサイトにインスタのフィードや個別の投稿を埋め込むには、アプリを使う方法、埋め込み機能を持つテーマを使う方法、コードを直接入力する方法があります。ここでは、それぞれの方法について説明します。

アプリを使って埋め込む

Shopifyにインスタのフィードを埋め込む最も一般的な方法です。後述するように、インスタの投稿からコードを取得して表示することも可能ですが、レイアウトの微調整などを行うにはCSSの記述が必要になります。
一方、インスタの埋め込みに特化したアプリを使えば、簡単な設定で表示の調整が可能です。また、アプリによってはCTA(Call To Action)ボタンの追加など高度な設定に対応しているものもあります。

インスタのフィードの埋め込み機能があるテーマを使用

一部のテーマにはインスタのフィードの埋め込みに対応しているものがあります。そうしたテーマを利用すれば、全体のデザインに違和感なくインスタのフィードを組み込めるメリットがあります。
なお、以前のShopify公式テーマには、テーマエディタで「Instagramフィード」セクションを追加する機能がありましたが、インスタのAPI変更により以前のアクセストークンでは画像が表示できなくなっています。もし、以前の「Instagramフィード」セクションがそのままになっている場合は、セクションを削除してインスタのフィードを読み込むアプリを使うことが推奨されています。

コードを直接編集する

インスタでは、個別の投稿やプロフィールぺージの埋め込みコードを生成できます。このコードを使えばShopifyで構築したECサイトへの組み込みは可能ですが、HTMLモードでコードを編集する必要があります。
ちなみに、インスタの投稿やプロフィールページの埋め込みコードは、PCまたはスマホのWebブラウザーでのみ取得可能です。インスタアプリでは取得できない点と、非公開アカウントでは埋め込みコードが生成できない点に注意が必要です。

インスタから埋め込みコードを取得する

始めにWebブラウザからインスタにアクセスします。
コードを取得したい投稿画面右上部の[…]をクリック/タップし、表示されたポップアップウインドウで[埋め込みコード]を選択します。

インスタ操作画像

埋め込みコードはスマホアプリからは取得不可。必ずPCまたはスマホのWebブラウザからインスタにアクセスを

生成された埋め込みコードをコピーして所定の場所に貼り付けます。このとき、Shopifyテーマの仕様に合わせて編集が必要になることがあります。
なお、「キャプションを追加」にチェックを入れると、投稿に付けたキャプションも同時に貼り付けられます。写真や動画のみ使いたい場合はチェックを外してからコピーします。

インスタ操作画像

Instagram APIを利用する

また、Instagram(Meta社)では、APIを公開しています。プログラミングの知識がある場合は、APIを利用することで自由度の高いインスタのフィード埋め込みが可能です。なお、Instagram APIには、一般アカウント向けの「Instagram 基本表示 API」と、ビジネス/クリエイターアカウント用の「Instagram グラフ API」の2種類があります。ECサイトと連携させて利用する場合は、より幅広い機能にアクセス可能なビジネスまたはクリエイターアカウントを作成するとよいでしょう。

インスタのフィードの埋め込みにおすすめのアプリ3選

上記の通り、インスタのフィードをShopifyで構築したECサイトに埋め込む方法はいくつかありますが、アプリを使うという選択肢が現実的です。そこで、インスタのフィード埋め込みにおすすめのアプリを3つほど紹介します。
なお、アプリや利用するプランによってインスタのビジネスアカウントが必要なものや、逆に無料プランでは一般アカウントでの試用に制限されるものなど対応に幅があります。ダウンロードする前に確認しましょう。

Instafeed ‑ Instagramフィード連携アプリ

Instafeedは、インスタのフィードをShopifyで構築したECサイトに組み込むときのファーストチョイスとも言える人気のアプリです。
シンプルな操作でShopifyテーマに合わせてレイアウトをカスタマイズできる点に加え、無料プランでも写真とリール(短い動画)の表示に対応していることから、まずは試してみたいユーザーにおすすめです。

LEEEP(リープ)‑ Instagram投稿や動画を簡単掲載

LEEEPは、自社アカウントだけでなくユーザーによる投稿(UGC)を取得・管理する機能を備えたアプリです。
例えば、アパレルブランドでは、公式の商材画像と同様にユーザーによる着画やコーディネートが顧客の購買意欲を後押しすることが期待できます。また、コンテンツごとの売り上げ確認および分析機能も含まれます。

Socialwidget ‑ Instagram Feed

Socialwidgetは、インスタやTikTokのコンテンツの読み込みに対応したアプリです。
無料プランではインスタのフィード表示にのみ対応できる一方、有料プランではインスタの商品タグやCTAボタンの追加にも対応するなど、売り上げに直結する機能を備えています。ただし、現状日本語には非対応なので、注意が必要です。

インスタ連携の他にも、Shopifyに入れると便利なおすすめアプリを紹介した記事もあります。併せてご覧ください。

ShopifyのECサイトにインスタのフィードを使った事例

最近は、ECサイトにインスタのフィードを表示させる企業も少なくありません。ここでは、いくつかの事例を挙げながら、活用方法を見ていこうと思います。自社のECサイトにインスタのフィードの埋め込みを検討されている方は、ぜひ参考にしてみてください。

サイト内で完結することで離脱を防ぐ例:John Masters Organics

John Master Organics JapanのECサイトにも、インスタの投稿が埋め込まれていますが、注目すべきはECサイト内で投稿をクリックした時です。
埋め込んだインスタのサムネイルをクリックすると、インスタのWebページに飛ぶのではなく、ECサイト内で表示されるようになっています。商品ページへのリンクを貼るなどの施策も、ECからの離脱防止に有効でしょう。

ギャラリーのサムネイルをクリックすると、サイト内で写真がポップアップ表示される

UGCを活用した例:ミキハウス

自社の投稿だけでなく、インスタのフォロワーからの投稿を活用できるのもインスタと連携するメリットの1つです。
ミキハウスのECサイトにも、インスタの埋め込みが設置されていますが、そこにはミキハウス公式投稿だけではなく、ユーザー投稿も併せて掲載されています。
ユーザーキャンペーンやショップ指定のハッシュタグを使って投稿を絞りこむことも可能です。ショップの商材写真にはない商品の魅力や新しい提案の発信に繋がる点が効果的です。

ミキハウスのUGC創出投稿のスクリーンショット

UGCを生み出すためのキャンペーン施策も活発に行っている

商品タグやCTAを追加した例:ミキハウス

ミキハウスのインスタの埋め込みでは、上記の他にも効果的なものがあります。インスタの投稿写真を表示する画面に、商品タグや関連商品へのリンクなどのCTAボタンを埋め込むことで、商品カタログのように活用できるため、コンバージョン率アップが期待できます。

トップページのサムネイルをクリックして投稿を展開すると、キャプションの上に着用アイテムの商品ページにリンクされていることがわかる

インスタのフィードの埋め込みで注意したいこと

Shopifyで構築したECサイトへのインスタのフィードの埋め込みは比較的手軽で、手を加えれば販促ツールにもなり得る施策です。その一方で、手軽だからこそ事前に知っておきたいポイントもあります。ここでは、インスタの埋め込み時の注意点をいくつか上げておきます。

フィードが表示されなくなったら?

PCを眺める人の写真

埋め込んだ写真が表示されない理由には、次のようなケースが考えられます。

  1. 投稿が削除された
  2. 非公開アカウントによる投稿
  3. 自社アカウントのパスワードを変更した場合

1のケースでは、そもそも投稿がサーバから削除されているので読み込めません。また2の非公開アカウントの投稿については、リンクが取得できない仕様であるためフィードに反映されません。
なお、3についてはShopifyで埋め込み操作を行う際にログインしたインスタ(Facebook)のパスワードを変更してしまうと、自社アカウントのフィードにアクセスできなくなってしまうようです。インスタのアカウントのパスワードを変更したら、Shopify側でも埋め込みアプリ等で新しいパスワードを使って再度ログインし直しましょう。

ほかのユーザーの投稿を使用する場合

フォロワーやキャンペーン参加者の投稿を使用する場合は、無用なトラブルを防ぐためにもメッセージやコメントなどを通じて事前に許可をとるようにしましょう。また、ハッシュタグキャンペーンを実施する際に、指定のハッシュタグ付きの投稿について、リポストや自社ECへの転載の可能性があることを明記しておくことも重要です。

インスタアカウントの種類を確認しよう

前述の通り、使用するアプリやプランによって対応するインスタアカウントの種類が異なります。これは、インスタのアカウントによって使用可能なAPIが異なるためです。例えば、通常アカウントのInstagram基本表示APIでは写真や動画、リールの埋め込みが可能ですが、ビジネス/クリエイターアカウントのInstagranグラフAPIでは、それらに加えてストーリーの埋め込みやハッシュタグの付いたメディアの発見など、より多くの機能が利用できます。
なお、Instagramショッピングの利用にはビジネス/クリエイターアカウントの取得は必須となりますが、単にフィードの埋め込みだけの利用であれば、用途に応じてアカウントを選ぶとよいでしょう。

Shopifyとのインスタの連携でお悩みなら、BiNDecへご相談ください

インスタの埋め込みは、用途にも埋め込み方法にもさまざまな選択肢が用意されています。使い方次第では、顧客の獲得や売上げに繋がる可能性があるだけに、施策としてじっくり取り組みたいと考えるEC事業者も少なくないでしょう。インスタとShopifyを連携した効果的な施策の実施に迷ったら、プロの手を借りるのもおすすめです。
これまで多くのShopifyによるECサイト構築・運営の経験と実績を持つ「Shopify Plusパートナー」のBiNDecが、SNSと連携したShopify構築を承ります。お気軽にご相談ください。
BiNDecのオンライン相談に申込む

資料を無料ダウンロード