Shopifyでインスタ連携する方法【フィードを埋め込み表示】

投稿日 2020年12月29日
更新日 2021年5月25日
著者 hiro
カテゴリー Shopify

Shopifyとインスタグラムを連携したい。

インスタのフィードをShopifyで作ったサイトに埋め込んで表示させたい。

こんなことを考えている方へ。

この記事のポイントは以下です。

Shopifyで作ったサイトにインスタのフィードを掲載する方法

この記事を書いている私は大阪在住のweb制作フリーランスです。

東証一部のEC企業で5年勤務した後、フリーランスに転向しました。現在はウェブサイトを作ったり、ECサイトを作ったり、サイト分析をしたり、ブログを書いたりして生活しています。

Shopifyでインスタ連携する方法【フィードを表示】

Shopifyで作ったサイトにインスタグラムのフィードを表示させる方法を解説します。

以下のように投稿画像をサイトに埋め込み表示するのが目的です。

標準機能にはついていないので、無料のアプリを利用します。「Instafeed ‑ Instagram Feed」です。

参考：Shopifyアプリストア – Instafeed ‑ Instagram Feed >

アプリの概要は以下。

設定方法は公式サイトにもヘルプがありますが、英語なのでわかりにくいです。

なので本記事で詳しく解説します。

参考：アプリ開発元のヘルプ – Add Instafeed to your Homepage. >

また、このアプリは基本無料ですが有料プランもあります。

機械的に翻訳した料金プランは以下。

「Instafeed ‑ Instagram Feed」をインストールする

まずは「Instafeed ‑ Instagram Feed」をインストールします。以下のリンク先からインストールできます。

参考：Shopifyアプリストア – Instafeed ‑ Instagram Feed >

「Add app」を押下でショップの管理画面に移動します。そして「アプリをインストール」を押下。

インストール直後の初期画面は以下です。

まずはインスタグラムのアカウント接続をします。

「Connect an Instagram Account」をクリックします。

インスタグラムのログイン画面が表示されます。

サイトにフィードを表示させたいアカウントのログインIDとパスワードを入力します。

「Mintt Studioが以下の認証を求めています」と表示されるので「承認」を押下します。

Mintt Studioとはアプリの開発元です。

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

これでひとまず連携は完了です。

続いてストアフロントの表示設定（3列x２行など）をしていきます。

【関連記事はこちら】
Shopifyを使ったECサイト参考事例まとめ【国内海外】を読む >>

各設定項目の説明

管理画面は、

右側にプレビュー
左側に各種設定項目

というレイアウトになっています。

そして、

FEED TITLE
POST SPACING
ON POST CLICK
NUMBER OF ROWS
NUMBER OF COLUMNS

という5つの項目でフロントでの表示を編集できます。

各設定項目を順番に解説します。

FEED TITLEは文字通りフィードのタイトルです。

ここに入れた文字はフロントで表示されます。後述する管理画面で文字サイズやフォントも調整できます。もちろん、cssを弄ればもっと自由にカスタマイズできます。

POST SPACING を編集することで、投稿画像の間隔を調整できます。たとえば「0%」だと、投稿画像は隙間なく並べられます。

「10%」にすると、以下のように隙間ができます。

NUMBER OF ROWS と NUMBER OF COLUMNS で表示する投稿の行数と列数を調整できます。

NUMBER OF ROWS が行数（縦並び）でNUMBER OF COLUMNSが列数（横並び）です。

ON POST CLICK で投稿画像がクリックされた時の挙動を調整します。私は基本「Open Instagram」にしています。クリックでインスタ起動です。

【関連記事はこちら】
Shopifyをカスタマイズする際に参考にするサイトを読む >>

フィード表示の設定をする

各種設定が完了したら、いよいよストアフロントにフィードを表示させます。

今回は例として以下のように設定しました。

項目	設定内容
FEED TITLE	なし
POST SPACING	10%
ON POST CLICK	Open Instagram
NUMBER OF ROWS	2
NUMBER OF COLUMNS	4

続いてフィードをストアフロントに表示させていきます。

今回は「Atlantic」というテーマに導入しました。実際に案件で使ったテーマでして、ザ・ECという使い勝手のいいテーマです。

まずは　管理画面 > オンラインストア > テーマ　を選択します。

カスタマイズ　へと進みます。

セクションを追加する　を押下。

「Instafeed App」を選択して追加します。

セクションの右側の「・・・」（6つの点）をドラックして動かすことで、フィードの表示位置を変えることができます。

「Instafeed App」をクリックすると設定画面が開きます。ここでも表示レイアウトの調整ができます。

「Feed Width」でコンテンツ幅を調整できます。デフォルトは100%（インナーの全幅）です。

たとえば、70%にすると左右の余白が広がります。

Custom Code（optional）はhtmlを記述できます。

入力した内容はフィードのタイトル部分に表示されます。

クラス名をあてることができるので、cssで調整が可能です。

複雑なカスタマイズをしたい場合はおすすめです。

ちなみに、ストアフロントへの表示方法は公式ヘルプが動画付きで解説しています。アプリの管理画面のページ下部にある「ADD INSTAFEED TO YOUR HOMEPAGE」をクリックすると、

動画が起動して、設定方法をレクチャーしてくれます。

アプリ公式サイトの以下のページにも解説があります。

参考：アプリ開発元ヘルプ – Add Instafeed to your Homepage >

表示を確認する

管理画面 > オンラインストア > プレビューでストアフロントでの表示を確認します。

意図した場所に表示されていれば完了です。

インスタグラムのパスワードを変えてしまったら？

インスタグラムのログインパスワードを変えると、Shopifyとの連携が切れます。

このパターンは実際に経験がありまして、クライアントから連絡が来ました。「インスタのパスワードを変えたらフィードが表示されなくなった」と。

対処方法はシンプルで、もう一度アカウント連携をすればOKです。

初期設定時と同じように「Connect an Instagram Account」をクリックして進めます。

私が行ったときは、以前の設定もちゃんと引き継いでくれました。

スマホとPCで表示カラム数を変えたい

PC時は4カラム、スマホ時は2カラムのように表示を変えたい時があると思います。

管理画面からノーコードで変えるには、有料プランを契約する必要があります。

ただ、

無料でなんとかしたい！

という場合はcssを編集することで可能です。

以下は375px時の4カラム表示です。1つの画像は80pxくらい。小さくて見にくいですね。iPhone SEクラスの画面サイズ（320px）だと相当小さくなります。

widthとpadding-topは25%で、画面幅の1/4になっていることが分かります。また当該クラス名は「instafeed-container」です。

2カラムにしたかったら、widthとpadding-topの数値を50%に近づければOKです。ちなみに「! important」を付けないとスタイルが当たりません。

cssの調整においては、もちろん「POST SPACING（投稿画像の間隔）」の数値と、ブレイクポイントも考慮します。

POST SPACINGの数値は「instafeed-container」直下のimgタグに当たっているので、ここもcssで調整します。

実際にスマホ用にスタイル調整したコードの例が以下です。

この例では、

ブレイクポイントは768px
PC時は15コ表示（3行×5アイテム）、スマホ時は6コ表示（3行×2アイテム）
アイテム同士の余白は36px

という設定にしています。

/* ============================================================================
 instafeed sp
============================================================================== */
@media screen and (max-width: 768px) {
    .instafeed-container {
        width: 50.000000% !important;
        padding-top: 50.000000% !important;
    }
}

@media screen and (max-width: 768px) {
    .instafeed-container .js-lazy-image,
    .instafeed-container .instafeed-overlay {
        width: calc(100% - 18px) !important;
        height: calc(100% - 18px) !important;
    }
}

@media screen and (max-width: 768px) {
    #insta-feed > *:nth-child(n+13) {
        display: none;
    }
}