ShopifyへInstagram埋め込み方!アプリを使う方法も紹介

こんにちは。中川瞬(@shun01224)です。

中川
この記事ではShopifyへのInstagram埋め込み方法について知りたい
という方のために、Instagram埋め込み方法とアプリについて解説をします。

この記事を読むことで、

  1. ShopifyへInstagram埋め込み方がわかる
  2. ShopifyへInstagramを埋め込むアプリがわかる
  3. ShopifyへInstagramを埋め込むメリットがわかる

この記事を書かせて頂いている私は、現在、

輸出・輸入・国内の転売のノウハウをお伝えしています。

時間がない会社員の方や子育てをしている主婦の方に、指導や転売システムの提供をして、

忙しくても副業で収入を得てもらっています。

それでは、ShopifyへのInstagram埋め込みについて解説をしていきます。

 

ShopifyへInstagramを埋め込みさせるメリット

まずは、ShopifyにInstagramを埋め込むメリットから紹介します。

Instagramと連携させると、商品を画像でアピールしやすくなるでしょう。

また、Instagramから直接商品を販売できるメリットもあるため、

Instagramで集客を目指す人に連携がおすすめです。

Instagramユーザーにアピールできる

Shopifyには、簡単にInstagramの販売チャネルを増やす機能があります。

販売チャネルを増やせば、

Shopify以外のプラットフォームでも商品をアピールできるようになります。

Instagramでの商品紹介は、Instagramをよく利用する層にアピールできるのが魅力です。

人によっては、Instagramで情報収集する場合もあるため、画像で商品を紹介すれば、

興味をもった人がショップにアクセスしてくれます。

また、Instagramで定期的に商品紹介をしていれば、

接触機会が増えてファンになってくれる可能性があるでしょう。

新しい投稿があれば、新商品の開発に積極的なショップだと認識してもらえます。

ほかにもInstagramはユーザーとコメントでコミュニケーションがとれるので、

コメントを見たユーザーは安心感をもつことができます。

Instagram上で商品を販売できる

ShopifyとInstagramを連携させると、Instagramのタグから商品を直接購入できます。

タグには商品ページのリンクを貼ることができて、商品認知から購入までがスムーズです。

リンクに移動するには、写真をタップするだけです。

画像をタップするだけなら、ユーザーの使い勝手が良くなります。

商品に興味をもっても、URLを打ち込むとなると、面倒だと感じてしまうものです。

ワンクリックだけならユーザーの手間が少なく、

商品詳細ページを見てくれる可能性があります。

通常、Instagramの画像にリンクを貼ることはできません。

リンクを貼ることができるのは、ShopifyとInstagramを連携させた場合です。

また、通常は投稿文にもURLは貼れないので、

ユーザーの利便性を高めたいならShopifyとの連携がおすすめです。

ShopifyへInstagram埋め込みさせる方法

Instagramに投稿した画像は、Shopifyショップページへ埋め込めます。

商品ページからもInstagramへアクセスしやすくしてみましょう。

埋め込み方法は、フィードを作成してからコードを設置する2ステップです。

フィードを作成する

まずは、ShopifyでInstagramのフィード作成からです。

Shopifyにログインしたら、プラグイン選択からフィードを選択してください。

次にプロフィールから「アカウント追加」を選びます。

アカウント追加では、Facebookアカウントを追加します。

まだ、Instagramのアカウントをビジネスプロフィール化していない場合は、

事前に済ませてください。

次に、InstagramアカウントとFacebookページを接続しましょう。

Facebookページの接続が済んだら、ソースから「新しいソースを追加」を選びます。

次にInstagramをクリック、新しいソースを追加で「Instagram#ハッシュタグ」。

「Instagramのハッシュタグを入力」欄に、ハッシュタグ名を入力してください。

「メディアは正常にインポートされました」の表示が出たら、

次はフィードの作成を選択します。

すると、入力したハッシュタグのフィードが作成されています。

右側にコードが表示されているので、コードをコピーしておいてください。

コードをショップに設置する

コードをコピーをしたら、Shopifyのマイページを開きます。

オンラインストアからページへと進んでください。

ページから「ページを追加」を選び、ページのコンテンツ欄にコードを貼り付けていきます。

コンテンツ欄の右側に<>のマークがあるのでクリック、

するとHTML記入用表示になりました。

HTML表示に切り替えたら、先ほどコピーしたコードを貼り付けましょう。

これで、ShopifyのページにInstagramを埋め込めました。

Shopifyショップページを確認して、

実際にInstagramの投稿が表示されているか確認してください。

アプリでShopifyへInstagramフィードを埋め込む方法

次は、アプリを使ってShopifyへInstagramフィードを埋め込む方法を紹介します。

Shopifyページに直接埋め込む方法がわかりにくいなら、アプリの活用がおすすめです。

どのように埋め込むのか、順を追って紹介します。

Instafeed Instagram Feedをインストール

ShopifyページにInstagramフィードを埋め込むアプリをインストールしましょう。

使用するアプリは、「Instafeed Instagram Feed」です。

Instafeed Instagram Feedのアプリは、3つの料金タイプがあります。

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

シンプルにInstagramフィードの埋め込みだけなら、無料プランで十分です。

無料プランでは、動画のアップロード、無制限のカスタマイズ、

グリッドやスライダーのレイアウト、PopupやInstagramへのリンクを貼ることができます。

有料プランの月額3.99ドルプランでは、「いいね」を表示できます。

商品タグ付けや、最大3つの違うフィードの表示、

モバイル表示段数と表示数をカスタマイズしたい場合におすすめです。

月額19.99ドルプランでは、フィード数が無制限です。

ハッシュタグによるフィルターも使えるようになります。

機能を追加したい場合は、有料プランに申し込みましょう。

Instagramと連携させる

アプリのページに移動したら、「アプリを追加する」ボタンをクリック。

インストールが完了したら、アプリの初期設定をしていきます。

次は、「Connect an Instagram Account」ボタンをクリック、

Instagramを連携させましょう。

Instagramのログイン画面が表示されるので、

ログインIDとパスワードを入力してログインしてください。

すると、「Mintt Studioが以下の認証を求めています」表示が出てきます。

承認をクリックして、連携させてください。

連携が済むと、アプリ管理画面の右側にInstagram投稿が表示されます。

投稿表示の設定をする

Shopifyとアプリの連携が済んだら、Instagram投稿表示の設定をします。

設定では、右側にプレビューが表示されるので、見ながら設定を変えられます。

左側には5つの項目が表示されていますが、好みの設定へと変更しましょう。

「FEED TITLE」は、インスタフィードのタイトル部分です。

空欄でも構いませんが、任意のタイトルを表示したい場合は入力してください。

タイトル名は、「Instagram」などです。

「IMAGE SPACING」は、画像と画像のスペースの設定です。

0%・1%・2%・5%・10%の中から好みの設定を選びます。

数字が増えるに従い、画像と画像との間にスペースが生まれます。

「ON IMAGE CLICK」は、画像をクリックした際の動作設定です。

ポップアップでの表示、Instagramでの表示、何も開かないの3つの設定から選びます。

一般的には、「Open Instagram」を選びポップアップ表示させる方法がおすすめです。

次に「NUMBER OF ROWS」「NUMBER OF COLUMNS」で、

投稿の行数と列数を設定してください。

前者は行数で、後者は列数です。

「LAYOUT」は画像を列で表示するか、スライダーにするかの設定です。

列で表示する場合は「Grid」、スライダー表示にするときは「Slider」を選択。

全ての設定が終了したら、「Save」をクリックして保存してください。

保存することでプレビューに設定が反映されるので、表示を確認しながら調節します。

サイトに表示させる

アプリの設定が済んだら、ShopifyショップページにInstagramフィードを表示させます。

Shopifyの管理画面に移動し、オンラインストアからテーマを選びましょう。

カスタマイズから、「セクションを追加する」をクリック。

「Instafeed App」を選択し追加してください。

これでShopifyショップページにInstagramフィードが表示されました。

セクションの右側にある6つの点は、ドラッグで表示設定が変えられます。

また、「Instafeed App」からも表示設定が変えられるので、好みの表示に変更します。

さらに「Custom Code(optional)」では、HTML記述ができます。

また、CSSの設定は、さらに見た目を調節したいときにおすすめです。

最後に、希望の表示になっているか確認して終了です。

Shopifyの管理画面から、オンラインストアを選び、プレビューで確認できます。

ShopifyへInstagram埋め込みをしよう

ShopifyショップのフロントページにInstagramを表示させる方法を紹介しました。

シンプルに埋め込みたい場合は最初に紹介した方法、

カスタマイズが必要なときはアプリを使ってみてください。

Instagramフィードを表示させると、ショップがInstagram投稿をしていると、

お客様がわかります。

お客様はショップからInstagram投稿へと移動できるため便利でしょう。

Instagramを通してコミュニケーションを取りたいユーザーは、

ショップからInstagramページに移動してくれるはずです。

物販を実践して結果を出されている方で、丁寧に教えてくれる方をご紹介していますので、

下の記事ぜひ読んでください。