インスタの埋め込み画像が表示されないのを解決した話
この記事を読んだほうがいい人
✅ 自分の運営するサイトにInstagramの投稿を埋め込んでいる人
※有料記事ですが、公開時のテキストは全文読めます。（お寄せいただいた情報などを追記にまとめていきます）
サイトに埋め込んだインスタの画像が見えない！
2019年10月16日現在、一部の環境でサイトに埋め込まれたInstagramの画像が表示されないという不具合が起きています。
あなたのサイトでもInstagramを埋め込んだページがあるなら、一部の環境の人には画像が見えていないと思われます。
今回は、僕がその状況を解決した話を紹介します。
すべての環境をチェックすることはできないので、あくまでも僕の環境での話としてご理解願います。
※いろんなサイトのインスタの埋め込みが見られなくなってるのを解決したのではなく、自分のサイトでのみ見られるようにした方法になります。
気が付いたのは10月1日
iPhone📱でコスメのサイトを見ていた妻に
「Instagramの画像が見られないんだけど…」と言われました。
画像の代わりに
「この投稿をInstagramで見る」
というテキストリンクが表示されていました。
サイトによっては
「View this post on Instagram」
と、英語表記になっています。
何かそのサイトがミスってるんだろうと思いつつも、念のために自分のサイトをiPhoneで開いてみると、同じ状況でした。
インスタの埋め込み画像が「この投稿をInstagramで見る」ってなってるな…
— ラック (@a_rooms) October 1, 2019
一時的な不具合かなあ。
すぐに直るだろうと思ってしばらく放置していました。
iPhoneから見るとなってたんだけど、一回直ったから放っておいたけど今日もやっぱりなってた。
— ラック (@a_rooms) October 2, 2019
PCからだとちゃんと見える。
僕のサイトが悪いっていうか、InstagramとiPhoneの相性って感じ。
でも、やっぱり気持ち悪いので解決しました。
誰も騒いでないけど、気持ち悪いので解決した。
— ラック (@a_rooms) October 2, 2019
原因はembed.jsだった。
解決のためにやったこと
✅ instagramのJavaScriptを直接読み込んだ
インスタの埋め込みタグの最後の方で「embed.js」を読み込んでますよね。
↓これ
<script async src="//www.instagram.com/embed.js"></script>直接アクセスしてみると、転送されていることが分かります。
2019年10月16日現在では、次のファイルへと転送されました。
https://www.instagram.com/static/bundles/es6/EmbedSDK.js/2fe3a16f6aeb.js
この「転送」がうまく行ってないんじゃないかなと思って、転送先を直接読み込んでみたらビンゴ！
いちいち書き換えるのがめんどいという方は、次のコードをサイトのフッターにでも書いておけばいいかと思います。
<script async src="https://www.instagram.com/static/bundles/es6/EmbedSDK.js/2fe3a16f6aeb.js"></script>注意点としては、転送先がずっと固定されているわけではないということですね。
実際、10月2日の時点では転送先は別のファイルでした。
10月2日時点の転送先でも表示自体に問題はありませんでしたが、最新の状態に保つにはたまに確認して変更するしかないでしょう。
また、この対策はInstagramの規約に違反するものではないと思いますが、実行は自己責任でお願いします。
みんながこのファイルに転送されているのかも不明ではあります。
とりあえず、僕はこの対策で画像が問題なく表示されるようになりました。
僕だけでなくTwitterで問い合わせいただいた方も、同じ対策で解決しています。
どんな環境だと埋め込み画像が見られないの？
そもそも、この問題が注目されていない原因が、一部の環境のみで発生しているということでしょう。
僕の場合は
✅ iPhone+safariからは表示されない
✅ PCからは表示される
という状況でした。
だれも騒いでないので、iPhoneをバージョンアップすれば直るかなと思っていましたがそうでもない模様。
Twitterから問い合わせいただいた方は、そのときに最新だったiOS13.1.2でも見られないということでした。
（本日リリースされたiOS13.1.3では解決している可能性もありますが、まだ試していませんすいません！😅）
その後、Twitterでソフトバンク回線が原因ではないかという情報を発見。
最悪なんだけど…ブログのインスタ画像SoftBankだけ反映されてなくて見れてないっぽい…最悪…
— あむあい@美容ブロガー(肌管理&🇰🇷) (@byk_tokyo) October 14, 2019
いや逆によくこれでこのPVいってんなと思うけど最悪〜😭対処法ないんだけど〜😭
僕のiPhoneもソフトバンクです。
そしてiPhoneをWi-Fiに繋いで見たところ、確かにInstagramの画像が表示されました！
ソフトバンク回線+Androidで表示されるのかどうかは、友達が少ないため確認できておりません。😢
また、amebaブログだと表示される場合が多い感じです。
多分埋め込み方法が違うんでしょうか。（表示されないamebaブログもある）
試しにnoteにInstagram埋め込んでみると ↓
（香取慎吾Instagramより。新しい地図好きなんです）
ソフトバンク回線でもちゃんと表示されますよね。
ソース見ると、Instagramで取得できる埋め込みコードと違い、iframeで埋め込まれています。
Instagramから埋め込みコードをコピーして貼り付けた場合と違って、URLを貼るだけで埋め込める媒体の場合は表示される場合もあるということですね。
あと、Wi-Fiでサイトを見た後にソフトバンク回線で見ても、キャッシュが残っているため画像は表示されます。
ということもあり、この問題に気が付いているサイト運営者が少ないんだと思います。
でも、ソフトバンク回線のスマホが不具合の対象だとしたら、かなり影響大。
情報求む！コメントにて情報をお寄せください。
ということで、友達の少ない僕に情報をください！
スマホのWi-Fiを切ってから、「インスタ 埋め込んでみました」などでググって、いくつかサイトをのぞいてみてください。
もしくはこちらのページをごらんください。
美術手帳のバンクシーについての記事です。記事の最後の方にInstagramが埋め込まれています。
僕は「iPhoneXSMax、iOS 12.4.1、Safari、ソフトバンク回線」にて、Instagramの埋め込みコードによる埋め込み画像が表示されません。
Wi-Fiで繋ぐと見られます。
au+iPhone、docomo+iPhoneではどうなのか。
SoftBank+Androidではどうなのか。
このあたりが気になりますね。
500円も求む！
困ってたんだよ！という方、知らなかったけど助かった！というサイト運営者の方がいましたら、500円ください。🙏
そのうち自然と不具合が解消するだろうと思ってたのですが、発見から二週間経っても状況は変わらず、Twitterでも困っている声がちらほらと見えだしたので、noteにまとめた次第です。
Twitterだとまとめにくかったので、初noteです。
最初から有料ノートにしようかとも思ったのですが、なんかそれもあれだなと思ったので全部情報出しちゃいました。
500円くらいなら払ってやるよ！という方がいましたら、お願いいたします。（URLを教えていただければ、表示されるかどうかチェックもいたします）
せいぜい100円だな！という方は、「サポートをする」でご支援いただければ幸いです。
うるせー知ってたわ！という方は、Twitterなどでシェアして、まだこの問題を知らない方へ届けていただければと思います。
せっかくなので、有料部分では何か最新情報が入りましたら追記していきたいと思います。
ここから先は
¥ 500
この記事が気に入ったらチップで応援してみませんか？