Shopifyにインスタの投稿を埋め込むアプリを徹底解説

この記事の所要時間：8分

Instagramの投稿をShopifyで構築したサイトに表示するには、Shopifyアプリが必要です。

ですが、Shopifyのアプリストアで「Instagram　feed」と検索すると200種類以上のアプリがあり、「どれがいいのかわからない」「いくつか試してみるのも面倒」と思う方も少なくないと思います。

そこで今回は、誰でも簡単に設定できるInstagramの投稿を表示するおすすめShopifyアプリ「Socialwidget」をご紹介します。ぜひ本記事を参考に試してみてください。

また、一方でInstagramにShopifyの商品データを反映したい方は、以下の記事を参考にしてください。

Shopifyと連携してInstagramショッピングを活用する方法

ノーコードでInstagramを埋め込むアプリ「Socialwidget」とは

Socialwidgetは、ユーザーのInstagram投稿を管理し、コードを使わずにShopifyやWebサイトに掲載することができるShopifyアプリです。

Socialwidgetを活用すると、新作商品の投稿や自社ブランドのファンが投稿した内容をShopifyに掲載することができ、Instagramへの集客や商品の信頼性を高めることができます。

まずは、以下のサンプルサイトをご覧ください。

SocialwidgetでInstagramのフィードを掲載したサンプルサイト

Socialwidgetの主な特徴

Socialwidgetの主な特徴は以下の7つです。

• デザインカスタマイズの自由度が高い
• ノーコードで直感的に使いこなせるUI
• スマホ対応(レスポンシブ)
• データの自動更新
• ハッシュタグで投稿を収集できる
• 画像に商品リンクを設置できる
• TikTokの投稿もショップに掲載できる

デザインはネットショップにおいて、とても大事な要素です。

Socialwidgetは、テンプレートデザインを自分好みに編集することができ、カラーや表示する投稿画像の丸みなど、細部までこだわることができます。

ノーコードで直感的に操作することができるので、英語仕様ですが誰でも簡単に使いこなすことができます。

また、Instagram上の投稿を特定のハッシュタグをトリガーにして投稿データを収集したり、TikTok上の投稿も収集してショップに掲載することができます。

ネットショップのトップ画面に掲載するInstagramの投稿には、その投稿画像にある商品のリンクを貼り、そのまま直接商品の購入ページに遷移させることができます。

ユーザーはサイト上で、最新のInstagram投稿を見て、その商品が欲しいと思うと、そのまま商品ページに移動することができます。

プランと料金

Socialwidgetは、無料プランを含め4つのプランがあります。各プランの機能と料金は以下のとおりです。

	スターター	スタンダード	プロフェッショナル	アドバンス
月額料金	無料	9.9ドル	19.9ドル	49.9ドル
データ自動更新の頻度	24h	24h	6h	2h
メディアソース数	1	2	3	5
ギャラリー数	1	2	3	5
ウィジェット数	1	2	3	5
投稿あたりのタグ数	1	2	3	5
ウィジェットの種類(Desktop)	1	9	9	9
ウィジェットの種類(Mobile)	1	6	6	6
レポート機能	○	○	○	○
TikTokデータの取得	×	○	○	○
Instagramのストーリーズ	×	○	○	○
いいね・コメントの表示	×	○	○	○
チェックアウト/カート追加ボタン	×	×	○	○
ハッシュタグでのデータ収集	×	×	×	○

プランによって、ネットショップに表示できるウィジェット(投稿が並ぶセクション)の数、メディアソース元(#タグや投稿など)の数などに制限があります。

また、ウィジェットのテンプレートデザインの数、TikTokやInstagramストーリーズの投稿使用の可否などが異なります。

Socialwidgetのインストールと初期設定

では、Socialwidgetの初期設定について説明します。

まずはコチラからアプリをインストールします。

アプリのインストールが完了したら「ユーザー名」「メールアドレス」「パスワード」を設定して「Create Free Account」をクリックします。

利用するプランを選択して、「Instagram Account」をクリックし、同期するInstagramのアカウントを設定します。

Instagramの連携が完了するとウィジェットの作成画面が表示されるので、「ウィジェットタイプ」「ウィジェットを表示するページ」「ウィジェットを表示する場所」を選択します。

最後に「Create First widget」をクリックします。

こちらの設定は後ほど変更することができます。これで初期設定が完了です。

Socialwidgetの編集とShopifyへの設置

ここからはデザインや掲載画像の内容を編集していきますが、先に全体像を説明します。

このアプリでは、Instagramの特定のアカウントやハッシュタグで投稿されているデータをそのままメディアソースとして収集します。

次に、メディアソースとして集めた画像の中から掲載する画像を選択し、ギャラリーを作成します。

最後にウィジェット(掲載するレイアウト)を作成し、ギャラリーのデータを取り込んだものがShopifyに反映されます。以下の図がイメージです。

では、「メディアソースの登録」「ギャラリーの作成」「ウィジェットの作成」の3ステップに分けて詳しく説明します。

1. メディアソースの登録

まず始めに、Instagramの画像を収集します。

左上にある「メディアソース」ボタンをクリックすると、すでに同期済みのInstagramアカウントが表示されます。

アカウントをクリックすると以下のように、取得されたデータとして、投稿の一覧を見ることができます。

①メディア名
後ほどギャラリー作成時に使用します。わかりやすい名前にしましょう
②自動同期
オン(青色)にすることで、このInstagramアカウントの投稿内容を自動的に取得します
③同期頻度
自動同期をオンにしている場合の同期する頻度を指定します
④メール通知
オン(青色)にしておくと、同期する際にメール通知が届きます
⑤保存
内容を変更したら必ず保存しましょう

そして、右上にある「Add new Source」をクリックすると他のメディアソースを追加することができます。(※有料プランのみ利用可能)

特定のハッシュタグをつけた投稿データを収集する場合は「Add new」をクリックし、以下の手順で必要情報を入力します。

①「Instagram Account」を選択
②「# Hashtag」を選択
③収集したい投稿のハッシュタグを入力
④メディア名を設定 (ギャラリー作成時に使用します)
⑤「Next」をクリック

そして次の画面で更新頻度などを設定し、保存して完了です。

①取得する投稿データの枚数を指定
②取得する投稿データは「最新のものか/トップのものか」を選択
③同期の頻度を指定
　※ハッシュタグの場合、他人の投稿データを取得するので、手動更新に設置し、掲載する前に本人の確認を取ることをおすすめします。
④同期する際のメール通知を設定
⑤「Save」をクリックして保存

2. ギャラリーの作成

メディアソースの登録が完了したら、次にその投稿データのうち、どの投稿を掲載するかを選択します。

左上にあるメディアソースボタンのすぐ下「ギャラリー」ボタンをクリックし、すでにあるデフォルトのギャラリーを選択すると、以下の画面が表示されます。

①ギャラリー名
ギャラリー名を設定します
②現在のメディアソース
現在このギャラリーに登録されているメディアソース一覧です
③メディアソースの追加
使用するメディアソースを追加します。「Choose media source」をクリックし、追加したいメディアソースを選択してください
④商品リンクの指定
画像に商品リンクを設定し、画像から直接商品のページに遷移させることができます。「Tag Product」をクリックし、リンク先の商品ページを選択します
⑤非公開にする
メディアソースを追加すると、全ての画像が追加されるため、自社サイトで公開しない画像はオフ(非公開)にします
⑥保存
編集を終えたら必ず保存しましょう

これで掲載する画像データについては、すべて完了です。

3. ウィジェットの作成

そして最後に、サイト上で表示するデザインの編集をします。

今度は、左上にあるギャラリーボタンのすぐ下「ウィジェット」ボタンをクリックし、すでにあるデフォルトのウィジェットを選択すると、以下の画面が表示されます。

最初に編集画面について説明します。

①デザイン編集は、3ステップに分かれています。いま何を編集しているのか表示されます
②こちらは実際に表示される画面のプレビューです。画面上部にある「Desktop / Mobile」を切り替えてパソコン画面とスマホ画面のプレビューを見ることができます
③「Next」をクリックすると、次のステップに進みます

では、編集について3つのステップを説明します。

■ステップ1

最初に、ギャラリーのレイアウトを決めます。デスクトップが9種類、モバイルが6種類あるので、プレビューを見ながら好みのものを選んでください。

①ウィジェット名を設定
②使用するギャラリー(投稿データ)を選択
③レイアウトを選択
→「Next」をクリックして次へ

■ステップ2

次は、デザインの細かな設定や、画像の上下に表示する文字、クリックした際のポップアップのデザインなどを設定します。

<デスクトップ>
①レイアウト編集
画像の間隔や角の丸み、ウィジェットと上下に表示される他の項目との間隔を設定します。また背景の色の変更も可能です。
②タイトルと説明文の設定
デスクトップで表示するウィジェットのタイトルと説明文を設定します
③ボバーデザインの設定
デスクトップでマウスを画像に重ねた際に、表示するホバーの編集ができます。
色や文字だけでなく、「ロゴ」「文章」「いいね数」「コメント数」「投稿日」の表示が可能です。
④ポップアップデザインの設定
デスクトップで画像をクリックした際に、表示するポップアップの編集ができます。

<モバイル>
⑤レイアウト編集
画像の間隔や角の丸み、ウィジェットと上下に表示される他の項目との間隔を設定します。また背景の色の変更も可能です。
⑥タイトルと説明文の設定
モバイルで表示するウィジェットのタイトルと説明文を設定します
⑦ポップアップデザインの設定
モバイルで画像をクリックした際に、表示するポップアップの編集ができます。
→「Next」をクリックして次へ

■ステップ3

最後にShopifyに埋め込むウィジェットの位置を選択します。

①ウィジェットを埋め込む場所を選択
② ①でカスタムを選択した場合は、「Select element」からShopifyにログインして編集します
→「Save」をクリックして保存

これで全ての設定が完了しました。Shopifyにログインして確認してください

Socialwidgetを利用する際の注意点

以上で完成ですが、最後にいくつか注意点があります。

ビジネスアカウントが必要

ハッシュタグや様々なメディアソースを収集する場合は、FacebookとInstagramのビジネスアカウントが必要になります。必要な場合は、あらかじめ準備をしてください。

ハッシュタグは自分で設定する

ブランドなどを手掛けている方は、顧客がInstagramに投稿した自社商品の画像などを使用したいと思います。

メディアソースとして収集することを先に考え、あらかじめ「#〇〇」で投稿するように促しましょう。

他人の投稿は許可をもらい掲載する（自動更新にしない）

ハッシュタグなどで収集した他人の投稿データを使用する場合、著作権などの問題が発生します。サイトに掲載する際は、あらかじめ本人に確認を取りましょう。

また、投稿データの収集を自動更新にしていると、自動でサイトに掲載されてしまいます。メディアソース画面の「Auto sync（自動更新）」をオフにし、手動で更新することをおすすめします。

【最後に】Twitterの投稿を掲載するアプリもある

今回はInstagramの投稿をネットショップに掲載するアプリ「Socialwidget」についてご紹介しました。

また、ブランドによってはTwitterの方が相性がいいショップもあると思います。その場合は、Twitterの投稿を掲載するShopifyアプリ「Twitter Feed」を活用してください。

ユーザーの投稿を掲載することで、ショップや商品の信頼性が増して売上にも影響するので、ぜひこれらのアプリの導入を検討してみたください。