Instagram埋め込みコード生成ツールは、投稿やリールのURLを貼り付けるだけで、Instagram公式形式の埋め込みコードを作成できる無料ツールです。キャプションの有無・最大幅・配置を選んで生成し、プレビューで表示を確認したうえで、WordPressのカスタムHTMLブロックに貼り付ければ完了します。この記事では、ツールの使い方を4ステップで説明し、WordPressで自動埋め込みが使えない理由、公式形式とiframe形式の使い分け、表示されないときの対処まで、Web制作会社の実務目線でまとめます。

ツールはこちらからお使いいただけます：Instagram埋め込みコード生成ツール

Instagram埋め込みコード生成ツールとは

Instagramの投稿をWebサイトに表示するには、Instagramが公式に用意している「埋め込み」の仕組みを使います。本ツールは、その公式コードをURLから組み立てるものです。Instagramの非公式な仕組みは一切使っていません。

できること一覧

Instagramの「埋め込み」メニューとの違い

InstagramをPCブラウザで開き、投稿の「…」から「埋め込み」を選んでもコードは取得できます。ただし1件ずつしか取れず、幅の指定もできません。本ツールは複数の投稿をまとめて生成でき、幅や配置をあらかじめ指定できるうえ、WordPressへの貼り方まで同じ画面で確認できます。スマホのアプリには埋め込みメニュー自体がないため、スマホで「リンクをコピー」したURLをそのまま貼れる点も便利です。

入力したURLは当社のサーバーに送りません

コードの組み立ては、お使いのブラウザの中だけで行われます。当社のサーバーがURLを受け取ることはありません。プレビューを表示するときだけ、Instagram公式のスクリプト（embed.js）がInstagramのサーバーから投稿を読み込みます。これは、生成したコードを自分のサイトに貼ったときと同じ動きです。

使い方｜4ステップで埋め込みコードを作る

操作はURLの取得、貼り付け、設定、生成の4ステップです。慣れれば1分かかりません。

ステップ1｜投稿のURLをコピーする

スマホのアプリでは、投稿右上の「…」をタップし「リンクをコピー」を選びます。リールは画面右側の「…」から同じ操作です。PCブラウザでは、投稿を開いたときのアドレスバーのURLをそのままコピーしてください。末尾に「?utm_source=…」のようなパラメータが付いていても問題ありません。ツール側で取り除きます。

ステップ2｜入力欄に貼り付ける（複数は1行に1つ）

ツールの入力欄にURLを貼り付けます。複数の投稿を埋め込みたい場合は、改行して1行に1つずつ入れてください。一度に扱えるのは10件までです。同じURLが2回入っていても1件にまとめられます。

ステップ3｜キャプション・最大幅・配置を選ぶ

「キャプションを含める」をオンにすると、投稿の本文が画像の下に表示されます。最大幅は326〜658pxの範囲で指定でき、初期値の540pxはInstagram公式の標準幅です。配置はブログ本文なら中央、テキストの横に置くレイアウトなら左寄せが向いています。

ステップ4｜「埋め込みコードを作成」を押してコピーする

ボタンを押すと、コードとプレビューが表示されます。「コピー」ボタンでクリップボードに入るので、そのままサイトに貼り付けてください。設定を変えると、コードとプレビューは自動で作り直されます。

プレビューで確認できること

プレビューは「コードが正しいか」だけでなく、「その投稿がそもそも埋め込めるか」を確かめる役目があります。ここで表示されれば、サイトに貼っても表示されます。

表示されれば公開アカウントの投稿

Instagramの埋め込みは、公開アカウントの投稿にしか対応していません。プレビューに投稿者名・画像・いいね数が表示されれば、公開投稿として埋め込める状態です。投稿者が後からアカウントを非公開にすると、埋め込み先でも表示が消えます。

表示されないときの原因4つ

• 非公開アカウントの投稿（投稿者のフォロワーにしか見えない）
• 投稿が削除されている、またはURLの一部が欠けている
• 広告ブロッカーやブラウザのトラッキング防止機能が、Instagramのスクリプトを止めている
• 社内ネットワークなどでInstagramへの接続が制限されている

1つ目と2つ目はコードを貼っても表示されないので、別の投稿を選ぶか、投稿者に公開設定を確認してください。3つ目と4つ目は閲覧者側の環境によるもので、コード自体は正しく動いています。

WordPressへの貼り方

WordPressでは「カスタムHTML」ブロックに貼るのが正解です。段落ブロックに貼るとコードが文字として表示されてしまいます。

ステップ1｜「カスタムHTML」ブロックを追加する

投稿または固定ページの編集画面で「＋」をクリックし、検索欄に「HTML」と入力すると「カスタムHTML」が出てきます。埋め込みたい位置に追加してください。

ステップ2｜コードを貼り付ける

ツールでコピーしたコードを、ブロックの中にそのまま貼り付けます。改行や空白を編集する必要はありません。ブロックの「プレビュー」タブに切り替えると、編集画面上でも表示を確認できます。

ステップ3｜プレビューで確認して公開する

右上の「プレビュー」で実際のページを開き、投稿が表示されていれば公開してください。表示幅がテーマの本文幅より広い場合は、ツール側で最大幅を小さくして作り直すときれいに収まります。

URLを貼るだけの自動埋め込みが使えない理由

以前のWordPressは、段落ブロックにInstagramのURLを貼るだけで自動的に埋め込み表示に変換されました（oEmbedという仕組みです）。しかし2020年10月、Meta社が認証なしのoEmbedを廃止したことを受け、WordPress 5.5.2でInstagramとFacebookの自動埋め込みが本体から削除されました。それ以降、URLを貼ってもリンク文字が表示されるだけになっています。現在は、埋め込みコードをカスタムHTMLに貼るか、Instagram連携プラグインを使うかの二択です。

複数の投稿を同じページに置くときのスクリプト行

公式形式のコードは、最後の1行でInstagramのスクリプト（embed.js）を読み込みます。同じページに投稿を複数置く場合、この行は1つあれば十分です。ツールで複数のURLをまとめて生成すると、スクリプト行は自動的に1つにまとめられます。別々に生成したコードを後から並べる場合は、2つ目以降のスクリプト行を消しても、残しても動作に問題はありません。

「公式」と「iframe」どちらを使うか

迷ったら公式形式です。iframe形式は、外部スクリプトを読み込めない環境のための逃げ道と考えてください。

公式形式の仕組みと利点

公式形式は、blockquoteタグに投稿URLを持たせ、Instagramのスクリプトがそれを検出して表示に置き換える仕組みです。投稿の高さはキャプションの長さに合わせて自動調整され、スマホでも幅に応じて縮みます。Instagram側の仕様変更にも、スクリプトが追従してくれます。

iframe形式が向いている場面

メール配信ツールや一部のCMSのように、外部スクリプトの読み込みを禁止している環境では公式形式が動きません。その場合は、Instagramの埋め込み用ページをiframeで直接表示するiframe形式を使います。高さが自動調整されないため、キャプションの長さによっては下が切れたり余白が出たりします。

iframeの高さを調整する目安

ツールの初期値はキャプションなしで660px、ありで840pxです。実際に貼ってから、下が切れていれば数値を増やし、余白が大きければ減らしてください。

対応しているURLと対応していないURL

ユーザー名入りの新しいURL形式にも対応

最近のInstagramは、投稿URLに「instagram.com/ユーザー名/p/投稿ID/」のようにユーザー名を含む形式を使うことがあります。ツールはこの形式も読み取り、埋め込みに必要な部分だけを取り出します。

プロフィールやストーリーズを載せたいときの代替案

プロフィール全体を埋め込む公式の仕組みはありません。代わりに、最新の投稿を数件埋め込んだうえで「Instagramをフォロー」のリンクボタンをプロフィールURLへ向けるのが定番です。ストーリーズは埋め込めないので、ハイライトに残した内容を通常投稿にもしておくと、サイトに載せられます。

埋め込むときの注意点（制作会社の視点）

投稿の削除・非公開でその場所が空白になる

埋め込みは投稿の「参照」であって、画像のコピーではありません。投稿者が削除したり非公開にしたりすると、埋め込んだ場所は空白になります。トップページのメインビジュアルのように重要な場所では、埋め込みに頼りきらず、許諾を得た画像を自前で置く構成のほうが安定します。

表示速度への影響

公式形式はInstagramのスクリプトと投稿データを外部から読み込むため、埋め込みが多いページは表示が遅くなります。1ページに置くのは3〜6件程度に抑え、それ以上並べたい場合は「もっと見る」でInstagramへ誘導するか、連携プラグインでキャッシュを効かせる構成を検討してください。

第三者の投稿は許諾を取る

埋め込みは技術的には転載ではありませんが、投稿者の意図しない文脈で使われれば苦情につながります。当社では、お客様のサイトにお客様以外の投稿を載せる場合、埋め込みであっても投稿者に許諾を取るようにしています。「掲載場所」「掲載期間」「クレジット表記」「削除依頼への対応」の4点を文面で残しておくと、後々のトラブルを防げます。著作権法や利用規約との関係は、Instagramの画像・動画を保存する方法の記事で詳しく整理しています。

よくある質問（FAQ）

埋め込みは無料で使えますか？

使えます。Instagramの埋め込み機能も、本ツールも無料です。会員登録やAPIキーの取得も必要ありません。

スマホで見ると幅がはみ出します

公式形式は「width:calc(100% – 2px)」で画面幅に合わせて縮むため、通常ははみ出しません。はみ出す場合は、貼り付けた場所の親要素に固定幅が指定されている可能性があります。テーマのCSSで本文幅を確認してください。

自分の投稿なら埋め込みではなく画像を直接置いてもいいですか？

自分の投稿なら著作権は自分にあるので、画像を直接置いて問題ありません。表示速度や安定性の面では、直接置くほうが有利です。Instagramへの誘導を兼ねたい場合だけ埋め込みを選んでください。

埋め込んだ投稿の「いいね」は自分のサイトから押せますか？

埋め込み内のアイコンを押すとInstagramのページが開き、ログイン状態であればそこで操作できます。埋め込みの中だけで完結はしません。

投稿を新着順に自動で並べることはできますか？

本ツールは指定した投稿を固定で埋め込むものです。新着を自動で表示したい場合は、Instagram連携プラグイン（Instagram Graph APIで自分のアカウントの投稿を取得するもの）を使ってください。

WordPress以外のサイトでも使えますか？

使えます。HTMLを直接編集できるサイトなら、コードを貼り付ける場所が違うだけで手順は同じです。STUDIOやWixなどのノーコードツールは「埋め込み」や「HTMLコード」の部品にコードを入れてください。

まとめ｜公式形式で作り、カスタムHTMLに貼る

Instagramの投稿をサイトに載せるなら、公式形式の埋め込みコードを使い、WordPressではカスタムHTMLブロックに貼るのが基本です。本ツールを使えば、URLを貼るだけで複数の投稿ぶんのコードがまとまり、プレビューで公開投稿かどうかも確認できます。第三者の投稿を載せるときは許諾を取り、重要な場所では自前の画像を優先する。この運用を守れば、Instagramの素材を安心してサイトに組み込めます。

ツールはこちら：Instagram埋め込みコード生成ツール。写真をInstagram用のサイズに整えたいときはInstagram画像リサイズ・トリミングツール、自分の投稿をまとめて取り出したいときはInstagram投稿の一括エクスポート手順ガイドもあわせてご利用ください。Instagramの投稿を組み込んだサイト制作のご相談は、スリーディープラスまでお気軽にお問い合わせください。