Du bist bereits Blogger?
Dann ist unser Partnerprogramm genau das richtige für dich!
von Bennet
Ich durfte bereits für Marken wie BRAVO und Cosmopolitan arbeiten und zeige dir mit Blog Wings, wie du schnell und sicher einen eigenen Blog erstellst und erfolgreich ausbaust (mehr dazu).
Lesezeit: 5 Minuten
Das Einbetten externer Inhalte erfreut sich immer größerer Beliebtheit, weil Embeds eine Webseite auf einfache Art und Weise bereichern können.
In diesem Artikel lernst du alles, was du als Anfänger über WordPress Einbettungen wissen musst und wie du die Formate von Facebook, Twitter, Instagram, Youtube, Pinterest, Spotify und Co. integrierst.
Das Einbetten (embedden) externer Inhalte, wie z. B. Posts von Facebook und Twitter, hat eine ganze Reihe von Vorteilen:
Zum einen kannst du deine WordPress Beiträge und WordPress Seiten mit vielen weiteren spannenden Inhalten anreichern. Während du ohne Embed stets zu der jeweiligen Quelle verlinken müsstest, hältst du den Besucher mithilfe der Einbettung auf deiner Webseite.
Für deinen Besucher bedeuten die Embeds ebenfalls Mehrwert und Komfort. Er findet die Informationen, die er sucht, an einem Ort und muss nicht noch eine weitere Seite laden.
Als Websitebetreiber und Blogger bietet sich dir die Möglichkeit, neue Formate zu kreieren und mit deinen Besuchern zu teilen: Plötzlich kannst du zum Beispiel deine persönliche Playlist, deine Lieblingslieder oder aggregierte Inhalte veröffentlichen.
Außerdem kannst du deine eigenen Kanäle promoten, indem du nicht nur Links zu den Kanälen teilst, sondern subtil und mit den Inhalten aus den Channels überzeugst. Schau dir zum Beispiel mal diesen eingebetteten Facebook-Post an:
Ein großer Player, der zu MySpace-Zeiten besonders davon profitierte, dass Einbettungen möglich wurden, war YouTube. Das Videoportal konnte in seiner Anfangszeit Dank seiner Embeds extrem an Popularität gewinnen.
In den meisten Fällen können Links aus den Quellen direkt eingefügt und als Einbettung dargestellt werden. In anderen Fällen funktioniert die Einbettung über so genannte Iframes.
Ein Iframe ist ein unabhängiger HTML-Code, der in deiner Webseite eingebettet werden kann und Inhalte von anderen Webseiten anzeigt.
Du kannst dir das ganze als Rahmen (engl. Frame) bzw. Fenster vorstellen, die auf deiner Webseite entstehen, und in denen der Inhalt der anderen Web-Quelle angezeigt wird.
Der Inhalt wird aber nicht auf deiner Webseite gehostet, sondern nach wie vor von der Quelle bereitgestellt. Das ist besonders aus rechtlicher Sicht relevant.
Der Quellcode eines Iframes sieht zum Beispiel so aus:
<iframe width="560" height="315" src="https://www.youtube.com/embed/-Xf5R7fCozM" frameborder="0"allowfullscreen></iframe>
Jedes der einzelnen Elemente in diesem Code definiert eine bestimmte Variable:
Code | Funktion |
---|---|
iframe | Gibt an, dass es sich bei diesem HTML-Code um ein Iframe handelt. |
width | Definiert die Breite des Iframes in Pixel. |
height | Definiert die Höhe des Iframes in Pixel. |
src | Definiert die Quelle des Iframes. |
frameborder | Definiert, ob das Iframe in einem optischen Rahmen dargestellt wird. |
allowfullscreen | Ermöglicht, das Video auch auf dem gesamten Bildschirm darzustellen. |
Im Optimalfall stellt die Web-Quelle dir den Embed-Code mit Standardeinstellungen bereit, sodass du keine eigenen Anpassungen vornehmen musst.
Das Einbetten von Inhalten ist leider nicht ohne Weiteres juristisch bedenkenlos. Auf die folgenden Themen solltest du achten:
Urheberrecht
Die deutsche Rechtsprechung bleibt in Online Angelegenheiten leider oft nur sehr vage.
Generell sei das Einbetten von Inhalten rechtskonform, da der Urheber den Inhalt mit der Veröffentlichung im Web ohnehin schon öffentlich zugänglich gemacht hätte.
Wichtig sei im Sinne des Urheberrechts, dass bei der Einbettung von Inhalten klar zu erkennen ist, dass es sich um ein Embed handelt und der Inhalt nicht von der Webseite selbst bereitgestellt wird.
Außerdem darf der Inhalt nicht abgewandelt werden, sondern muss als Original zur Verfügung stehen.
Weitere Informationen dazu, findest du zum Beispiel hier bei ggr-law.com und bei AllFacebook.*
Datenschutz
Da Einbettung zu meist über Iframes realisiert werden, bringen viele Embedds auch ihr webseiteneigenes Tracking mit auf deine Seite.
Allein in diesem Beitrag werden gerade acht Tracker ausgeführt, wo sonst weitaus weniger arbeiten:
Die hohe Anzahl der Embeds sorgt nicht nur für höhere Ladezeiten (2,3. Sek vs. 33,6 Sek.), sondern auch für ein erhöhtes (datenschutz)rechtliches Risiko: Jedes der Trackings tauscht Daten aus und muss daher von deiner Datenschutzerklärung abgedeckt werden.
"Wenn du eine Einbettung nutzt, stelle sicher, dass du einen Passus zu der Quelle in deiner Datenschutzerklärung einbaust."
Stelle außerdem auch sicher, dass du einen Cookie-Hinweis nutzt, der Besucher darauf hinweist, dass hier Daten ausgetauscht werden.
Hier findest du einen allgemeinen Guide zu rechtlichen Themen für Blogger.
Das Einbetten von Inhalten aus gängigen Quellen wie YouTube, Facebook, Instagram, Twitter usw. wird vom WordPress-Editor unterstützt.
Genereller Vorgang beim Einbetten
Der Vorgang beim Embedden ist generell immer gleich:
Inhalte mithilfe von Links einbetten
Viele Inhalte können mit einfachen Links in WordPress eingebettet werden. Dazu fügt man im Editor einen Block hinzu, wählt "Einbettungen" und dann die Quelle, die genutzt werden soll. Danach muss noch nur der Link in das entsprechende Feld kopiert werden:
Inhalte mithilfe von HTML-Code einbetten
Inhalte können auch via HTML-Code eingebettet werden. Dazu wählst du den Block "HTML" in "Formatierung" und fügst den HTML-Code dort ein. Der Inhalt erscheint dann nicht direkt im Editor, sondern wird nur als umrahmter Kasten dargestellt, kann aber in der Vorschau angezeigt werden:
Um den Embed-Code von Facebook Posts zu finden, klickst du oben rechts am Facebook Post auf die drei Punkte und wählst dann "Einbetten" aus.
Darauf folgend öffnet sich ein Dialog, in dem du den HTML-Code zum Einbetten des Posts herauskopieren kannst:
Danach fügst du den kopierten Code in den HTML-Block im WordPress Editor ein. Der Post wird dann so dargestellt:
Tweets werden ähnlich embedded wie Facebook Posts:
Klicke oben rechts an dem Tweet auf den kleinen Pfeil und anschließend auf "Tweet einbetten".
Danach öffnet sich ein Fenster, in dem du den Embed-Code findest und kopieren kannst:
Füge den kopierten Text wie gewohnt in den HTML-Block im WordPress Editor ein.
Hier findest du weitere Infos von Twitter zum Einbetten von Tweets.
Um Instagram Posts einzubetten, öffne die Desktop-Variante von Instagram. Suche dann das Profil, von dem du einen Post nutzen willst und navigiere zum gewünschten Bild.
Klicke auf das Bild und unten rechts auf die drei Punkte unter den Kommentaren. Danach wählst du "Einbetten" und kopierst den Embed-Code, der dir darauf folgend angezeigt wird.
Füge den kopierten Text wie gewohnt in den HTML-Block im WordPress Editor ein.
Das Instagram Bild wird dann folgendermaßen dargestellt:
Sehr häufig werden YouTube Videos in WordPress eingebunden. Um den HTML-Code für die Einbettung zu extrahieren, navigiere zum Video, das du nutzen möchtest.
Klicke nun rechts unter dem Video auf "Teilen" und dann, in dem sich öffnenden Dialog unten rechts, auf "Einbetten".
Im nächsten Fenster kannst du oben rechts den Embed-Code für das Video finden.
Optional kannst du auch eine Reihe von Einstellungen vornehmen und den Code dann kopieren:
Es besteht zusätzlich die Möglichkeit, Playlisten einzubetten:
YouTube datenschutzkonform einbetten
Um YouTube-Videos datenschutzkonform einzubetten, solltest du beim Kopieren des Embed-Codes zusätzlich "Erweiterten Datenschutzmodus aktivieren." anwählen:
Alternativ besteht auch die Möglichkeit, ein Plugin wie WP Youtube Lyte oder "Embed videos and respect privacy" zu verwenden:
Von Pinterest können Profile, Boards und einzelne Pins eingebettet werden.
Das Einbetten eines Pinterest Pins ist mit ein paar mehr Klicks verbunden:
Füge den kopierten Text wie gewohnt in den HTML-Block im WordPress Editor ein.
Der Pinterest Pin wird dann folgendermaßen dargestellt:
Pinterest stellt gleich einen ganzen Widget-Builder bereit, über den sich die unterschiedlichen Formate erstellen lassen.
Wähle das Bild, das du von Flickr einbinden möchtest und klicke unten rechts auf den Pfeil.
Darauf folgend öffnet sich ein Fenster, in dem du deinen Embed-Code findest und noch einige Einstellungen, wie z. B. die Größe des Bildes, anpassen kannst:
Den HTML-Code kannst du dann in den HTML-Block im WordPress Editor einfügen.
Das Bild wird wie ein normales Bild in deiner WordPress Webseite oder deinem Blog dargestellt. Mit der oben erörterten rechtlichen Perspektive ist das nicht ganz risikolos und definitiv streitbar. Achte daher immer auf die angegebenen Nutzungsrechte und Lizenzen und inwiefern das Bild verwendet werden darf.*
Um ein Lied von SoundCloud einzubetten, navigiere zum Song. Klicke in der Mitte unter dem Titel auf "Teilen" und in dem sich öffnenden Fenster auf "Einbetten".
Dort kannst du einige Anpassungen vornehmen und den Code herauskopieren:
Füge den Code mit dem HTML-Block im WordPress Editor in deinen Beitrag oder deine Seite ein.
Das SoundCloud Code-Schnipsel wird folgendermaßen dargestellt:
Bei Spotify können einzelne Lieder, Künstler und Playlists bzw. Alben eingebettet werden.
Klicke dazu in dem Objekt, das du einbetten möchtest, auf die drei Punkte neben dem Play- bzw. Folgen-Button.
Navigiere dann auf "Teilen" und wähle "Code zum Einbetten kopieren":
Den kopierten Code kannst du in den HTML-Block im WordPress Editor einfügen.
Je nach Format unterscheidet sich die Darstellung:
Song
Künstler
Playlist
Wie du siehst, bieten viele bekannte Online Portale die Möglichkeit, ihre Inhalte in WordPress einzubetten. Nutze diese, um deine eigenen Kanäle bekannter zu machen oder deine Inhalte mit noch mehr Mehrwert für eine Leser anzureichern.
Achte dabei auf den rechtlichen Rahmen und das Urheberrecht des Verfassers.
Weitere spannenden Infos zum Thema "Embeds"
Hat dir dieser Artikel geholfen? Lass es uns in den Kommentaren wissen!
*Bitte beachte, dass wir keine Juristen sind. Unsere Inhalte sind sorgfältig recherchiert und mit viel Leidenschaft zusammengestellt, doch wir übernehmen keine Haftung für die angegebenen Informationen.
Autor
BENNET POLENZ
Co-Founder bei Blog Wings und Online Marketing Stratege. Hat bereits Marken wie BRAVO, Cosmopolitan, InTouch und Wunderweib zu mehr Wachstum verholfen.
Weitere spannende Magazin-Artikel
More...
Sitzung abgelaufen
Bitte melde dich erneut an. Die Anmelde-Seite wird sich in einem neuen Fenster öffnen. Nach dem Anmelden kannst du das Fenster schließen und zu dieser Seite zurückkehren.