BASEのショップにInstagramを表示するには｜HTML編集AppとHTMLタグ管理Appの違い

先に結論: BASEでできること・できないこと

無料のオフィシャルテーマのまま投稿一覧を出す方法は、2026年10月12日に確認したBASEヘルプセンターの範囲では見つかりませんでした。その場合の選択肢は後半で紹介します。

HTMLタグ管理 App: 入れられるのはhead内だけ

BASEヘルプセンターの「【HTMLタグ管理 App】タグの設定方法を教えてください」によると、HTMLタグ管理 Appは、GA4(Google アナリティクス 4)、Google タグ マネージャー、各種広告計測タグ、外部ツール連携などのHTMLタグを、HTML編集 Appを使わずに設定できるAppです。オフィシャルテーマ、有料テーマ、カスタムテーマのどれでも使えます。

一方で、同じページに「できないこと」として次の4つが明記されています。

1. headタグ以外に、タグを設置する
2. bodyタグ内を編集する
3. タグが反映される順番を指定する
4. カスタムタグを、カート画面やレジ画面に反映する

よくある質問でも、設置箇所は選べずhead内に反映されること、ページも選べずカート画面を除く全ページに反映されることが説明されています(どちらも今後アップデート予定、日程は未定)。

なぜhead内では投稿一覧が表示されないのか

head は、画面には出ない情報を書く場所です。Social Feed by grip spaceのタグは、iframeを使わず、タグが置かれた位置のすぐ後ろに投稿一覧を差し込む作りになっています。そのため、HTMLタグ管理 Appに登録すると、一覧はhead の中に作られてしまい、画面には何も出ません。

HTML編集 App: テーマのHTMLを直接編集できる

「【HTML編集 Appの使い方】について教えてください」によると、HTML編集 Appを使うと、HTML / CSS / JavaScript などを編集して、ショップページを自由にデザインできます。テーマのHTMLを直接書き換えるので、好きな位置にタグを置けます。

ただし、同じページの「注意事項(かならずご確認ください)」に、次の点が書かれています。

また「デザイナーズテーマで利用できない「BASE Apps」はありますか」では、HTML編集 Appのカスタムテーマでも「ページ追加 App」と「海外販売代行 App」は使えないとされています。今これらのAppを使っている場合は、カスタムテーマに切り替える前によく確認してください。

2つのAppは併用できます(「「HTML編集 App」と併用できますか」)。ただし同じタグを両方に入れると正常に機能しない可能性がある、と注意書きがあります。Social Feedのタグは、HTML編集 Appのテーマの中にだけ書いてください。

始める前に用意するもの

1. Instagramのプロアカウント(ビジネスまたはクリエイター)。Social Feedで連携できるのはプロアカウントだけです(切り替え方はこちら)。
2. Social Feed by grip spaceのアカウント。メールアドレスとパスワードだけで無料で登録できます。
3. PC。HTML編集 AppはPCからのみ使えます。
4. 今のテーマのバックアップ。BASE Templateのドキュメントには、編集前にバックアップを自分の環境に保存すること、元に戻す機能は無いこと、と書かれています。

手順1: Social Feedで埋め込みコードをコピーする

1. Social Feedの管理画面でInstagramアカウントを連携します。
2. 「＋ ウィジェットを追加」でウィジェットを作り、「表示設定」で表示形式(グリッドかスライダー)、列数、表示件数、余白などを決めます。
3. ウィジェットが「公開」になっていることを確認し、「WEBサイトにタグを設置」の欄の「コピー」を押します。

コピーされるのは script タグ1行です。URLはウィジェットごとに違うので、必ず管理画面からコピーしたものを使ってください。

<script type="text/javascript" src="https://（管理画面に表示されるURL）"></script>

手順2: HTML編集 Appでテーマを作る

1. BASE管理画面のApps一覧からHTML編集 Appをインストールします。
2. HTML編集 Appを開き、「＋テーマを作成する」を選びます。作成済みのテーマを続けて編集する場合は、一覧からテーマを選んで「< />」ボタンをクリックします。
3. 白紙のサンプルから作るなら「新規作成」、購入したデザイナーズテーマを使うなら「購入したテーマを元に新規作成」を選び、元にしたいテーマの横の「このテーマを元に作成」を選びます。
4. 編集用のエディタが開きます。

手順3: 表示したいページの位置にタグを貼る

BASE Templateでは、テーマが1つのHTMLで書かれていて、ページごとの出し分けは「ブロック」というテンプレートタグで行います。ドキュメントの「テンプレートタグ > ページ」には、たとえば次のブロックが載っています。

トップページだけに出したい場合は、トップページ用のブロックの中、一覧を出したい位置に次のように書きます。

{block:IndexPage}
<script type="text/javascript" src="https://（管理画面に表示されるURL）"></script>
{/block:IndexPage}

すでに {block:IndexPage} の範囲があるテーマなら、その中の適切な位置にタグを1行入れるだけで構いません。全ページに出したい場合は、ブロックで囲まずにフッター部分へ貼ります。

手順4: プレビューで確かめてから反映する

1. エディタの「プレビュー」ボタンをクリックすると、別タブでプレビュー画面が開きます。右上のボタンでPCとスマートフォンの表示を切り替えられます。
2. 「保存する」ボタンでテーマを保存します。現在使っているテーマを編集した場合は、そのままショップページに反映するかを選べます。
3. 新しく作ったテーマを使うときは、ショップデザイン機能の「テーマ」メニューの「カスタムテーマ」欄から作ったテーマを選び、「保存する」を押します。
4. 公開中のショップを新しいタブで開き、PCとスマートフォンで一覧が出ているか、投稿をクリックしたときの動きが思いどおりかを確認します。

プレビューの中で外部の script がどう扱われるかはヘルプに書かれていません。プレビューで出ない場合も、反映後のショップで確かめてください。

ページごとにウィジェットを分ける

Social Feedでは1つのInstagramアカウントから複数のウィジェットを作れます。トップページ用にはグリッド、商品ページ用には「#新作」を含む投稿だけのスライダー、と分けて、それぞれのブロックに別のタグを貼ることもできます。作れる数はフリープランが1つ、ライトプランが3つまで、スタンダードプランが無制限です。

Instagramのアプリ内ブラウザに関する注意

BASEヘルプセンターには「Instagramアプリ内ブラウザで、ショップが正しく表示されない場合の対処方法(HTML編集 App)」という記事があります。iOSのInstagramアプリでショップのリンクをタップしたときに、ショップページが正しく表示されない現象が確認されている、という内容です。影響を受ける可能性があるのは、HTML編集 Appの新規作成から作ったテーマで、最初から入っているFacebook SDKの記述を削除していないショップなどです。

暫定的な対処として、エディタで Facebook SDK を読み込む記述(sdk.js などで検索)とFacebookシェアボタンの記述をコメントアウトする方法が案内されています(シェアボタンは一時的に機能しなくなります)。新規作成でテーマを作るときは、一度確認しておくと安心です。

オフィシャルテーマのまま続けたい場合の選択肢

「デザインパーツの使い方について、教えてください」に載っているパーツは、タイトル、テキスト、ボタン、画像、動画、SNSバナー、SNSアイコンなどで、HTMLを自由に貼るパーツはありません。デザインパーツが使えるのは無料のオフィシャルテーマだけです。

1. SNSバナー / SNSアイコンでInstagramへ案内する。 「ショップ情報」で設定したSNSアカウントへのリンクを表示できます。事前にショップ情報でSNSを設定しておく必要があります。
2. 画像パーツや「画像とテキスト」パーツで、投稿の写真を手動で載せる。 画像にリンク先URLを設定できます。ただし自動では更新されず、写真の権利の確認も必要です(著作権・肖像権の注意点)。
3. 別にホームページを持っているなら、そちらに一覧を置く。 WordPressなど、script を貼れるサイトに一覧を出し、ショップへリンクする方法です(WordPressの場合の手順)。

表示されないときの確認点

BASEに限らない原因は「Instagramの埋め込みが表示されない原因と直し方」にもまとめています。

よくある質問

Q. HTML編集 Appを入れても、今のオフィシャルテーマに貼れますか?

貼れません。新規作成のサンプルか、購入したデザイナーズテーマを元にしたカスタムテーマを作る必要があります。HTML編集 Appの料金などは、BASEのApps一覧でご確認ください。

Q. HTML編集 Appをやめたら、貼ったタグは消えますか?

「HTML編集 Appで編集後にAppを無効にするとどうなりますか」には、無効にしても公開中のショップページには影響がない、とあります。アンインストールしても、公開中のデザインが自動で変わることはありません。

Q. 費用はいくらかかりますか?

Social Feedはフリープラン(0円、ウィジェット1つ、月3,000回まで、16件まで、反映は1日1回、表記あり)から始められます。有料はライトが月1,200円、スタンダードが月2,980円(いずれも税込)です。詳しくは料金プランをご覧ください。

まとめ

BASEのショップにInstagramの投稿一覧を表示するなら、使うのはHTML編集 Appです。HTMLタグ管理 Appはhead内専用なので、表示には使えません。HTML編集 Appは新規作成か購入したデザイナーズテーマを元にしたテーマでしか使えず、デザインパーツやページ追加 Appが使えなくなる点も含めて判断してください。Instagramウィジェットの紹介ページで見た目を確かめてから、無料登録で試せます。

参考にした資料

1. BASEヘルプセンター「【HTMLタグ管理 App】タグの設定方法を教えてください」
2. BASEヘルプセンター「ページ内で、タグの設置箇所は指定できますか」
3. BASEヘルプセンター「タグを設定するページは、選択できますか」
4. BASEヘルプセンター「タグの登録数に、上限はありますか(HTMLタグ管理 App)」
5. BASEヘルプセンター「「HTML編集 App」と併用できますか」
6. BASEヘルプセンター「【HTML編集 Appの使い方】について教えてください」
7. BASEヘルプセンター「HTML編集 Appで編集後にAppを無効にするとどうなりますか」
8. BASEヘルプセンター「デザイナーズテーマで利用できない「BASE Apps」はありますか」
9. BASEヘルプセンター「Instagramアプリ内ブラウザで、ショップが正しく表示されない場合の対処方法(HTML編集 App)」
10. BASEヘルプセンター「デザインパーツの使い方について、教えてください」
11. BASEヘルプセンター「デザインパーツが利用できません」
12. BASEヘルプセンター「【ショップデザイン機能の使い方】について教えてください」
13. BASE Developers「BASE Template はじめに」
14. BASE Developers「テンプレートタグ ページ」