Programmatisches Entdecken von Freigabecode mit oEmbed

Das Web ist voll von Diensten, die reichhaltige Inhalte wie Videos, Bilder, Musik und Podcasts, Karten und Grafiken und alle möglichen anderen Freuden hosten. Wenn Sie Ihre Inhalte zu einer Website hinzufügen, bietet Ihnen diese wahrscheinlich eine Möglichkeit, diese Inhalte woanders in eine Webseite einzubetten.

Seiten wie YouTube haben ihren eigenen einbettbaren Player, der gerne in Blogposts und sogar Produktseiten verwendet wird. Soundcloud hat einen Code zum Einbetten ihres Musikplayers in die Website Ihrer Band. Spendensammler für wohltätige Zwecke laden möglicherweise die Strecke ihres großen Rennens auf eine Website wie Strava hoch und möchten sie auf ihrer Spendenwebsite teilen, um sie ihren Sponsoren zu zeigen.

All dies geschieht, indem Sie die Option " Teilen " auf der Hosting-Site finden und Code kopieren, der normalerweise eine Mischung aus HTML und JavaScript ist. Dieser Code kann dann normalerweise in die Zielseite eingefügt werden, und die Hosting-Site präsentiert eine reichhaltige Darstellung des Inhalts, die all Ihre Freunde, Kunden und Kontakte sehen können.

So weit, so gut, und damit ist die Möglichkeit der manuellen Einbettung von Inhalten ziemlich gut abgedeckt. Es gibt jedoch einen deutlichen zweiten Anwendungsfall, bei dem das Ergebnis dasselbe ist, der Weg dorthin jedoch sehr unterschiedlich ist.

Programmatisch teilen

Stellen wir uns vor, Sie erstellen eine App oder Website, die Inhalte von einem Benutzer akzeptiert. Das kann etwas so Einfaches wie eine einfache Intranetseite sein, auf der Mitarbeiter Neuigkeiten mit Kollegen teilen können, oder etwas Großes wie ein ganzes soziales Netzwerk, in dem sich die Leute anmelden und mit dem Posten beginnen können.

In beiden Fällen müssen Sie herausfinden, was zu tun ist, wenn der Benutzer eine URL als Teil dieses Inhalts hinzufügt. Sie können sich das Szenario vorstellen:

 Check out this video! https://youtu.be/jw7bRnFbwAI

An diesem Punkt müssen Sie als Publishing-System herausfinden, was zu tun ist. Die erste Option besteht darin, nichts zu tun und die URL einfach als einfachen Text zu belassen. Das ist keine brillante Idee, da Benutzer in der Regel auf die URL klicken möchten und der einfache Text ihnen nicht hilft, auf die Seite am anderen Ende zu gelangen.

Die zweite Möglichkeit besteht darin, es in einen Link umzuwandeln. Das ist ein guter, solider nächster Schritt, da Benutzer dem Link folgen und zum Inhalt gelangen können. Aber dabei verlassen sie Ihre Website und kommen möglicherweise nicht so schnell wieder zurück.

Die beste Benutzererfahrung besteht möglicherweise darin, den Player für diesen Inhalt abzurufen und ihn direkt dort einzubetten, anstatt nur die URL. Dadurch könnten Benutzer den Inhalt direkt auf Ihrer Website erleben, ähnlich wie sie es beispielsweise auf Facebook tun würden.

Dies stellt das Problem dar. Wie kann ich eine gegebene URL in den HTML/JavaScript-Einbettungscode umwandeln, der benötigt wird, um einen Rich-Player auf der Seite anzuzeigen?

Wenn es sich um eine bekannte Website wie YouTube handelt, könnte ich einen Code schreiben, der die YouTube-API verwendet, um die Videoinformationen abzurufen und den Einbettungscode auf diese Weise abzurufen oder zu erstellen. Dasselbe könnte ich auch für andere Videodienste wie Vimeo und VIVO tun. Ich kann Code schreiben, um Flickr- und Instagram-URLs zu erkennen und ihre APIs verwenden, um schöne einbettbare Versionen von Fotos abzurufen. Und das gleiche für Twitter und Tweets. Aber das hört sich nach viel Arbeit an!

Ideal wäre es, wenn es einen standardisierten Weg gäbe, um von einer URL eines Inhalts zu einem Block mit Einbettungscode zu gelangen, um diesen Inhalt auf einer Seite anzuzeigen. Wenn Sie aufgepasst haben, werden Sie feststellen, dass die Antwort darauf oEmbed ist.

Der Ursprung von oEmbed

Das war genau das Problem, das Leah Culver hatte, als sie an Pownce arbeitete (einer wirklich innovativen Social-Networking-Site, die der Betamax für Twitters VHS war). Pownce wollte reichhaltige Darstellungen von Inhalten in den Update-Stream eines Benutzers einbetten, wollte aber die Unterstützung nicht nur auf die Dienste beschränken, die sie speziell für die Integration mit Code geschrieben hatten. Beim Abendessen mit Kollege Mike Malone sowie Cal Henderson (Leiter der Technik bei Flickr – damals einer der größten Anbieter solcher Inhalte) und Richard Crowley haben sie gemeinsam eine Idee für einen offenen Standard entwickelt, um Einbettungscode zu erhalten eine URL. Henderson ging weg und entwarf auf der Grundlage der Diskussion etwas, und oEmbed war geboren.

Verwenden von oEmbed

So funktioniert das.

Es beginnt mit der URL, die auf ein einzelnes Inhaltselement verweist. Das kann ein YouTube-Video, ein Bild oder was auch immer sein. In der Regel wurde dies von einem Benutzer Ihrer Website oder App als Teil eines Inhalts bereitgestellt, den er veröffentlichen möchte. Der erste Schritt besteht darin, den Inhalt der Seite unter dieser URL abzurufen, die eine HTML-Seite sein sollte.

Wenn die Website, die den Inhalt hostet, oEmbed unterstützt, sollte im <head> -Abschnitt dieser Seite ein link -Element mit einem oembed -Inhaltstyp vorhanden sein:

 <link rel="alternate" type="application/json+oembed" href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

Ein Hinweis zu XML: oEmbed unterstützt Antworten sowohl im XML- als auch im JSON-Format. Für diesen Artikel ziehe ich nur JSON in Betracht, weil wir keine Wilden sind. Wenn Sie in der unglücklichen Lage sind, mit XML arbeiten zu müssen, beachten Sie, dass es sich um ein von der oEmbed-Spezifikation unterstütztes Format handelt, obwohl Sie möglicherweise feststellen, dass einige Anbieter nur JSON-Antworten anbieten.

Dieses Link-Tag als rel -Attribut wird auf „ alternate “ gesetzt und ein type wird entweder auf application/json+oembed oder „ text/xml+oembed . Es ist dieses Attribut, das uns darauf hinweist, dass die in href angegebene URL tatsächlich ein oEmbed-API-Endpunkt zum Abrufen der Details des Inhalts ist.

Diese URL hat normalerweise zwei Parameter: url und format .

Allgemeine URL-Parameter für die anfängliche Verbraucheranfrage

Die vollständige Spezifikation geht hier viel mehr ins Detail (und Sie sollten darauf verweisen, wenn Sie Ihre eigene Implementierung erstellen), aber dies sind die beiden Parameter, die Sie wahrscheinlich am häufigsten sehen werden.

Wir haben also eine URL, haben die Seite abgerufen und ein oEmbed-Link-Tag mit einer anderen URL für einen API-Endpunkt gefunden. Als Nächstes fordern wir diese neue URL an, die alle Informationen zurückgibt, die der Dienst zu diesem Inhalt bereitstellen muss.

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

Jetzt reden wir! Die Antwort gibt uns viele Informationen über den Inhalt. Die version sollte auf absehbare Zeit 1.0 sein, was die aktuelle Version der oEmbed-Spezifikation ist. Die anderen zurückgegebenen Informationen hängen weitgehend vom Wert von type ab.

Antworttypen

Der Wert des type in der Antwort sagt Ihnen, welche Art von Medien Sie einbetten werden.

Abgesehen von dedizierten Videoinhalten ist der häufigere Typ, den Sie wahrscheinlich in freier Wildbahn sehen, rich . Sogar Flickr selbst sendet zwar immer noch eine photo , liefert aber auch html für einen reichhaltigen einbettbaren „Player“ für das Bild.

Meistens wird beim Einbetten des Inhalts in Ihre Website lediglich der als html -Wert bereitgestellte Code verwendet.

Ein Hinweis zur Sicherheit

Eine Sache, bei der Sie zu Recht vorsichtig sein könnten, ist, eine HTML-Antwort zu nehmen und sie programmgesteuert in eine von Ihnen gehostete Seite einzubetten. Ohne den menschlichen Schritt, den Code, den Sie einfügen, noch einmal zu überprüfen, besteht immer die Möglichkeit, dass dieser Code bösartig ist. Daher sollten Sie geeignete Maßnahmen ergreifen, um das Risiko zu mindern.

Das kann das Filtern der URLs umfassen, um sicherzustellen, dass die Schemata und Domains mit den erwarteten übereinstimmen, und das Sandboxing von Code in einem Iframe auf einer anderen, cookielosen Domain. Sie sollten auf die Situation zugreifen, in der Sie den Code verwenden, und sicherstellen, dass Sie sich keinem unangemessenen Risiko aussetzen.

Einstieg

So wichtig es auch ist, den Prozess bei der Verwendung von oEmbed zu verstehen, die Realität ist, dass die meisten gängigen Sprachen Bibliotheken zur Verfügung haben, die den Prozess abstrahieren und ihn relativ einfach machen.

Beispielsweise bietet das npm-Paket oembed eine sehr einfache Schnittstelle, um eine Anfrage basierend auf der Inhalts-URL zu stellen und im Gegenzug die oEmbed-Antwort zu erhalten.

Installieren Sie zuerst das Paket in Ihrem Projekt:

 npm i oembed

Und fordern Sie dann die URL an. Hier verwende ich die URL einer Präsentation auf Notist, die ich über oEmbed gehalten habe. Wie sehr meta.

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

Und die Antwort:

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

Wenn Sie dasselbe in PHP tun möchten, steht ein praktisches Paket namens embed/embed zur Verfügung, das über Composer installiert werden kann.

 composer require embed/embed

Und dann in Ihrem PHP-Projekt:

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

Wie Sie sehen können, wird der Prozess mit der Verwendung einer Bibliothek sehr einfach und Sie können schnell von einer URL zum Einbettungscode gelangen, der bereit ist, eine umfassende Darstellung des Inhalts des Benutzers anzuzeigen.

Fazit

oEmbed ist eine sehr elegante Lösung für ein sehr spezifisches Problem. Man könnte meinen, dass nur wenige Ingenieure, die in großen sozialen Netzwerken arbeiten, davon profitieren würden, aber in Wirklichkeit sind Veröffentlichungssysteme, bei denen ein Benutzer eine URL eingeben kann, überraschend häufig. Finden Sie einen Back-End-Ingenieur, der irgendwann nicht mehr irgendeine Art von CMS erstellen musste. Wir denken vielleicht nicht so darüber, aber wenn Sie Benutzereingaben akzeptieren, sollten Sie darüber nachdenken, was zu tun ist, wenn diese Eingaben URLs enthalten.

Jetzt, wo Sie oEmbed kennen (sorry), haben Sie keine Entschuldigung mehr, nicht ernsthaft darüber nachzudenken, wie Sie in Ihren zukünftigen Projekten mit URLs umgehen.

• oEmbed-Spezifikation
• oembed für NodeJS
• einbetten/einbetten für PHP
• „Ankündigung von OEmbed: Ein offener Standard für eingebettete Inhalte“, Leah Culver