web-dev-qa-db-ja.com

Instagram埋め込みコードが画像ではなくInstagramアイコンのみを表示するのはなぜですか？

Instagramアカウントの写真をブログに埋め込もうとしていました。写真から埋め込みコードをコピーし、それをエディターに貼り付けて、外すのは簡単なケースだと思いました。しかし、これはそうではないようです。スクリーンショットからわかるように、写真の情報は表示されますが写真は表示されません。

Screen shot

画像タグだけをhtmlに挿入すると、画像の靴は完璧になりますが、インスタグラムの写真のスタイルではありません。

つまり.

<img src="https://www.instagram.com/p/BFbPlbwIceD" />

埋め込みコードが機能しない理由を誰かが知っていますか？私もプレーンHTMLファイルに埋め込みコードを試してみましたが、どちらも機能しません。問題を引き起こしているのは私のCMSではなく、Umbracoです。

embedinstagram
9
Owain Williams

この問題は報告されています。

修正が簡単ではない既知の問題のようです： http://issues.umbraco.org/issue/U4-8646

3
Owain Williams

（以下の回答はサーバーなしのローカル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>

お役に立てれば。

17
Ngốc

同じ問題がありました。反応では、次のような埋め込みを処理する必要があります：

componentDidMount() {
  window.instgrm.Embeds.process();
}

これは私のためにそれを落とします！

5
Andre Zimpel

問題の原因は、

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

の前に実行

<blockquote>...</blockquote>

DOMに存在します。これは、スクリプトがロード時にiframeに変換するブロック引用符を見つけられないことを意味します。

スクリプトは非同期としてマークされているため、更新のたびに異なる順序のロードが発生する競合状態に陥る可能性があります。

ブロッククォートが存在した後にスクリプトがロードされることを確認する必要があります。ドキュメントの最後にあるスクリプトパーツを移動します。または、JSを使用して後でDOMに追加する場合は、次のコマンドを実行することもできます

instgrm.Embeds.process()

確認した後は、DOM内にあります。

出典： https://www.instagram.com/developer/embedding/

3
Patrik Beck

私はこれに遅れをとっていますが、現在問題は多くのサイトでまだ起こっているようです。

自分のサイトを調べたところ、読み込み時にコンソールにエラーが発生しました。エラーのリンクをたどると、次の場所に移動しました

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を再度変更すると、リンクが壊れる可能性があります。

今すぐ表示されます。

1
vinyllicker

私はこの問題に遭遇し、最終的にwordpressの新しいバージョンは、エディターの行のURLをそのまま通過した場合、画像またはビデオを自動的に埋め込むことがわかりました。これはこれは非常に最近の追加で、しばらく検索する必要がありました。例として、このページでInstagramビデオを投稿に追加しました： http://blog.pokefind.com/awesome -pokemon-go-functioning-costume /

0
Brady Moritz

Instagram APIが変更された可能性があり、誰かが最近同様にツイートが適切に埋め込まれていないという同様の問題を報告しました。 http://issues.umbraco.org.uk に問題として記録し、いくつかのレポート手順を追加します。うまくいけば、誰かが修正できるようになるでしょう。

私はテストしたばかりで、私にとっても同じです。

0
Tim

信じられないかもしれませんが、問題は解決したと思います。この行を追加するだけです

<iframe style="display:none"></iframe>

あなたのコードに、すべてが完全に動作します。

0
Krisjanis Lejejs