Instagram 埋め込みコードの表示崩れ解決方法


Instagram 埋め込みコードで表示が崩れる問題の解決方法をご紹介します。

Instagram

Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. エラー

Instagram 埋め込みコードで表示が崩れる場合、Developer Console などに Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. エラーが発生していることを確認できると思います。

Instagram 埋め込みコードの例

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BfcfMM5D1OU/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BfcfMM5D1OU/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">#チキンサラダ #🥗 #渋谷ランチ</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/bakorer/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Tadashi Shigeoka</a>さん(@bakorer)がシェアした投稿 - <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2018-02-21T04:20:45+00:00"> 2月 20, 2018 at 8:20午後 PST</time></p></div></blockquote> 
<script async defer src="//www.instagram.com/embed.js"></script>

上記の埋め込みコードのように、

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

を利用すると表示が崩れるみたいです。

代わりに従来の以下の script に置き換えると表示崩れが解消しました。

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

とはいえ、Instagram のサービス自体が //platform.instagram.com/en_US/embeds.js から新しく //www.instagram.com/embed.js へ移行中だと思うので、いずれこの方法も使えなくなってしまうと思います。

それまでに Instagram のエンジニアが表示崩れのバグ対応をしてくれるといいんですけどね。

以上、Instagram 埋め込みコードの表示崩れに悩まされた現場からお送りしました。

参考情報

  1. コメントはまだありません。

  1. トラックバックはまだありません。