当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【WordPress】Instagramの埋め込みができない時の対処法!コードを使う!

2024年2月5日WordPress

「Instagram」のアイコン画像

この記事では、ブログ投稿サービス「WordPress」のブロックエディターで、「Instagram」のURLを貼り付けても、「このコンテンツを埋め込めませんでした」と表示されて、埋め込み出来ない時の対処法について書きます。

「Instagram」の投稿右上にある三点ボタン→埋め込み→「埋め込みコードをコピー」を押して、カスタムHTMLに貼り付けます。

【WordPress】Instagramの埋め込みができない時の対処法!コードを使う!

僕はブログを書くのに「WordPress」のブロックエディターを利用しています。いつもにように記事を書いていると、「Instagram」の自身の投稿を記事に貼り付けたいと思いました。いわゆる埋め込みってやつです。

これまで「YouTube」と「X(旧Twitter)」は埋め込んだことがありますが、「Instagram」はやったことありませんでした。

他のSNSと同じように「Instagram」の投稿のURLをコピーして貼り付けたところ、「YouTube」はURLを貼り付けただけで埋め込んでくれたのに、「Instagram」は「このコンテンツを埋め込めませんでした」と表示されて失敗しました。「再試行」や「埋め込み」を押してもダメでした。

「WordPress」のブロックエディターに「YouTube」と「Instagram」のURLを貼りつけている画像

原因は、「Instagram」側が2020年10月24日以降、oEmbed(埋め込み)に関するAPIを廃止したためです。「WordPress」側の問題ではなく、「Instagram」がそういう仕様にしたから、何やってもできないってことなんですねぇ…。

Instagram リンクの埋め込みは、 Facebook 社が oEmbed エンドポイントを廃止する決定をしたことにより、2020年10月24日以降は動作しません。

Instagram – サポートフォーラム – WordPress.org 日本語

別の方法で埋め込むことができたので、忘れないように記事にします。「YouTubeやTwitterはできるのに、Instagramは埋め込めない!」という方、参考にしてみてください。プラグインなどは不要です。

そもそも「YouTube」などの他のSNSも埋め込めない場合は、別の原因がありそうです。本記事はPCブラウザでの解説です。スマホやタブレット向けではありません。

WordPressにInstagramの投稿を埋め込む手順

「Instagram」の埋め込みコードをコピーする

「WordPress」のブロックエディターで、記事編集画面を開きます。別タブを開いて、「Instagram」にアクセスします。埋め込みたい投稿をクリックします。試しにこちらの投稿を埋め込んでみます。

「Instagram」の投稿で埋め込みコードをコピーする手順画像1

投稿ページを開けたら、右上の三点ボタン(…)をクリックします。

「Instagram」の投稿で埋め込みコードをコピーする手順画像2

「埋め込み」をクリックします。「リンクをコピー」ではないので注意です。

「Instagram」の投稿で埋め込みコードをコピーする手順画像3

埋め込めるHTMLコードが表示されます。「埋め込みコードをコピー」をクリックします。

「Instagram」の投稿で埋め込みコードをコピーする手順画像4
【ポイント】「キャプションを追加」とは?

投稿の説明文も一緒に表示させるかどうかの設定です。チェックした埋め込みとチェックを外した埋め込みの両方を貼っておきます。

Instagramの埋め込み時にある「キャプションの追加」オンオフ画像

例えば、長文の説明が書かれていたり、ハッシュタグが多用されていて、そのままキャプションありで埋め込むと、かなりスペースをとってしまう…という場合は、「キャプションを追加」のチェックを外した状態でコピーするといいかなと思います。

逆に、写真だけでなくその投稿に書かれている説明もブログに貼りたい場合は、チェックを付けたままコピーします。

「埋め込みコードがコピーされました」と表示されたらOKです。

「Instagram」の投稿で埋め込みコードをコピーする手順画像5

「WordPress」にカスタムHTMLを挿入する

「WordPress」の記事編集画面に戻ります。いつものようにブロック追加ボタン(+)をクリックします。ちょっとだけ表示されるブロックの中に「カスタムHTML」があればクリックします。なければ「すべて表示」をクリックします。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像1

左側サイドバーに、追加できるブロックが一覧表示されます。この中の「カスタムHTML」をクリックします。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像2
【ポイント】「カスタムHTML」がない場合

非表示にしている可能性があります。記事編集画面右上の三点ボタン(⋮)をクリック→「設定」をクリックします。

「WordPress」のブロックに「カスタムHTML」を表示させる手順画像1

「ブロック」ページ内にある「ウィジェット」の「カスタムHTML」にチェックを入れます。ブロック一覧に表示されるようになります。

「WordPress」のブロックに「カスタムHTML」を表示させる手順画像2

埋め込みコードをカスタムHTMLに貼りつける

カスタムHTMLブロック内に、先ほどコピーした「Instagram」の埋め込みコードを貼り付けます。Ctrl+Vを押したり、右クリック→「貼りつけ」をクリックします。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像3

埋め込みコードが貼りつけられます。編集画面上ではわけわからない英数字です。HTMLコードなので気にしなくてOKです。実際の記事を見たときは、ちゃんとこの部分に表示されます。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像4

実際に埋め込まれたか確認する

下書き記事の場合は、下書き保存して、右上のプレビューボタン→「新しいタブでプレビュー」で、仕上がり具合を確認できます。既に公開している記事は、更新して実際のページを開いて確認します。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像5

無事に「Instagram」の特定の投稿が、僕の記事に埋め込まれました。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像6

実際下記に貼っておきます。僕の編集画面上ではHTMLコードですが、記事を見ている読者様からは投稿が表示されていると思います。

矢印ボタンで画像を切り替えられました。投稿者の名前なども表示されて、いい感じです。

「WordPress」のブロックエディターに「Instagram」の投稿を埋め込む手順画像7

【余談】「X(旧Twitter)」の埋め込みができない時の対処法

2023年夏頃に「X(旧Twitter)」が「X」になった影響で、条件によっては「X(旧Twitter)」もうまく埋め込めない場合があります。対処法は以下の記事に書いています。

埋め込んだInstagramの横幅を調整する方法

デフォルトでは埋め込んだInstagramの投稿は、横幅が「max-width:540px;」に制限されています。CSSを調整することで、好きな横幅にできます。記事ページの横幅いっぱいにすることも可能です。

感想

以上、ブログ投稿サービス「WordPress」のブロックエディターで、「Instagram」のURLを貼り付けても、「このコンテンツを埋め込めませんでした」と表示されて、埋め込み出来ない時の対処法についてでした。

ただブラウザのURLをコピーするのではなく、投稿→右上の三点ボタン→「埋め込み」からコピーするのがポイントです。

2024年2月5日WordPress

Posted by ナポリタン寿司