noteやブログの記事で、自分のInstagramの投稿を紹介したい。でも、スクリーンショットを貼ると画質が落ちるし、画像を保存して載せ直すのも手間がかかる。投稿のURLを貼ってみたけれど、リンクの文字が出るだけで、投稿の画像が表示されなかった。そんなふうに、つまずいたことはありませんか。
Instagramの投稿は、「埋め込み」を使うと、記事の中にそのままの見た目で表示できます。読者は記事を読みながら投稿の写真や動画を見られ、気に入ればそのままInstagramのアカウントをフォローしてくれることもあります。ただし、noteとWordPressでは埋め込みのやり方が違い、設定によっては表示されないこともあります。
この記事では、Instagramの投稿を埋め込む方法を、埋め込みコードの取得、noteでの手順、WordPressでの手順に分けて解説し、埋め込みが表示されないときの原因と対処法、埋め込みをオフにする設定、使うときの注意点までまとめます。
他人の投稿を紹介するときの著作権や、引用・転載との違いは、別の記事で詳しく解説しています。この記事では、埋め込みの具体的な手順に絞って説明します。
※この記事はプロモーションを含みます。
Instagramの投稿を埋め込む方法
まずは、埋め込みとは何か、どの投稿なら埋め込めるのかを確認したうえで、埋め込みコードの取得と、noteとWordPressでの手順を見ていきましょう。
Instagramの埋め込みとは？埋め込める投稿の条件
埋め込みは、Instagramの投稿を、元の投稿のまま記事の中に表示する仕組みです。画像を保存して載せ直すのとは違い、写真や動画、アカウント名、いいねの数などが、Instagram上の投稿と同じように表示されます。読者が投稿をタップすると、Instagramの元の投稿に移動できます。
Instagramの公式ヘルプInstagramの投稿を埋め込むによると、埋め込みコードを使ってブログや記事で紹介できるのは、公開アカウントの投稿やリールです。非公開アカウントの投稿は埋め込めません。
埋め込みコードの取得方法（パソコン）
埋め込みコードは、パソコンのブラウザでInstagramを開いて取得します。
- パソコンのブラウザでInstagramにログインし、埋め込みたい投稿を開く
- 投稿の右上にある「…」をクリックする
- 「埋め込み」を選ぶ
- キャプションも表示したい場合は「キャプションを含める」にチェックを入れる
- 「埋め込みコードをコピー」をクリックする
コピーした埋め込みコードは、HTMLのコードです。WordPressなどのブログでは、このコードを記事に貼り付けて使います。投稿のURLだけが必要な場合は、同じ「…」のメニューから「リンクをコピー」を選びます。
noteに埋め込む手順
noteでは、埋め込みコードではなく、投稿のURLを使います。noteの編集画面で、投稿を表示したい行にカーソルを置き、「＋」から「埋め込み」を選んで、Instagramの投稿のURLを貼り付け、「適用」をクリックします。空いた行に投稿のURLだけを貼り付けて改行しても、埋め込みとして表示されます。
貼り付けるのは、「https://www.instagram.com/p/」や「https://www.instagram.com/reel/」から始まる投稿のURLです。画像を右クリックしてコピーした画像のURLを貼ると、埋め込みにはならず、時間がたつと表示されなくなることもあるので注意しましょう。
WordPressに埋め込む手順
WordPressでは、2020年のバージョンアップで、Instagramの投稿のURLを貼るだけで自動的に埋め込む機能が外されました。Meta（旧Facebook）が、認証なしの埋め込みの仕組みを終了したためです。現在は、投稿のURLを貼ってもリンクの文字が表示されるだけなので、埋め込みコードを使います。
ブロックエディタでは「カスタムHTML」ブロックを追加し、コピーした埋め込みコードを貼り付けます。クラシックエディタでは、「テキスト」タブに切り替えてから貼り付けましょう。「ビジュアル」タブのまま貼ると、コードが文字として表示されてしまうことがあります。プレビューで、投稿が表示されているかを確認してから公開します。
| 比べる項目 | note | WordPress |
|---|---|---|
| 使うもの | 投稿のURL | 埋め込みコード（HTML） |
| 貼る場所 | 「＋」→「埋め込み」、または空いた行 | カスタムHTMLブロック、またはテキストタブ |
| URLだけを貼ると | 埋め込みとして表示される | リンクの文字が表示されるだけ |
| 確認すること | 公開後の表示 | プレビューと公開後の表示 |
WordPressブログの作り方がわかる本
WordPressの基本操作から、記事の書き方、画像や外部コンテンツの貼り方まで、ブログ運営を基本から学べる入門書。埋め込みなどの操作に慣れたいときに役立ちます。
埋め込みが表示されないときと、使うときの注意点
ここからは、埋め込みが表示されないときの原因と対処法、自分の投稿の埋め込みをオフにする設定、埋め込みを使うときの注意点を解説します。
埋め込みが表示されないときの原因と対処法
埋め込みが表示されないときは、投稿の側の原因と、記事の側の原因に分けて確認しましょう。
投稿の側の原因は、投稿が削除された、アカウントが非公開になった、投稿者が埋め込みをオフにした、の3つです。この場合は記事の側では直せないため、その投稿の紹介は見送り、記事から埋め込みを外しましょう。記事の側の原因には、埋め込みコードの一部が欠けている、WordPressで「ビジュアル」タブに貼った、サイトのセキュリティ設定がInstagramのスクリプトを止めている、といったものがあります。コードをコピーし直してカスタムHTMLに貼り直すと、解決することが多いです。
表示に時間がかかる・崩れるときの確認
埋め込みは、読者が記事を開いたときにInstagramから読み込まれるため、表示までに少し時間がかかることがあります。1つの記事にたくさんの投稿を埋め込むと、ページの表示が遅くなる原因になります。埋め込みは、記事の内容に必要なものだけに絞りましょう。
広告ブロックの機能や、ブラウザのプライバシー設定によっては、読者の環境で埋め込みが表示されないこともあります。大事な情報は埋め込みだけに頼らず、記事の本文でも文字で説明しておくと、どの環境でも内容が伝わります。
自分の投稿の埋め込みをオフにする設定
自分の投稿をほかのサイトに埋め込まれたくない場合は、設定で埋め込みをオフにできます。公式ヘルプの埋め込みをオフにするによると、公開アカウントなら、ブログやWebサイトが投稿やプロフィールを埋め込めるようにする設定をオフにできます。
オフにすると、それまでにほかのサイトに埋め込まれていた投稿も、表示されなくなります。自分のnoteやブログに投稿を埋め込んでいる場合は、そちらも表示されなくなるので、オフにする前に確認しておきましょう。
他人の投稿を埋め込むときの注意点
埋め込みは、元の投稿をInstagramから表示する仕組みのため、画像を保存して載せ直す「転載」とは違います。ただし、他人の投稿を記事で紹介するときは、紹介する理由を本文で示し、投稿者に失礼のない紹介のしかたを心がけましょう。気になる場合は、事前に投稿者に許可をとると安心です。
埋め込み・引用・転載の違いと、著作権の考え方は、次の記事で詳しく解説しています。
埋め込みを記事の導線に生かすコツ
自分の投稿を記事に埋め込むと、記事の読者をInstagramのアカウントへ案内できます。レシピの記事なら、作り方の動画のリールを手順の近くに埋め込むと、文字だけでは伝わりにくい手元の動きが伝わります。埋め込みの前後には、「作り方の流れはこちらのリールで見られます」のように、何が見られるのかを一言添えましょう。
Instagramの投稿をもとにnote記事を作る流れや、note記事からカルーセル投稿を作る方法は、次の記事で解説しています。
Instagramの投稿を埋め込むときのチェックリスト
- ☑ 公開アカウントの投稿を選んだ
- ☑ noteは投稿のURL、WordPressは埋め込みコードを使った
- ☑ 画像のURLではなく、投稿のURLを貼った
- ☑ WordPressでは、カスタムHTMLかテキストタブに貼った
- ☑ プレビューと公開後の表示を確認した
- ☑ 大事な情報は、本文でも文字で説明した
- ☑ 他人の投稿は、紹介する理由を示し、必要なら許可をとった
ブログとSNSの連携で読者を増やす方法がわかる本
ブログとInstagramなどのSNSを組み合わせて、読者を増やす考え方を学べる解説書。記事と投稿をつなぐ導線を見直したいときに役立ちます。
よくある質問
Instagramの投稿の埋め込みについて、よく聞かれる疑問にお答えします。
スマホのアプリから埋め込みコードを取得できますか？
埋め込みコードは、パソコンのブラウザでInstagramを開いて取得するのが確実です。noteに埋め込むだけなら、アプリの「リンクをコピー」で取得した投稿のURLを使えます。
リールも埋め込めますか？
公開アカウントのリールは、投稿と同じように埋め込めます。
埋め込んだ投稿の、いいねの数などは自動で変わりますか？
埋め込みは、表示するたびにInstagramから読み込まれるため、元の投稿の状態が反映されます。
非公開アカウントの投稿を埋め込む方法はありますか？
非公開アカウントの投稿は埋め込めません。紹介したい場合は、投稿者に許可をとったうえで、ほかの方法を相談しましょう。
埋め込みとスクリーンショットは、どちらを使えばいいですか？
他人の投稿を紹介するなら、元の投稿が表示される埋め込みを使いましょう。スクリーンショットを載せるのは、転載にあたるおそれがあります。
まとめ｜noteはURL、WordPressは埋め込みコードで
Instagramの埋め込みは、公開アカウントの投稿やリールを、元の投稿のまま記事に表示する仕組みです。埋め込みコードは、パソコンのブラウザで投稿の「…」から「埋め込み」を選んで取得します。noteでは投稿のURLを「＋」の「埋め込み」に貼り、WordPressではカスタムHTMLブロックに埋め込みコードを貼りましょう。
表示されないときは、投稿の削除・非公開・埋め込みのオフといった投稿の側の原因と、コードの貼り方やセキュリティ設定といった記事の側の原因を確認します。大事な情報は本文でも文字で説明し、他人の投稿は紹介する理由を示して使いましょう。
まずは、自分の投稿を1つ選び、noteかブログの記事に埋め込んで、表示を確認するところから始めてみてください。
この記事を書いた人
くらしノート編集部。Instagramで見つけた暮らしのアイデアを、noteとこのブログで記事にまとめています。レシピの記事では、作り方のリールを手順の近くに埋め込み、動きが伝わるようにしています。
コメント