こんにちは、たかぼー(@taka_forward)です。
先日書いたShopifyの公式アプリ：Product Reviewsについての記事に引き続き、アプリに関する記事を書いていきたいと思います。今回は「Instagramの写真をShopifyストアに表示させる方法」になります。
Instagramでアップしている写真をホームページに表示させたいんですが、、。
Instafeedという無料アプリで簡単に表示させることができます！
<この記事を読むことのメリット>
Instafeedを使ったInstagram×Shopifyサイト連携ができるようになる
目次
Instafeedとは？？
Instagramの投稿をShopifyサイト上に表示させるアプリです。ほんの数分で連携がおわる優れものです。
Instafeedの使い方
ここから「アプリのインストール→Shopifyストアにインスタの投稿を表示」のやり方のそれぞれについてみていきましょう。
Instafeedのインストール
①管理画面の「アプリ管理」からアプリストアにアクセス
②「Instafeed」と検索し、詳細画面から「Add app」→（ページ遷移）→（そのまま）「アプリをインストール」でインストールが完了します。
※インストールしたら設定方法の動画がでますので動画と一緒にやりたいかたは参照してください。
アプリの設定
Instafeedのアプリは1画面で完結しています。順番に設定方法を解説していきます。
①アカウント連携
「Connect an Instagram Account」を押すと、Instagramのページに遷移し、アカウント連携をしましょう。（OKを押すだけです。）非公開アカウント（鍵付き）にしてたらできなかったので、連携に失敗したらアカウントの公開設定をインスタ上で見直しましょう。
②右側に投稿した写真が表示されているのを確認しましょう
連携が完了すると、Account Connected という画面とその下にインスタグラムで投稿している写真がアップされているのを確認しましょう。
③レイアウトを変更しましょう（※必要であれば）
初期設定だと1行4列(4枚の写真が横並び)になっていますので、以下に沿って変更していきましょう。
FEED TITLE: インスタ写真の上に書くタイトルを表示します。（空欄でもOK）
POST SPACING: 写真間の距離を調整します。
ON POST CLICK: 写真をクリックしたときの動作を設定します。
- Open Popup/ Show Product: ポップアップで投稿の詳細がみれます
- Open Instagram: インスタページに移動
- Do nothing: 何もしない（クリックできなくなります）
NUMBER OF ROWS: 写真を何行表示にするか設定します。
NUMBER OF COLUMNS: 写真を何列表示にするか設定します。
設定が完了したら「SAVE」で保存して完了です！（保存すると写真のレイアウトが設定通りに変更されるので気軽に試せるのが好きです）
ホームページ反映
ここまででアプリの設定は完了しました！ただホームページへの表示は変わっていない（反映されていない）のでここから設定していきます。コードなしで実装できますのでやっていきましょう。
インスタグラム投稿はトップページの1番下にある場合が多いので、今回はトップページの1番下に表示させてみます。
- 「管理画面ログイン」>「オンラインストア」>「カスタマイズ」からホームページ編集画面に移動します。
- セクションからInstafeed Appを見つける
- 「目のマーク」クリックで表示（なければ「セクションを追加」から選びます）
- 保存
※Instafeedを表示した際に写真がリアルタイムに反映（表示）されないことがあります。ですが、そのまま保存すれば実際のページに反映されますので、気にせず、「保存」してください。
これで完成です！
（初期状態だと画面いっぱいに写真が表示される仕様になっているので、変更する場合は、上の画面の「Insta feeds」内のFeed Widthを90%などに変更をお願いします！）
トップページのみ、ノーコードで反映ができます。
その他のページに反映される場合は、反映したい箇所に<div id=”insta-feed”></div>
と入力する必要があります。
