StudioにInstagramを埋め込む方法｜投稿1件とフィード表示の手順・表示されない時の対処

StudioにInstagramを載せる方法は2つです。投稿を1件だけ見せるならInstagramの公式埋め込み、最新の投稿を自動で並べるなら外部のフィードウィジェットを使います。どちらも、取得したコードをStudioのHTML埋め込みボックスに貼るだけで表示できます。ところが実際には「どちらを使えばいいか分からない」「プレビューで出てこない」「スマホで崩れる」と手が止まりがちです。この記事では、2つのルートの選び方と手順、表示されないときの対処を順に解説します。

結論・全体像：目的で「単体投稿」か「フィード」を選ぶ

まず結論として、Instagramの埋め込みは目的に応じて2つのルートを使い分けます。

1つ目は「単体投稿の埋め込み」です。特定の投稿を1件だけページに載せたいときに使います。Instagramの各投稿には公式の埋め込み機能があり、投稿ごとに埋め込みコードを取得できます。2つ目は「フィードの埋め込み」で、アカウントの複数投稿をタイル状・スライド状に自動で並べて表示したいときに使います。フィード表示は標準の単体埋め込みだけでは難しいため、フィード表示に対応した外部のウィジェットサービスを利用するのが一般的です。

2つの違いを表にまとめます。

	単体投稿の埋め込み	フィードの埋め込み
載せられるもの	選んだ投稿1件	アカウントの複数投稿
コードの取得元	Instagram（公式の埋め込み機能）	外部のウィジェットサービス
新しい投稿の反映	されない（載せた投稿で固定）	自動で反映される
Studioでの作業	HTML埋め込みボックスに貼る	HTML埋め込みボックスに貼る
向いている場面	キャンペーン告知・実績紹介	トップページで更新感を出す

なぜ分けて考えるかというと、取得するコードの出どころが違うからです。一方で、Studioへの貼り付けはどちらも「取得したコードをHTML埋め込みボックスに貼る」という同じ流れです。この共通点を押さえておくと、どちらのルートでも迷いません。

たとえば、キャンペーン投稿を1件だけ紹介したいなら単体埋め込み、トップページに「最新の投稿一覧」を出して更新感を演出したいならフィード、という選び方になります。ノーコードサロンの制作現場でも、店舗やブランドサイトではフィード表示、キャンペーン告知では単体埋め込み、と用途で使い分けるのが定番です。埋め込みの基本的な考え方はStudioで使える外部連携（Apps）まとめでも整理しているので、あわせて確認すると全体像がつかめます。

手順：2つのルート別に埋め込む

ルートごとに手順を見ていきます。

ルート1：単体投稿を公式の埋め込みで載せる

特定の投稿を1件載せたい場合は、Instagram側の埋め込み機能を使います。次の順に進めます。

1. ブラウザでInstagramを開き、載せたい投稿を表示する
2. 投稿のメニューから「埋め込み」を選び、表示された埋め込み用のHTMLコードをコピーする
3. Studioの編集画面で、投稿を表示したい位置にHTML埋め込みボックスを配置する
4. コピーしたコードをボックスに貼り付ける
5. サイトを公開し、公開URLで投稿が表示されるか確認する

手順の骨格はYouTube動画の埋め込み方法やGoogleマップの埋め込み方法と同じです。「外部サービスでコード取得 → Studioのボックスに貼る」という共通パターンで進められます。

単体埋め込みは、キャンペーンや実績紹介など「この1件を見せたい」という場面に向いています。反面、投稿が増えても自動では更新されず、載せた投稿が固定される点は理解しておきましょう。

ルート2：フィード（複数投稿）を外部ウィジェットで載せる

「最新の投稿を自動で複数並べたい」場合は、フィード表示に対応した外部のウィジェットサービスを利用します。流れは次のとおりです。

1. フィード表示に対応したウィジェットサービスで、表示したいInstagramアカウントを設定する
2. レイアウト（グリッド・スライドなど）と表示件数を決める
3. 発行された埋め込みコード（スクリプトやiframe）をコピーする
4. StudioのHTML埋め込みボックスに貼り付け、公開URLで表示を確認する

フィードは新しい投稿が自動で反映されるため、更新のたびにサイトを触る必要がなく、運用が楽になるのが利点です。ただし条件はサービスごとに異なります。導入前に、次の点を各サービスの公式ページで確認しておきましょう。

• 料金と、無料で使える範囲（表示件数・表示回数の上限など）
• 連携できるInstagramアカウントの条件
• サービス名のクレジット表示が入るかどうか
• 利用規約（商用サイトやクライアント案件で使えるか）

クライアントのサイトに入れる場合は、アカウント連携を誰の名義で行うかも先に決めておくと、納品後の管理で困りません。

共通：貼り付け後のサイズ・レスポンシブ調整

どちらのルートでも、貼り付けた直後はスマホで見切れたり余白が不自然になったりすることがあります。埋め込みボックスの幅を親要素に合わせ、高さや余白を整えて、PC・タブレット・スマホの各表示で崩れないか確認します。崩れる場合はレスポンシブが崩れる原因と直し方が参考になります。

つまずき・よくある失敗と対処

Instagram埋め込みでよくある失敗と対処を、症状ごとにまとめます。

症状	よくある原因	対処
プレビューでは表示されない	外部スクリプトの読み込みが必要な埋め込みのため	公開して、実際のページで確認する
方法を探して遠回りしている	単体とフィードのルートを取り違えている	「1件だけか、自動で並べるか」で先にルートを決める
スマホで崩れる・はみ出す	固定幅のまま貼っている	ボックスの幅を100%にし、各ブレイクポイントで確認する
公開後も表示されない	投稿やアカウントが公開状態でない／コードの一部が欠けている	表示元の公開設定を確認し、コードを最初から最後まで貼り直す
読み込みが遅い・重い	外部ウィジェットの読み込み負荷	表示件数を絞り、必要なページだけに置く

とくに多いのが、プレビューで出ないのを「失敗した」と思い込み、コードを何度も貼り直してしまうケースです。まず公開URLで確認してから、原因を切り分けましょう。Instagramのフィードは、お問い合わせや予約への導線とセットで置くと、見た人が次の行動に移りやすくなります。

よくある質問

Q1投稿を1件だけ載せたい場合と、複数並べたい場合で方法は違いますか？

はい、違います。1件だけ載せたい場合は、Instagram側の公式の「埋め込み」機能で投稿ごとのコードを取得します。複数の投稿を自動で並べたい（フィード表示）場合は、フィード表示に対応した外部ウィジェットサービスでコードを取得します。どちらも取得したコードをStudioのHTML埋め込みボックスに貼る流れは同じです。目的で先にルートを選ぶと迷いません。

Q2埋め込んだInstagramがStudioのプレビューで表示されません。故障ですか？

多くの場合は故障ではありません。SNSの埋め込みは外部スクリプトの読み込みを伴うため、プレビュー環境では正しく描画されず、公開後のURLで初めて表示されることがあります。まずは公開して実際のページで確認してください。それでも表示されない場合は、コードの貼り間違いや、投稿・アカウントの公開設定を確認します。

Q3Instagramのフィードを埋め込むと自動で最新投稿に更新されますか？

フィード表示に対応した外部ウィジェットを使う場合は、新しい投稿が自動で反映されるのが一般的です。一方、公式の単体埋め込みは載せた投稿が固定され、自動では増えません。「常に最新を見せたい」ならフィード、「特定の1件を見せたい」なら単体埋め込み、と使い分けてください。外部サービスの仕様や更新頻度は各社で異なるため、導入前に確認しましょう。

Q4埋め込まずに、Instagramへのリンクボタンを置くだけでもよいですか？

目的によっては十分です。サイトで投稿の中身まで見せる必要がなく、アカウントの存在を知らせたいだけなら、リンクボタンのほうが軽く、表示崩れの心配もありません。投稿の写真でお店や作品の雰囲気を伝えたい場合は、埋め込みを選ぶとよいでしょう。

まとめ

StudioへのInstagram埋め込みは、目的に応じて「単体投稿の公式埋め込み」と「複数投稿を並べるフィード（外部ウィジェット）」の2ルートを使い分けるのがポイントです。取得元は違っても、Studioでは「コードをHTML埋め込みボックスに貼る」という共通の流れで対応できます。貼った後は、公開URLとスマホ表示まで確認して整えましょう。更新感を出したいならフィード、特定投稿を見せたいなら単体、と選べば失敗しにくくなります。

ノーコードサロンは、150名以上が参加するノーコードコミュニティです。Studioでのサイト制作に加えてAIの活用も学べ、勉強会やウェビナーも開いています。埋め込みのような細かい実装で手が止まったときに、ひとりで抱え込まずに進められる場所として活用してください。