STORESのネットショップにInstagramの投稿は埋め込める?結論と代わりの方法

結論: STORES のネットショップには埋め込めない

投稿一覧を自動で表示するツールの多くは、HTML のタグ(script タグなど)をページに貼って使います。STORES のネットショップには、その場所がありません。公式 FAQ の記述は次のとおりです。

テンプレートと決められたパーツを組み合わせる仕組みで、HTML を書き足す欄はありません。公式 FAQ にプランごとの例外も書かれていません。

ただし、STORES には Instagram へ誘導する機能や、Instagram から商品ページへ誘導する機能があります。自社サイトに投稿一覧を出してショップとつなぐ方法もあります。順に説明します。

STORES のデザイン機能でできること

公式 FAQ によると、主に次の項目を編集できます。どれも画像や文字、URL を入れる欄で、タグを貼る欄ではありません。

方法1. SNSリンクで Instagram のアカウントへ誘導する

いちばん手軽なのが SNSリンクです。ショップに Instagram のアイコンが出て、押すとアカウントが開きます。投稿はショップに出ませんが、設定は数分です。公式 FAQ「ABOUTページの編集方法(プロフィール・ストア説明・SNSリンク)」の手順は、管理画面の見た目によって2通りあります。

1. ホーム画面中央にサービス名が表示されている場合: STORES Web管理画面(ダッシュボード)にログインし、[ネットショップ]タブ → [サイト設定] → 「Aboutページ」欄の[設定]を開いて、SNSリンクを編集して保存します。
2. 画面左側にメニューが表示されている場合: [サイト]タブ → [ネットショップ] → [コンテンツ] → [SNSリンク] から編集して保存します。

方法2. バナーやギャラリーに画像を置いて Instagram へリンクする

バナーパーツとギャラリーパーツは、画像にリンクを設定できます。たとえば Instagram の雰囲気が伝わる写真をバナーにして、Instagram のアカウントや特定の投稿の URL をリンク先にすれば、「Instagram で最新情報を発信中」といった入口をトップページに作れます。

1. ストアデザインを開き、画面右下の[パーツ編集]をクリックします(左メニューの管理画面では [サイト] → [ネットショップ] → [デザイン] → [設定] から開きます)。
2. 置きたい場所で吹き出しの[+]を押し、[バナー]か[ギャラリー]を選んで[EDIT]をクリックします。
3. 画像をアップロードし、画像の右上の[︙] → [リンクを設定]で URL を入力します。URL は https:// から入力します(公式 FAQ によると、省略すると保存されません)。
4. [編集を完了] → 画面右上の[デザインを保存]を押します。

公式 FAQ の推奨サイズは、バナーが1枚表示で横1880px×縦180px、ギャラリーが横940px×縦400px です。

弱点は自動で更新されないことで、新しい投稿を見せたいときはそのつど画像を差し替えます。公式 FAQ によると、デザインの反映に3時間ほどかかる場合があります。使う写真は自分で撮ったものか、使う許可を得たものにしてください。お客様の投稿を使う場合の考え方は<a href="/function/widget/column/instagram-photos-copyright">Instagramの写真を自社サイトに載せるときの著作権・肖像権</a>で整理しています。

方法3. Instagram販売連携で、投稿から商品ページへ誘導する

逆に、Instagram の投稿からショップへ来てもらう方法です。「Instagram販売連携」は、ショップの商品を Instagram の投稿にタグ付けできる機能です。公式 FAQ によると、プランを問わず無料で使えます。

1. STORES の管理画面で設定を始め、Facebook 側でビジネスマネージャーやカタログなどを設定します。
2. Instagram をプロアカウントにして Facebookページに紐付け、ドメイン認証などを進めます。
3. Instagram の審査(公式 FAQ では1週間程度)が終わると、投稿に商品をタグ付けできます。

細かな手順は公式 FAQ「Instagram販売連携の設定方法を教えてください」に画面つきで載っています。プロアカウントの切り替え方は<a href="/function/widget/column/instagram-professional-account">サイトにインスタを載せるにはプロアカウントが必要</a>でも説明しています。

方法4. 別のサイトに投稿一覧を作って、ショップとつなぐ

どうしても「Instagram の最新投稿が自動で並ぶページ」を用意したい場合は、HTML を貼れる自社サイト(コーポレートサイトやブランドサイト)に投稿一覧を出し、ショップと相互にリンクします。STORES の公式 FAQ も、フリーページの代わりに「外部サイトでページを作成し、ストアにリンクを設定する」ことを案内しています。

たとえば次のような組み合わせです。

STORES BUTTON は、HTML を編集できる外部サイトに商品ごとの購入ボタンを置ける STORES の機能です。公式 FAQ によると、定期便や予約販売のアイテムなど一部では使えません。投稿一覧の近くに置けば、写真を見て気になった人がそのまま買える導線になります。

サイト作成サービスごとのタグの貼り方は、次の記事で説明しています。

1. WordPressにInstagramの投稿を表示する方法
2. STUDIOにInstagramの投稿一覧を埋め込む方法
3. ペライチにInstagramの投稿一覧を埋め込む方法と、使えるプラン
4. WixにInstagramの投稿一覧を表示する方法

サービスによってはタグを貼れるプランが限られます。条件は各記事にまとめています。

4つの方法の比べ方

ショップだけで運営しているなら、方法1と方法3から始めるのが現実的です。自社サイトがある、またはこれから作るなら、方法4で投稿一覧をそちらに出し、ショップのメニューからリンクします。

方法4で Social Feed by grip space を使う場合

Social Feed by grip space は、管理画面で表示形式(グリッドかスライダー)や列数を決め、発行された script タグを1行、自社サイトに貼って使います。連携できるのは Instagram のプロアカウント(ビジネスかクリエイター)で、表示できるのは連携した自分のアカウントの投稿です。

フリープランは0円で、ウィジェット1つ、月3,000回の表示、16件までの投稿を使えます。新しい投稿のサイトへの反映は1日1回で、「Powered by Social Feed」の表記が入ります。ライトプランは月額1,200円(税込)で、新しい投稿がすぐ反映されます。詳しくは料金表とフリープランでできること・できないことをご覧ください。登録はメールアドレスとパスワードだけで、こちらから無料で始められます。

よくある質問

Q. 有料のスタンダードプランにすれば HTML を編集できますか。
A. 公式 FAQ の「HTML・CSSによるカスタマイズには対応していません」という記述に、プランによる例外は書かれていません。公式 FAQ「フリープラン・スタンダードプランの概要」でも、プランで変わるのは料金や決済手数料などで、HTML の編集ができるようになるという案内は見当たりませんでした。

Q. 動画パーツに Instagram のリールの URL を入れられますか。
A. 公式 FAQ で対応している URL の形式は YouTube と Vimeo だけです。リールをショップに載せたい場合は、同じ動画を YouTube などにもアップロードして、その URL を使う方法があります(動画は権利を持っているものか、許可を得たものに限ります)。

Q. ニュースやコラムの本文に埋め込みコードを書けますか。
A. 公式 FAQ では、ニュースはカバー写真・公開日・タイトル・本文・掲載アイテムを入力する機能として、コラムは文章(または文章と画像)を入れるパーツとして説明されています。HTML や埋め込みコードを入れられるという記載はありません。

Q. Instagram の公式の埋め込み(投稿1件ごとの埋め込みコード)なら使えますか。
A. 公式の埋め込みコードも HTML のタグなので、貼る場所がない点は同じです。ホームページに Instagram を載せる方法の違いはホームページにInstagramを表示する3つの方法で比べています。

Instagram の投稿をサイトに埋め込む全体の流れはInstagramの投稿を自社サイトに埋め込む方法、製品の紹介はSocial Feed by grip spaceをご覧ください。

参考にした資料

STORES FAQ「ストアの見た目やレイアウトを変更するにはどうすればいいですか?」 https://faq.stores.jp/hc/ja/articles/28157558945945
STORES FAQ「フリーページの作成はできますか?」 https://faq.stores.jp/hc/ja/articles/28157518748057
STORES FAQ「メニュー/レイアウトでは何が設定できますか?」 https://faq.stores.jp/hc/ja/articles/28157544130457
STORES FAQ「メニューバー(HOME・ABOUTなど)を編集するにはどうすればいいですか?」 https://faq.stores.jp/hc/ja/articles/28157518687129
STORES FAQ「パーツ編集とは何ですか?」 https://faq.stores.jp/hc/ja/articles/28159476255641
STORES FAQ「バナーパーツとは何ですか?」 https://faq.stores.jp/hc/ja/articles/28159460682137
STORES FAQ「ギャラリーパーツとは何ですか?」 https://faq.stores.jp/hc/ja/articles/28159414966041
STORES FAQ「コラムパーツとは何ですか?」 https://faq.stores.jp/hc/ja/articles/28159476492825
STORES FAQ「トップページに動画を掲載することは可能ですか?」 https://faq.stores.jp/hc/ja/articles/28159475932825
STORES FAQ「ABOUTページの編集方法(プロフィール・ストア説明・SNSリンク)」 https://faq.stores.jp/hc/ja/articles/28059425612569
STORES FAQ「ネットショップのサイト設定とはなんですか?」 https://faq.stores.jp/hc/ja/articles/59086691541017
STORES FAQ「ニュース機能とはなんですか?」 https://faq.stores.jp/hc/ja/articles/28170238187673
STORES FAQ「どのような広告のコンバージョンを計測できますか?」 https://faq.stores.jp/hc/ja/articles/28208688927257
STORES FAQ「Instagramの画像をアイテム画像に登録するにはどうすればいいですか?」 https://faq.stores.jp/hc/ja/articles/28187809528857
STORES FAQ「Instagram販売連携とは何ですか?」 https://faq.stores.jp/hc/ja/articles/28186980695833
STORES FAQ「Instagram販売連携の設定方法を教えてください」 https://faq.stores.jp/hc/ja/articles/28186980986265
STORES FAQ「フリープラン・スタンダードプランの概要」 https://faq.stores.jp/hc/ja/articles/52834710423449
STORES FAQ「ボタン機能とは何ですか?」 https://faq.stores.jp/hc/ja/articles/28286812020505