Das Teilen von Inhalten ist eine weit verbreitete Praxis. Die Verwendung von Inhalten eines anderen Erstellers auf deiner Website hat jedoch potenzielle rechtliche Auswirkungen, während das Bereitstellen großer Dateien wie Videos die Leistung deiner Website beeinträchtigen kann. Glücklicherweise bieten iFrames eine einfache Lösung für diese Probleme.
In diesem Beitrag werden wir erklären, was iFrames sind und wie man sie mit deiner WordPress-Seite verwendet.
Bereit? Lasst uns loslegen!
Was sind iFrames (Und Warum Sind Sie Nützlich)?
Ein iFrame ist eine Möglichkeit, eine Webseite in den Inhalt einer anderen Seite einzubetten. Dies geschieht mit Hilfe von HTML-Tags, der URL der externen Seite und Angaben darüber, wie das Fenster auf deiner Website erscheinen soll.
Es gibt zwei Situationen, in denen iFrames im Allgemeinen nützlich sind.
Das erste ist, wenn du Inhalte teilen möchtest, die nicht dir gehören. In den meisten Fällen wird die Einbettung von Inhalten über einen iFrame nicht als Urheberrechtsverletzung angesehen (siehe auch EU-Regelung). Daher ist es im Allgemeinen eine legale und ethischere Methode des Teilens als die meisten anderen Optionen. Außerdem kann nicht direkt auf den Code innerhalb eines iFrame zugegriffen werden. Das bedeutet, dass ein Besucher deiner Website den eingebetteten Inhalt nicht kopieren und an anderer Stelle weitergeben kann.
Der zweite Grund, warum du iFrames integrieren solltest, ist die gemeinsame Nutzung großer Dateien wie Video, Audio oder sogar Bilder. YouTube ist hier das perfekte Beispiel.
Mit einem iFrame kannst du den Inhalt einer Datei auf deiner Website anzeigen, ohne sie in deiner WordPress-Medienbibliothek hosten zu müssen. Das ist wichtig, denn diese Art von Mediendateien beanspruchen oft eine beträchtliche Menge an Speicherplatz und können sogar deine Website verlangsamen.
Indem du deine Videos auf einer Plattform wie YouTube hosten und sie dann mit iFrames auf deiner WordPress-Seite einbetten kannst, kannst du die Nachteile des direkten Hochladens auf deine Website vermeiden. Diese Technik wird dir helfen, ein ethischeres Mitglied der Online-Community zu werden und deine Website schnell und einfach zu bedienen.
Wie man iFrames Mit WordPress Verwendet (3 Methoden)
So wie es verschiedene Szenarien gibt, in denen du einen iFrame verwenden möchtest, gibt es mehrere Methoden, um ihn zu implementieren. Im Folgenden werden wir drei der gängigsten Möglichkeiten zum Hinzufügen von iFrames zu Ihrer WordPress-Seite erläutern.
1. iFrames in WordPress Manuell Hinzufügen
Der grundlegende Code zum Hinzufügen eines iFrame zu einer Seite ist ziemlich einfach. Alles, was du brauchst, sind das Öffnen und Schließen von HTML-Tags und die URL der Webseite, die du einbetten möchtest:
<iframe src="example.com"></iframe>Es gibt einige Einschränkungen in Bezug auf die Quell-URL. Erstens können iFrames nur Inhalte von Websites anzeigen, die das gleiche Hypertext Transfer Protocol wie Ihre verwenden. Mit anderen Worten, wenn deine Website HTTPS verwendet, kannst du nur Inhalte von anderen HTTPS-Sites einbetten. Ebenso kannst du bei Verwendung von HTTP nur URLs einbetten, die auch HTTP verwenden.
Darüber hinaus deaktivieren einige beliebte Websites – wie Facebook und YouTube – die manuelle iFrame-Einbettung. Wenn du versuchst, eine Seite von einer Website anzuzeigen, die iFrame-Einbettungen nicht zulässt, wird ein Fehler in deinem Fenster angezeigt:
Wenn du diese Methode verwenden kannst, ist es wichtig zu wissen, dass du deine iFrames auch an die Bedürfnisse deiner Website anpassen kannst. An dieser Stelle kommen die iFrame-Parameter ins Spiel. Einige der häufigsten sind:
- Width: Mit diesem Parameter kannst du eine bestimmte Breite für den iFrame in Pixeln festlegen.
- Height: Wie der width-Parameter bestimmt auch die height die Größe des iFrame-Fensters auf deiner Webseite in Pixeln.
- Allow: Mit diesem Parameter kannst du bestimmte Standardverhaltensweisen oder -funktionen für deinen iFrame festlegen, wie z. B. Vollbildanzeige oder Zahlungsabwicklung.
- Importance: Mit diesem Parameter kannst du angeben, wann ein iFrame geladen werden soll.
So würde der Code beispielsweise für einen iFrame mit einer Fenstergröße von 900 Pixeln x 700 Pixeln bei aktivierter Vollbilddarstellung aussehen, der nach dem Rest der Webseite heruntergeladen wird:
<iframe src="example.com" width="900" height="700" allow="fullscreen"></iframe>Im Frontend würde das iFrame dann so aussehen:
Es gibt noch weitere Parameter, die du ebenfalls verwenden kannst. Die oben aufgeführten sollten es dir jedoch ermöglichen, grundlegende iFrames für die Freigabe von YouTube-Videos oder anderen Inhalten auf deiner Website zu erstellen.
2. Verwenden von Einbettungscodes zum Erstellen von iFrames
Einige Websites haben Einschränkungen, ob du ihren Inhalt manuell in iFrames einbetten kannst. Dies kann es schwierig machen, bestimmte Arten von Inhalten wie Facebook-Posts oder YouTube-Videos anzuzeigen. Das bedeutet jedoch nicht, dass du Inhalte aus diesen Quellen nicht in iFrames anzeigen kannst.
Vielmehr musst du dazu lediglich auf die notwendigen Einbettungscodes zugreifen. Schauen wir uns an, wie das in YouTube als Beispiel funktioniert. Schau dir das Video an, das du einbetten möchtest, egal ob es deins oder das eines anderen Erstellers ist. Unterhalb des Videoplayers befindet sich ein Share-Button:
Klick auf diese Schaltfläche, und es öffnet sich ein Fenster mit den verschiedenen verfügbaren Sharing-Optionen. Eine davon ist Embed:
Wenn du die Option Embed auswählst, zeigt YouTube ein HTML-Snippet an, mit dem du das Video zu einem iFrame hinzufügen kannst. Es enthält bestimmte iFrame-Parameter, die du kopieren und verwenden kannst, wenn du willst. Andernfalls kannst du auch einfach die Quell-URL kopieren:
Wenn du den Einbettungscode verwendest, wird das Video in deinem iFrame anstelle des Fehlers angezeigt, den du sehen würdest, wenn du versuchen würdest, die Standard-URL zu verwenden.
Um es zu einer Seite oder einem Beitrag im Blockeditor hinzuzufügen, kannst du einen benutzerdefinierten HTML-Block verwenden:
Im Classic Editor musst du in den Texteditor wechseln und deinen Code an der entsprechenden Stelle hinzufügen:
Das Ergebnis sollte ein funktionierender iFrame sein:
Du kannst einem ähnlichen Prozess folgen, um einen Facebook-Post auf deiner Website einzubetten. Gehe zu dem Beitrag, den du freigeben möchtest, und klicke auf das dreipunktige Symbol oben rechts in der Ecke des Beitrags:
Wähle dann die Embed Option:
Dadurch wird ein HTML-Ausschnitt ähnlich demjenigen für das YouTube-Video angezeigt, das wir uns zuvor angesehen haben. Nochmals, die Quell-URL ist der wichtigste Teil dieses Codes, obwohl du auch die vorgegebenen Parameter verwenden kannst:
Füge diesen Code zu deiner Webseite hinzu und der Beitrag sollte ohne Probleme angezeigt werden:
Viele beliebte Social-Media-Websites, darunter LinkedIn, Instagram und Twitter, bieten auch Embed-Codes für ihre Beiträge an. Diese Option findest du normalerweise in den Einstellungen jedes einzelnen Beitrags.
3. Hinzufügen von iFrames zu WordPress mit einem Plugin
Natürlich arbeiten WordPress-Entwickler immer daran, Aufgaben wie die Einbettung von iFrames durch die Verwendung von Plugins zu vereinfachen. Es gibt zwei Möglichkeiten, die du in Betracht ziehen solltest, wenn die Einbettung externer Inhalte auf deiner Website etwas ist, was du häufig tun möchtest. Die beliebteste Lösung ist das iFrame-Plugin:
Mit diesem Plugin kannst du iFrames über Shortcodes zu deiner WordPress-Seite hinzufügen. Du kannst alle die gleichen Parameter angeben, die du auch beim manuellen Hinzufügen eines iFrame über HTML angeben würdest. Du musst dir jedoch keine Sorgen machen, dass du mit dem Code deiner Seiten direkt umgehen kannst.
Alternativ kannst du auch das Advanced iFrame Plugin ausprobieren:
Noch einmal, dieses Plugin ermöglicht es dir, iFrames über Shortcodes zu deiner Website hinzuzufügen. Es enthält jedoch auch einige zusätzliche Funktionen, wie z.B. Sicherheitscodes, um zu verhindern, dass andere Benutzer iFrames ohne deine Erlaubnis einbetten, benutzerdefinierte Stylingoptionen und mehr.
Für $20 kannst du auf eine Advanced iFrame Pro Halbjahreslizenz upgraden. Diese Version produziert responsive iFrames und ermöglicht Funktionen wie Zoomfunktion und Lazy Loading. Je nachdem, wie oft du vorhast, iFrames auf deiner Website zu verwenden, können diese Optionen den Premium-Preis wert sein.
Zusammenfassung
Es ist wichtig, dass deine Website gut und auf der richtigen Seite des Gesetzes funktioniert. iFrames hilft dir nicht nur, die Inhalte anderer auf ethische Weise zu teilen, sondern kann dir auch ermöglichen, Video- und Audiodateien anzuzeigen, ohne sie auf deiner Website hosten zu müssen. In diesem Beitrag haben wir uns drei Methoden zur Verwendung von iFrames mit WordPress angesehen:
- Integriere WordPress-Seiten und iFrames manuell.
- Verwende Einbettungscodes, um iFrames zu erstellen.
- Füge iFrames mit einem WordPress-Plugin hinzu, z.B. iFrame oder Advanced iFrame.
Hast du Fragen zu iFrames oder wie du sie auf deiner WordPress-Seite verwenden kannst? Lasst es uns im Kommentarfeld unten wissen!
Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.
Schreibe einen Kommentar