サイトにてInstagram画像を使用するためにInstagramさんが提供しているoEmbedを使用していたが、ある日を境にInstagram画像表示が崩れるようになってしまった。

某質問サイトや、英語のサイトをあさってみたが原因を発見できなかったため、ここに対応方法を備忘録として残そうと思う。

※apiが既に修正されている可能性もありますので、その時はご了承ください。

現象

使用するAPIはhttps://api.instagram.com/oembed?url=[InstagramのURL]
1ページに複数枚のInstagram画像を使用いていると、表示が崩れて画像が文字と重なったり、画像自体が表示されなくなる。
リロードすると直ることがある。
表示が崩れないページも存在する。
"Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." とjsエラーが出ている。

原因

APIから返ってくるscriptタグの中身がタイミングによって異なるっぽい。下記の２つのどちらか。

<script async defer src="//www.instagram.com/embed.js"></script>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

どうやら1.のscriptタグを取得すると表示が崩れるらしい。
※現在は1.のみしか取得しなくなっていた。

www.instagram.com/embed.jsは圧縮されていて読み解くのが困難なので、根本的な原因は調査していないが、これを使用しないほうが良いらしい。

対応

単純にwww.instagram.com/embed.jsを使わないようにする。
下記3つのどれかで解決できるはず。
1.　www.instagram.com/embed.jsを//platform.instagram.com/en_US/embeds.jsに置換する。
2.　ページ表示時に毎回apiを叩いている場合は、omitscript=trueをパラメータに加えることでscriptタグを返さなくなるので、自分自身で上記2.のスクリプトタグを付け加える。
3. 自作jsを使用する。

最後に

前述したように根本的な原因はわからず。なぜこのような仕様になっているか。同じような現象で悩んでいる方もいると思うので、少しでも役にたてばと思う。