Inhalte von Facebook, Twitter, YouTube und Co. in WordPress einbetten (Anleitung)

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. 

1. Warum externe Inhalte einbetten?

Das Kapitel als Video ansehen

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.

2. So funktioniert das Einbinden in WordPress

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.

3. Die rechtliche Perspektive auf Embeds

Das Einbetten von Inhalten ist leider nicht ohne Weiteres juristisch bedenkenlos. Auf die folgenden Themen solltest du achten:

UrheberÔÇőrecht

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:

Seite ohne EmÔÇőbed (Blog Wings)

Wenn wir auf unserer Webseite keine Einbettungen nutzen, wird lediglich Google Analytics ausgef├╝hrt: 

ghostery tracker ohne embedd

Analysiert mit Ghostery.

Seite mit Embed (Blog Wings)

In diesem Artikel kommt unsere Webseite durch die Einbettungen auf acht Tracker. 

ghostery tracker mit embedds

Analysiert mit Ghostery.

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.

4. Wie werden Inhalte in WordPress eingebettet?

Das Kapitel als Video ansehen

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:

  1. Link oder HTML-Code aus Quelle kopieren
  2. Link oder HTML-Code in WordPress einf├╝gen 

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: 

youtube video in wordpress einbetten

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:

inhalt mit code in wordpress einbetten

5. Facebook Posts in WordPress einbetten

Das Kapitel als Video ansehen

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: 

facebook embedd code finden

Danach f├╝gst du den kopierten Code in den HTML-Block im WordPress Editor ein. Der Post wird dann so dargestellt:

6. Twitter Posts (Tweets) in WordPress einbetten

Das Kapitel als Video ansehen

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:

twitter tweet embedden

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.

7. Instagram Posts in WordPress einbetten

Das Kapitel als Video ansehen

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.

Hier ein Beispiel f├╝r Sinas Blog Ferndurst:

instagram embedden

F├╝ge den kopierten Text wie gewohnt in den HTML-Block im WordPress Editor ein.

Das Instagram Bild wird dann folgenderma├čen dargestellt:

8. YouTube Videos in WordPress einbetten

Das Kapitel als Video ansehen

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:

youtube embedd

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: 

youtube videos erweiterter datenschutzmodus

Alternativ besteht auch die M├Âglichkeit, ein Plugin wie WP Youtube Lyte oder "Embed videos and respect privacy" zu verwenden:

WP YouTube Lyte
WP YouTube Lyte
Preis: Kostenlos
Embed videos and respect privacy
Embed videos and respect privacy
Entwickler:
Preis: Kostenlos

 

9. Pinterest Pins in WordPress einbetten

Das Kapitel als Video ansehen

Von Pinterest k├Ânnen Profile, Boards und einzelne Pins eingebettet werden.

Das Einbetten eines  Pinterest Pins ist mit ein paar mehr Klicks verbunden:

  1. Klicke auf den Pin, den du einbetten m├Âchtest.
  2. Klicke oben in der Mitte auf die drei Punkte und w├Ąhle "Einbetten".
  3. Es ├Âffnet sich eine Seite, auf der du die Gr├Â├če des Pins w├Ąhlen kannst und nach unten navigieren musst, um zum Embed-Code zu gelangen.
  4. Zus├Ątzlich zum Embed-Code musst du auch noch den zweiten Code darunter kopieren und zum Code-Schnipsel hinzuf├╝gen:
pinterest pin embedd

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.

10. Flickr Bilder in WordPress einbetten

Das Kapitel als Video ansehen

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:

flickr embedd

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.*

11. SoundCloud in WordPress einbetten

Das Kapitel als Video ansehen

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:

soundcloud embedd

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:

12. Spotify in WordPress einbetten

Das Kapitel als Video ansehen

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":

spotify playlist embedd

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

Zusammenfassung

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. 

Bennet

Autor

Co-Founder bei Blog Wings und Online Marketing Stratege. Hat bereits Marken wie BRAVO, Cosmopolitan, InTouch und Wunderweib zu mehr Wachstum verholfen.

More...

>
Nach oben