これ一択!Shopifyにインスタの投稿を埋め込むアプリを解説

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
shopifyとInstagram

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

Instagramの投稿をShopifyに埋め込み表示するには、Shopifyアプリが必要です。

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

じつは、「無料」「ノーコード」「データの自動更新」「カスタマイズ性」「スマホ対応」などの全ての条件を満たすアプリはほとんどありません。

今回は、数多くの「InstagramをShopifyに埋め込むアプリ」を実際に体験した筆者がオススメする「Socialwidget」について詳しく解説します。

本記事では、誰でもSocialwidgetを使いこなせるように、使い方や注意点までわかりやすく説明します。

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

Socialwidgetとはベトナムのソフトウェア開発会社「Socialhead」が提供するInstagramのチャネル作成アプリです。
Instagramの投稿を管理し、コードを使わずにShopifyやWebサイトに掲載することができます。

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

サンプルサイトがあるので、先にご覧ください。

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

Socialwidget 7つの特徴

特徴は以下の7つあります。

1. デザインのカスタマイズ性

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

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

2. ノーコードで直感的に使いやすいUI

英語仕様ですが、直感的でわかりやすく、プレビューを見ながら操作できるので、誰でも簡単に使いこなせます。コードを書く必要もありません。

3. スマホ対応 (レスポンシブ対応)

他の類似アプリを見てみると、パソコンで見る場合と、スマホで見る場合の表示が同じで、スマホの横幅だと投稿が小さくなるものがあります。

また、スマホの横幅に対応しているものは、アップグレード(課金)や、コードを書く必要があったりします。

ですがSocialwidgetは、ノーコードでパソコンとスマホそれぞれの画面で表示されるデザインを作成する事ができます。

4. データの自動更新

Instagramの投稿内容を自動でアップロードし、Shopifyに掲載される画像を最新のものに自動で更新するのも特徴の一つです。もちろん、手動での更新や掲載する画像を厳選することもできます。

5. ハッシュタグで投稿を集められる

後ほど紹介しますが、Socialwidgetは自社商品のファンが投稿した内容をサイトに掲載するケースも考慮しています。

そのため、特定のハッシュタグで投稿された内容をメディアソースとして集め、掲載する事ができます。

6. 画像に商品リンクを貼り付ける事ができる

サイトにInstagramの投稿を掲載するだけでなく、その画像に商品リンクを貼り、そのまま直接商品の購入ページに遷移させることができます。

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

7. 無料

これだけ機能が充実しているにも関わらず、無料で使用することができます。時間や金銭といったコストを一切かけずに導入が可能です。

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

次にインストールと初期設定について説明します。

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

Socialwidgetの初期設定

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

4種類のツールが表示されるので、右下「Socialwidget」をインストールします。

アプリをインストールするとSocialwidgetが開かれます。
「ユーザー名」「メールアドレス」「パスワード」を設定して「Create Free Account」をクリックします。
4種類のツールが表示されるので、右下「Socialwidget」をインストールします。

次に、Store connectの画面が表示されます。自分のShopifyの「URL」を入力して「Connect」をクリックします。

Store connectの画面が表示されます。
自分のShopifyの「URL」を入力して「Connect」をクリックします。

そして、同期するInstagramのアカウントを設定します。

「左:個人アカウントを使う」「右:ビジネスアカウントを使う」のどちらかを選択します。

※ビジネスアカウントを選択すると複数のアカウントの同期や、ハッシュタグの投稿データを収集できます。

個人アカウントを使う、あるいはビジネスアカウントを使うを選択します。
ビジネスアカウントを選択すると複数のアカウントの同期や、ハッシュタグの投稿データを収集できます。

それぞれInstagram、facebookのアカウント同期が必要になるので、項目にチェックを入れて「完了」をクリックします。

Instagram, facebookのアカウント同期が必要になるので、項目にチェックを入れて「完了」をクリックします。

そうすると「Create your first widget」というページが表示されますが、後から変更ができるので、まず「Create first widget」をクリックし、これで初期設定は完了です。

Socialwidgetの編集とShopifyへの設置

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

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

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

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

Socialwidgetでは、Instagramの特定のアカウントやハッシュタグで投稿されているデータをそのままメディアソースとして収集します。
次に、メディアソースとして集めた画像の中から掲載する画像を選択し、ギャラリーを作成します。
最後にウィジェット(掲載するレイアウト)を作成し、ギャラリーのデータを取り込んだものがShopifyに反映されます。

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

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

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

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

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

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

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

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

そして、右上にある「Add new」をクリックすると他のメディアソースを追加することができます。

Instagramのアカウントを追加する場合は、最初のアカウント登録と同じように、個人アカウント、もしくはビジネスアカウントのどちらかを選択して同期します。

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

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

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

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

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

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

2. ギャラリーの作成

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

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

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

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

3. ウィジェットの作成

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

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

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

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

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

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

ステップ1

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

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

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

ステップ2

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

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

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

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

ステップ3

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

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

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

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

Socialwidgetを利用する際の注意点

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

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

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

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

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

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

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

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。