Instagram埋め込みコードが画像ではなくInstagramアイコンのみを表示するのはなぜですか？
Instagramアカウントの写真をブログに埋め込もうとしていました。写真から埋め込みコードをコピーし、それをエディターに貼り付けて、外すのは簡単なケースだと思いました。しかし、これはそうではないようです。スクリーンショットからわかるように、写真の情報は表示されますが写真は表示されません。
画像タグだけをhtmlに挿入すると、画像の靴は完璧になりますが、インスタグラムの写真のスタイルではありません。
つまり.
<img src="https://www.instagram.com/p/BFbPlbwIceD" />
埋め込みコードが機能しない理由を誰かが知っていますか？私もプレーンHTMLファイルに埋め込みコードを試してみましたが、どちらも機能しません。問題を引き起こしているのは私のCMSではなく、Umbracoです。
この問題は報告されています。
修正が簡単ではない既知の問題のようです： http://issues.umbraco.org/issue/U4-8646
（以下の回答はサーバーなしのローカルhtmlファイルにのみ適用されます）
私は同じ問題に直面していて、埋め込みコードのこの行に気づきました：
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
以下のようにソースにスキーム（ "http"）を追加すると、画像が正しく表示されました。
<script async defer src="http://platform.instagram.com/en_US/embeds.js"></script>
お役に立てれば。
同じ問題がありました。反応では、次のような埋め込みを処理する必要があります：
componentDidMount() {
window.instgrm.Embeds.process();
}
これは私のためにそれを落とします！
問題の原因は、
<script async src="//www.instagram.com/embed.js"></script>
の前に実行
<blockquote>...</blockquote>
DOMに存在します。これは、スクリプトがロード時にiframeに変換するブロック引用符を見つけられないことを意味します。
スクリプトは非同期としてマークされているため、更新のたびに異なる順序のロードが発生する競合状態に陥る可能性があります。
ブロッククォートが存在した後にスクリプトがロードされることを確認する必要があります。ドキュメントの最後にあるスクリプトパーツを移動します。または、JSを使用して後でDOMに追加する場合は、次のコマンドを実行することもできます
instgrm.Embeds.process()
確認した後は、DOM内にあります。
私はこれに遅れをとっていますが、現在問題は多くのサイトでまだ起こっているようです。
自分のサイトを調べたところ、読み込み時にコンソールにエラーが発生しました。エラーのリンクをたどると、次の場所に移動しました
https://www.instagram.com//www.instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js
それは適切なWebリンクではないため、そのページはjsをロードしません。
これを克服するには、埋め込みの下部にあるこの行を置き換えます
<script async src="//www.instagram.com/embed.js"></script>
これとともに
<script async src="https://instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js"></script>
現在は機能しますが、jsのURLを再度変更すると、リンクが壊れる可能性があります。
今すぐ表示されます。
私はこの問題に遭遇し、最終的にwordpressの新しいバージョンは、エディターの行のURLをそのまま通過した場合、画像またはビデオを自動的に埋め込むことがわかりました。これはこれは非常に最近の追加で、しばらく検索する必要がありました。例として、このページでInstagramビデオを投稿に追加しました： http://blog.pokefind.com/awesome -pokemon-go-functioning-costume /
Instagram APIが変更された可能性があり、誰かが最近同様にツイートが適切に埋め込まれていないという同様の問題を報告しました。 http://issues.umbraco.org.uk に問題として記録し、いくつかのレポート手順を追加します。うまくいけば、誰かが修正できるようになるでしょう。
私はテストしたばかりで、私にとっても同じです。
信じられないかもしれませんが、問題は解決したと思います。この行を追加するだけです
<iframe style="display:none"></iframe>あなたのコードに、すべてが完全に動作します。