インスタグラム 埋め込み

今年になって作成したサイトで、インスタグラム(Instagram)の埋め込みコードを使用すると表示が崩れる現象が発生しました。

複数のインスタグラムを連続して埋め込むと、下側のインスタグラム画像が上側のインスタグラム画像に重なってしまい、テキストも変な位置に表示されてしまったのです。

 

とりあえず、スタイルシートに

/*
==============================================
インスタ埋め込みが崩れることへの対処
==============================================
*/

.instagram-media {
position: static !important;
}

 

このように記述することで、画像が重なる現象は回避できました。

とりあえず一安心…と思っていたのもつかの間、1週間後に再びそのサイトを確認したところ、インスタグラムの埋め込み部分の画像が表示されなくなってしまったのです。

というか、何故かChromeでのみ画像が表示されない。Internet Explorer や Firefox などでサイトを確認すると正常に表示されます。(Chromeでプラグインを全て止めてもダメ)

 

原因を調べたところ、参考になる情報が見つかりました。

http://codenote.net/webservice/4068.html

 

…という事で、今回の不具合をまとめると

 

2018年1月~2月に生成したインスタグラムの埋め込みコードを使うと、表示が崩れる。

↓↓↓

position: static !important; を指定すると改善


2018年1月~2月に生成したインスタグラムの埋め込みコードを使うと、Chromeで閲覧した時のみ、画像が表示されない。

↓↓↓

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

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

に変更すると改善。

 

どうやら今年になってインスタグラム(Instagram)の仕様に変更があったようで、最近も頻繁に細かい変更が行われているようです…

 

ランキング参加中です。
もし今回の記事が参考になったのであれば、
クリックして応援して頂けると嬉しいです。
↓↓↓
人気ブログランキング