OEmbed Bring Embedded Pens All Over

oEmbed ist eine nette kleine Technologie, die es ermöglicht, Rich-Content sehr einfach in andere Inhalte einzubetten. Man fügt einen Link zu dem "Ding" ein und wenn er veröffentlicht wird, verwandelt sich dieser Link magisch in etwas viel Nützlicheres als nur einen Link. Ein typisches Beispiel ist ein Link zu einem YouTube-Video. Füge einfach die URL eines Videos in einen Blogbeitrag ein, und es verwandelt sich in eine eingebettete Version dieses Videos. Eine Flickr-URL… wird zu einem eingebetteten Foto.

CodePen unterstützt ebenfalls oEmbed, was bedeutet, dass Sie jetzt eingebettete Pens an einigen interessanten Orten platzieren können und es ist auch ziemlich einfach, Ihre Website dafür freizugeben.

Ich erwähne das hier, weil es genau hier auf CSS-Tricks gut funktioniert!

Eingebettete Pens in den Foren

Wir ermutigen Sie ohnehin, Pens von Problemen in den Foren zu posten, denn das ist 100 Mal einfacher zu spielen und zu diagnostizieren, als nur Code anzusehen und ihn sich vorzustellen.

Sehen Sie, wie einfach das ist? Fügen Sie einfach den Link zum Pen dort ein.

Eingebetteter Pen in den Kommentaren

Genau hier im Blog funktioniert es exakt genauso.

Machen Sie sich keine Sorgen, wenn Sie es im Vorschaufenster nicht sehen, der oEmbed-Prozess findet nach der Veröffentlichung statt.

Warum oEmbed verwenden?

Natürlich ist es einfach. Aber es steckt mehr dahinter. Mit oEmbed "whitelisten" Sie Orte, von denen Sie eingebetteten Rich-Content zulassen. Das ist eine Vertrauenssache.

CodePen-Einbettungen benötigen JavaScript, um zu funktionieren. Das klingt anti-progressiv-enhancement, ist aber tatsächlich das Gegenteil. Indem wir JavaScript benötigen, können wir ein einwandfreies Stück Inhalt (ein Satz, der den Titel, den Autor und Informationen zu einem Pen erklärt) nehmen und es in ein <iframe>-Einbettungserlebnis verwandeln. Ohne JavaScript funktioniert der Inhalt immer noch und ergibt Sinn. Mit JavaScript ist es besser. Ein <iframe> allein würde in einer Umgebung ohne JS (für uns) einfach kaputtgehen.

Da wir also das <script> für das Funktionieren unserer Einbettungen benötigen, schränkt dies ein, wo sie verwendet werden können. Die meisten Websites erlauben Ihnen nicht, beliebige <script> auszuführen, die Sie darauf platzieren. Das wäre höchst unverantwortlich und eine große Sicherheitslücke (XSS). Mit oEmbed können Sie dieses <script> nur für vertrauenswürdige Quellen zulassen. Eine ziemlich coole Art, damit umzugehen, finde ich.

Wie es funktioniert

oEmbed funktioniert durch

Erkennen von URLs, die einem der von einer bestimmten Website unterstützten Formate entsprechen
Eine Anfrage an die oEmbed-API dieser Website senden und die URL übergeben
Die API gibt HTML zurück, das die Website zum Einbetten dieses "Rich-Contents" verwendet

Mehr über die CodePen oEmbed API erfahren Sie hier, einschließlich unseres API-Endpunkts und dessen, was wir zurückgeben.

oEmbed auf Ihrer WordPress-Seite aktivieren

Es ist im Grunde eine Zeile Code, um es auf einer selbst gehosteten WordPress-Seite zu aktivieren, aber Sie können genauso gut ein Plugin verwenden, denn dafür sind sie da. Um es dann in Kommentaren (und bbPress) zum Laufen zu bringen, gibt es ein weiteres Plugin.

Iframely unterstützt CodePen und 900+ weitere Domains mit eingebettetem Content, das ist also auch eine Option.

Wenn Sie Jetpack verwenden, wird die Unterstützung bald auch dafür kommen.

Aber denken Sie daran, wenn Sie nur Pens in Blogbeiträge und ähnliches einbetten, benötigen Sie oEmbed überhaupt nicht. Sie können unseren Einbettungscode verwenden, was bedeutet, dass Sie Höhen anpassen und Themen ändern können, was leistungsfähiger ist.

Discourse unterstützt CodePen oEmbed

Discourse, also die exzellente Forum-Software.

WordPress.com unterstützt CodePen oEmbed

Danke an Joey Kudish und WordPress.com dafür, dass sie Embedded Pens dort zum Laufen gebracht haben!

Lassen Sie mich wissen, wenn Sie es auf eine coole Art und Weise nutzen.

Ein wichtiger Grund, warum wir CodePen überhaupt angefangen haben zu entwickeln, war, dass das bloße Zeigen von Code-Snippets weit hinter dem Zurückbleibt, was es bedeutet, diesen Code tatsächlich laufen zu sehen, und das macht es einfacher, diese laufenden Code-Teile an die gleichen Orte zu bringen, die früher auf Snippets beschränkt waren.