見出し画像

Shopifyにインスタのフィードを埋め込み表示する方法 「Instafeed 」

こんにちは!日々子育てに奮闘中、ディレクターのMです。

今回はShopifyにInstagram(インスタグラム)のフィードを表示させる方法について紹介したいと思います!
フィードを表示すると言うと難しく聞こえますが、簡単に言うと投稿を表示させる方法です。ECサイトなどでよく見かけますが、そのお店のインスタの投稿をサイトに表示させているアレです!

Shopifyでインスタの投稿を表示させるには「Instafeed ‑ Instagram Feed」というアプリを使用します。アプリの利用料は下記の3つのプランがあります。

・無料プラン
・月額3.99ドルプラン
・月額19.99ドルプラン

投稿を掲載するだけでしたら、無料プランで十分だと思います。では早速インストールをして設定してみましょう。

Instafeedのインストール方法

まずはインストール方法から。アプリは下記のページからインストール可能です。「アプリを追加する」の緑色のボタンをクリックするとインストール画面が表示されます。

インストール画面で右下の「アプリをインストール」のボタンをクリックしてインストールは完了です。

画像1

インスタとの連携方法

アプリのインストールが完了したら、インスタグラムとの連携を行います。アプリ設定画面左上の「Connect an Instagram Account」ボタンをクリックしてください。

画像2

インスタのログイン画面が表示されますので、ログインIDパスワードを入力し、「ログイン」ボタンをクリックします。

画像3

アクセスに関する認証画面が表示されますので、「許可する」をクリックしてください。

画像4

連携が完了すると、アプリの管理画面に投稿が表示されます。

画像5

以上で、インスタとの連携は完了です。

投稿表示の設定方法

インスタとの連携が完了しましたら、投稿を表示する際の設定を行います。設定はアプリ管理画面の左側の画面で行います。各項目の設定について見ていきましょう!

画像6

FEED TITLE
インスタを表示される箇所に掲載するタイトルです。空欄のままでも問題ありません。

IMAGE SPACING
表示される画像と画像の空きの設定です。0%、1%、2%、5%、10%の中から選択できます。0%の場合は画像と画像の間の空きが0でくっついて表示され、1%、2%と増えるにつれて画像と画像の間の空きが広く設定されます。

ON IMAGE CLICK
画像をクリックした際の動作を指定できます。
・Open Popup / Show Product:
 ポップアップでインスタの投稿の詳細を表示します。
・Open Instagram:
 インスタグタムを開いて投稿を表示します。
・Do nothing:
  何も開きません。投稿を表示するだけにしたい場合に設定します。

LAYOUT
投稿画像の表示方法についての設定です。
・Grid:画像が列になって並びます。
・Slider:画像がスライダーで表示されます。

NUMBER OF ROWS
上記LAYOUTの設定で「Grid」を選択した場合、画像を何行表示させるかの設定です。

NUMBER OF COLUMNS
上記LAYOUTの設定で「Grid」を選択した場合、画像を何列表示させるかの設定です。

設定しましたら、「Save」ボタンをクリックして保存してください。
左側の画面で設定した内容は、保存することによって右側のプレビューに反映されますので、確認しながら設定するのがオススメです!

サイトに表示させる方法

最後に、設定した内容でインスタの投稿をテーマのトップページに表示させる方法について説明します。

Shopifyの管理画面で「オンラインストア」>「テーマ」を選択し、「カスタマイズ」からテーマのカスタマイズ画面に移動します。テーマのカスタマイズ画面左側のセクションの設定欄で「セクションを追加する」をクリックします。

画像7

「INSTAGRAM FEED」という項目が表示されますので、そちらの「Instafeed App」をクリックし追加します。

画像8

これでトップページにインスタの投稿が表示されます。表示位置は適宜設定してくださいね。

もし上記のセクションの追加が表示されない場合は、アプリがテーマに対応していない可能性がありますので、投稿を表示させるためのタグを手動で追加してください。手動でのタグの追加方法は下記のアプリのヘルプページを参考にしてください。

いかがでしたか?
一度設定してしまえばインスタの投稿が増えた際にも自動で新しい投稿が表示されますし、設定も比較的簡単にできますし、何といっても無料!で使えますので、是非設定してみてください!

この記事が参加している募集

スキしてみて

ネットショップ出店パック「ECツクール」を新たに展開中! Shopifyサイトの制作なら500,000円(税込)から。まずはお気軽にご相談ください。

カンナートはWEB制作、事業開発、ECサイト運営を主にWEBに関わる要望にワンストップで対応している会社です。ネットショップ制作に関わるノウハウを提供する場としてnoteを公開しています。https://kannart.co.jp/