サイトにて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タグの中身がタイミングによって異なるっぽい。下記の２つのどちらか。
1. <script async defer src="//www.instagram.com/embed.js"></script>
2. <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を使用する。
最後に
前述したように根本的な原因はわからず。なぜこのような仕様になっているか。同じような現象で悩んでいる方もいると思うので、少しでも役にたてばと思う。