wake-up-neo.net

Warum zeigt der Code zum Einbetten von Instagram nur ein Symbol, nicht das Bild?

Ich wollte ein Foto aus meinem Instagram-Konto in meinen Blog einbetten. Ich dachte, es wäre ein einfacher Fall, den Einbettungscode aus dem Foto zu kopieren, in meinen Editor einzufügen und los geht's. Dies scheint jedoch nicht der Fall zu sein. Wie Sie dem Screenshot entnehmen können, erhalte ich die Fotoinformationen, aber kein Foto. 

 Screen shot

Wenn ich nur ein Image-Tag in die HTML-Datei einlege, wird das Image perfekt dargestellt, jedoch nicht im Stil eines Instagram-Fotos. 

d.h. 

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

Hat jemand eine Idee, warum der Einbettungscode nicht funktioniert? Ich habe den eingebetteten Code auch in einer einfachen HTML-Datei ausprobiert und funktioniert auch nicht. Daher ist es nicht mein CMS, das die Probleme verursacht, nämlich Umbraco. 

6
Owain Williams

Das Problem wurde gemeldet. 

Scheint ein bekanntes Problem zu sein, das nicht leicht zu beheben ist: http://issues.umbraco.org/issue/U4-8646

1
Owain Williams

(Die Antwort unten gilt nur für lokale HTML-Dateien ohne Server.)

Ich stand vor demselben Problem und bemerkte diese Zeile im Einbettungscode:

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

Wenn ich das Schema ("http") zur Quelle hinzugefügt habe (siehe unten), wurde das Bild richtig angezeigt.

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

Hoffe das hilft.

15
Hai Nguyen

Ich hatte das gleiche Problem. In react müssen Sie die Einbettungen wie folgt verarbeiten:

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

Das war es für mich!

3
Andre Zimpel

Die Ursache des Problems ist, dass die

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

Läuft vor dem

<blockquote>...</blockquote>

Ist im DOM vorhanden. Dies bedeutet, dass das Skript keine Blockzitate findet, die beim Laden in iframes umgewandelt werden könnten.

Da das Skript als asynchron markiert ist, können Sie auf Rennbedingungen stoßen, bei denen Sie bei jeder Aktualisierung eine andere Ladereihenfolge erhalten.

Sie müssen sicherstellen, dass das Skript geladen wird, nachdem das Blockquote vorhanden ist. Verschieben Sie entweder den Skriptteil am Ende des Dokuments. Wenn Sie JS verwenden, um das später zum DOM hinzuzufügen, können Sie es auch ausführen

instgrm.Embeds.process()

Nachdem Sie sicher sind, ist im DOM.

Quelle: https://www.instagram.com/developer/embedding/

3
Patrik Beck

Ich komme zu spät, aber derzeit scheint das Problem auf einer Reihe von Websites immer noch aufzutreten.

Nach einigen Recherchen auf meiner eigenen Website habe ich beim Laden einen Fehler in der Konsole festgestellt. Nach dem Link im Fehler bin ich zu folgendem Ort gekommen

https://www.instagram.com//www.instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js

offensichtlich lädt diese Seite js nicht, da es sich nicht um einen richtigen Weblink handelt.

Um dies zu überwinden, ersetzen Sie diese Linie am unteren Rand Ihrer Einbettung

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

mit diesem

<script async src="https://instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js"></script>

Derzeit funktioniert es, aber wenn sie die js-URL erneut ändern, wird möglicherweise die Verknüpfung unterbrochen.

Es sollte jetzt erscheinen.

1
vinyllicker

Ich bin auf dieses Problem gestoßen und habe schließlich herausgefunden, dass die neueren Versionen von WordPress das Bild oder Video automatisch einbetten, wenn Sie die URL in einer eigenen Zeile im Editor hinter sich lassen. Ich vermute, dass dies eine sehr neue Ergänzung ist, da ich eine Weile suchen musste, um sie zu finden. Zum Beispiel habe ich es auf dieser Seite verwendet, um dem Beitrag ein Instagram-Video hinzuzufügen: http://blog.pokefind.com/awesome-pokemon-go-functioning-costume/

0
Brady Moritz

Es ist möglich, dass die Instagram-API geändert wurde. Jemand hat ein ähnliches Problem mit Tweets gemeldet, das kürzlich nicht ordnungsgemäß eingebettet wurde. Melden Sie es als Problem auf http://issues.umbraco.org.uk mit einigen Berichtsschritten und hoffentlich kann jemand es beheben.

Ich habe es gerade getestet und es tut mir auch so.

0
Tim

Ob Sie es glauben oder nicht - ich glaube, ich habe das Problem gelöst ... Fügen Sie einfach diese Zeile hinzu

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

auf Ihren Code und alles wird perfekt funktionieren.

0