Wie funktioniert eigentlich Embedding?

Wer kennt sie nicht, die in Blogposts eingebundenen YouTube-Videos oder den berühmt berüchtigten Like-Button von Facebook. Doch wie funktioniert das eigentlich technisch mit dem Einbinden von Inhalten von Drittanbietern? Wie sieht das ganz praktisch aus? Und wo liegen die Bedenken zum Datenschutz?

Ein Blick unter die Haube

Dazu müssen wir uns zunächst einmal die grundlegende Art und Weise ansehen, wie eine Webseite von einem Web-Server zum Web-Browser transportiert wird.

Gibt man nämlich eine URL oben in der Adressezeile des Browsers ein, so ist das im Prinzip wie eine Bestellung einer Bastelanleitung bei einem Online-Versand. Man stellt eine Anfrage und zurück kommt die Anleitung, evtl. schon mit Schnittmustern und ähnlichem. Doch meistens braucht man noch weitere Utensilien, die man nach dem Erhalt der Anleitung separat bestellen muss. Auch hier wird wieder eine Bestellung an den Versandhandel geschickt und die Lieferung kommt zurück.

Ganz ähnlich läuft es im Web. Hier wird durch die Eingabe einer URL oder das Klicken eines Links (was technisch dasselbe ist, nur dass die URL automatisch eingetragen wird), sozusagen eine Anleitung zum Aufbau der Web-Seite angefragt, die der Web-Server dann zurück liefert. Man nennt dies auch HTML-Datei (wobei HTML für Hypertext Markup Language steht). Und wie beim Bastel-Beispiel, mag diese Antwort noch nicht ausreichen, um die Seite wie gewünscht darzustellen. Werden nämlich z.B. noch Bilder, wie ein Logo, benötigt, so werden dieser in der HTML-Datei aufgelistet und vom Web-Browser dann separat nachgeladen. Dies ist zudem nicht nur bei Grafiken möglich, sondern auch für JavaScript-Dateien, Flash-Filme, Zeichensätze und mehr. In der Praxis bekommt man davon wenig mit, weil der Browser sowohl die Bestellung als auch das Zusammenbasteln übernimmt. Bei den meisten Browsern lässt sich der Verbindungsaufbau am unteren linken Bildrand in der Statuszeile verfolgen (z.B. wenn man pb21.de aufruft).

Was passiert beim Embedding?

Normalerweise werden diese Dateien von demselben Server nachgeladen, von dem das ursprüngliche HTML-Dokument kommt. Doch das muss nicht so sein. Betreibt man z.B. ein Blog und bindet ein Bild von seinem flickr-Account ein, so wird dieses Bild dann von flickr nachgeladen. Und dies ist somit auch schon das einfachste Beispiel für Embedding. So wird also das Bild vom flickr-Server im Dokument vom eigenen Blog-Server eingebunden, oder auf englisch: embedded.

Embedding-Beispiele

Bilder sind dabei das älteste, doch nicht das einzige Beispiel. So findet man z.B. sehr häufig YouTube-Videos, die in Blogposts eingebunden sind. Bei dieser Art des Embeddings wird das Video über ein sogenanntes iframe eingebunden. Dieses iframe ist sozusagen ein Fenster zu einem anderen Server, in diesem Falle YouTube. Dank Embedding muss man also keinen eigenen Video-Player implementieren oder die Video-Dateien selbst hosten.

Ähnlich funktioniert der Like-Button von Facebook. Auch in diesem Fall wird die Grafik und die Logik auf einem anderen Server bereitgestellt.

Doch auch komplexere Anwendungen sind möglich. Will man z.B. eine Karte darstellen und ggf. noch eigene Punkte auf dieser markieren, so kann man auf Google Maps oder Open Street Map zurückgreifen. Auch diese lassen sich auf der eigenen Seite einbinden, wie man an folgendem Beispiel sieht:

Wie funktioniert das in der Praxis?

Nehmen wir an, wir haben ein WordPress-Blog und wollen dort ein YouTube-Video einfügen. Im Artikel-Editor müssen wir dazu zunächst den HTML-Modus aktivieren. Dies geschieht durch Klicken auf den HTML-Reiter:

Nun müssen wir den Embed-Code finden. Dazu gehen wir einfach bei YouTube auf die Seite des entsprechenden Videos und finden darunter den “Teilen”-Button.

Klickt man darauf, erscheint u.a. die Option zum Einbetten. Klickt man wiederum darauf, erscheint der eigentliche Embed-Code. Was der nachher genau zeigt (z.B. wie gross das Video sein word), kann man durch die Optionen darunter noch beeinflussen.

Hat man dies getan, kopiert man ihn einfach in den HTML-Bereich von WordPress:

Und schon ist das Video in den Blogpost eingebunden.

Auch andere Dienste kann man auf diese Weise einbinden, so man deren Embed-Code findet. Bei Google Maps z.B. ist er direkt auf der Kartenansicht zu finden:

Will man einen Facebook-Like-Button einbinden, so gibt es einerseits für WordPress ein Plugin, andererseits kann man sich den Code auf dieser Website selbst erzeugen lassen.

Für andere Dienste geht es entsprechend, meist reicht einfach, nach dem Dienst und dem Wort “einbetten” oder “einbinden” zu googlen.

Vorteile und Nachteile von Embedding-Lösungen

Man stelle sich vor, dass man eine Kartenanwendung oder einen Video-Player selbst implementieren müsste. Nicht nur, dass man für ersteres die Kartendaten irgendwo herbekommen müsste, man braucht auch Programmierer. Dank Embedding kann aber nun jeder diese Anwendungen auf der eigenen Seite nutzen, ohne programmieren zu können oder Programmierer zu beschäftigen. Hinzu kommt, dass es damit auch ein leichtes ist, aus bestehenden Anwendungen relativ einfach ganz neue Anwendungen zu schaffen.

Doch es gibt auch Kritik, wie vor allem die Diskussion um den Facebook-Like-Button zeigt. Denn eines darf man nicht vergessen: Es werden Daten von Servern aufgerufen, die nicht oben in der URL-Zeile des Browsers stehen. Manche Datenschützer sehen daher das Problem, dass man damit auch keine Kontrolle mehr darüber hat, wer mitbekommt, auf welchen Seiten ein Benutzer unterwegs ist. Und je größer die Verbreitung von Embedding-Lösungen eines Anbieters, wie in diesem Falle Facebook, desto eher größer natürlich dessen Möglichkeit, Daten abzugreifen.

Da Embedding aber nun dadurch definiert ist, dass Daten von einem Drittanbieter abgerufen werden, muss man für die Zukunft genau abwägen, wie man die Vor- und Nachteile gewichtet, was dies für eine eventuelle Regulierung bedeutet und was man selber als Anbieter gegenüber seinen Nutzern verantworten will.

Dieser Artikel steht unter der CC-by-Lizenz (mehr dazu). Der Name des Autors/Rechteinhabers soll wie folgt genannt werden: CC-by-Lizenz, Autor: Christian Scholz (MrTopf) für pb21.de.