埋め込んだインスタ記事が表示されない場合の解決法

概要

インスタグラムの記事は、「記事の右上のある3点リーダー」>「埋め込み」で表示されるタグを貼り付けることで、ホームページやブログに埋め込むことができる。

ただし、そのまま貼り付けただけでは、以下のようにカメラのアイコンだけ表示され記事が表示されないことがある。

これは以下の方法で解決できることが多い。

解決方法

以下のscriptタグを追加するだけで、インスタ記事が正常に表示されるようになることが多い。

<script>
document.addEventListener("DOMContentLoaded", () => {
  if (typeof instgrm === "undefined") {
    const url = new URL(window.location.href);
    if (!url.searchParams.has('k')) {
      url.searchParams.set('k', '0');
      window.location.href = url.toString();
    }
  }
});
</script>

インスタ記事はinstgrmオブジェクトによって表示されるが、初回表示時にはなぜかinstgrmがundefinedとなってしまうことが多い。

そのため、上記の処理ではinstgrmオブジェクトが存在しない場合、URLに?k=0を付加してリロードしている。

より適切な解決方法をご存知の方がいらっしゃいましたら、コメントください。