iFrame richtig einbinden: So geht’s

Wenn Sie verschiedene Kanäle wie YouTube oder Social-Media-Accounts für Ihr Unternehmen nutzen, können Sie deren Content in Ihre Website einbinden. Für die Einbindung solcher Inhalte kommen sogenannte iFrames zum Einsatz. In diesem Artikel erfahren Sie, was iFrames sind, wie Sie diese effizient einbinden und welche Vor- und Nachteile sich aus dieser Strategie ergeben.

Wo werden iFrames eingesetzt: Beispiele

iFrames finden bei ganz unterschiedlichen Prozessen und Funktionen Anwendung. Besonders gängig ist es, Social-Media-Posts in den eigenen Webauftritt einzubetten. So machen Sie auf bestimmte Inhalte aufmerksam, regen interessante Diskussionen an oder laden Ihre Besucher und Besucherinnen dazu ein, Ihren Social-Media-Kanälen zu folgen oder Leads zu hinterlassen.

Ein ähnliches Ziel erreichen Sie mit der Einbindung von Videos auf Ihrer Internetseite. Beispielsweise können Sie auf einem YouTube-Kanal Videos posten und diese auf Ihrer Website präsentieren.

Ebenfalls gängig ist es, bestimmte Karten – speziell als Google Maps iFrame – auf dem eigenen Internetauftritt zu präsentieren. Auf diese Weise erleichtern Sie es Ihrer Zielgruppe beispielsweise, Sie und Ihre Filialen zu finden. Des Weiteren bieten sich Inlineframes an, um Widgets auf dem eigenen Webauftritt zu nutzen.

Wenn Sie Ihre Besucher und Besucherinnen beispielsweise über das Wetter oder Börsenkurse auf dem Laufenden halten möchten, ist dieses Vorgehen ideal. Nicht zuletzt bieten sich iFrames für die Einbindung von Applikationen wie Terminkalendern oder Bestellformularen für die Generierung von Leads an.

iFrame einbinden: So klappt’s

Grundsätzlich lässt sich ein iFrame mit ganz unterschiedlichen Computersprachen und Systemen und für diverse Funktionen und Softwares nutzen. Je nach Variante kommt hierbei entweder eine HTML-Zeile oder CSS in Quellcode zum Einsatz. In diesem Zusammenhang spricht man häufig vom sogenannten iFrame Code. Unter HTML wird der Code beispielsweise mittels eines HTML-Tags eingebettet. Das sieht dann wie folgt aus:

Bei der Einbindung von HTML-iFrame können Sie auf unterschiedliche Attribute zurückgreifen. Beispielsweise wird iFrame scr genutzt, um die URL einer Zielquelle einzubinden. Das Attribut „width“ gibt die Breite des Frames in Prozent und Pixeln an, wohingegen das Attribut „height“ die Höhe bezeichnet. Mittels „frameborder“ haben Sie die Möglichkeit, die Breite des Frame-Rahmens zu definieren.

Ein typisches iFrame-Beispiel hätte dann folgende Form:

<iframe src=“https://www.eology.de/“ height=“600″ width=“800″ name=“eology Website“></iframe>

Responsive iFrame gestalten

Grundsätzlich ist es möglich, responsive iFrame zu nutzen, um die dargestellten Inhalte je nach verwendetem Endgerät und System anzupassen. Hierbei ist es zunächst wichtig, die Breite des Inlineframes mittels CSS zu überschreiben. Anschließend passt sich die Breite immer dem Container an.

Die Höhe des Rahmens muss nun mittels Container-DIV und „padding-bottom“ an die Breite angepasst werden. Verändert sich die Breite des Containers, verändert sich automatisch die Höhe des iFrames. Die hierfür notwendigen Attribute sind iFrame height und iFrame width.

Vor- und Nachteile von iFrame

Mit HTML-iFrames gehen zahlreiche Vor- und Nachteile einher, die Sie im Folgenden kennenlernen.

Vorteile von iFrame

iFrames lassen sich schnell und einfach nutzen und erzielen somit nach kürzester Zeit sinnvolle und messbare Effekte. Hierfür sind keine nennenswerten Programmierkenntnisse vonnöten. Somit können selbst Einsteiger und Einsteigerinnen in der Webgestaltung wunderbar mit HTML-Frames umgehen und die Elemente für ihre Zwecke einsetzen.

Sie haben über iFrames die Möglichkeit, Ihrer Zielgruppe zusätzliche Inhalte beziehungsweise Elemente mit Mehrwert zu präsentieren. Sie werden somit als kompetenter, großzügiger und zielgruppenorientierter Anbieter beziehungsweise Anbieterin wahrgenommen und erzeugen eine hohe Bindung zu Ihrer Kundschaft.

Da sich HTML-Frames leicht einsetzen lassen, müssen Sie für die Webgestaltung deutlich weniger Budget einplanen. Es ist nicht erforderlich, Dienstleistende mit der Webgestaltung zu beauftragen, da Sie viele Aufgaben und die entsprechenden Lösungen selbst übernehmen können.

Außerdem ist es über dynamische Elemente, die sich besonders gut über iFrames einbinden lassen, leicht möglich, Aufmerksamkeit zu gewinnen und für Gäste interessant und ansprechend zu sein. Auf diesem Weg verbessern Sie die User Experience und haben gute Chancen auf steigende Umsätze.

Nachteile von iFrame

Ein Nachteil von iFrames besteht darin, dass kein Datenaustausch zwischen Dokumenten möglich ist. Das bedeutet, dass ein Formular, das über ein iFrame eingebettet wird, in dem Fenster zur anderen Website ausgefüllt wird, nicht aber auf Ihrer Website.

Ein weiterer Nachteil ist, dass CSS-Anpassungen immer nur Auswirkungen auf den Webauftritt selbst haben. Die eingebetteten Inhalte werden hierdurch nicht angepasst.

Ebenfalls ungünstig ist, dass die Crawler der Suchmaschinen die Inhalte von iFrames ignorieren. Diese haben somit keine Effekte auf Ihr Suchmaschinenranking.

Nicht zuletzt ist es möglich, dass gewisse Inhalte der iFrames von der Zielwebsite ausgelesen werden. Achten Sie daher unbedingt darauf, dass Sie bei der Nutzung von iFrames DSGVO-konform arbeiten.

Alternativen zu iFrame

Grundsätzlich gibt es auch andere Möglichkeiten, um Inhalte in eine Website einzubinden. Beispielsweise sind Hyperlinks eine iFrame-Alternative, um auf einen anderen Webauftritt zu verweisen.

Ebenso besteht die Möglichkeit, JavaScript-Code für die Einbindung des Contents zu verwenden. Des Weiteren bietet HTML das „object“- und „embed“-Attribut, mit denen sich ebenfalls Inhalte einbetten lassen.

iFrame als einfache Lösung zum Einbinden von Elementen

Eine große Stärke von iFrames besteht darin, dass Sie Content und Funktionen schnell und einfach in Ihren Webauftritt integrieren können. Sie bieten Ihren Gästen somit einen echten Mehrwert und steigern Ihren Ruf als Experte oder Expertin in Ihrem Bereich.

Angenehm ist, dass Sie beziehungsweise Ihre Mitarbeitenden die Möglichkeiten von iFrames ohne große Programmierkenntnisse nutzen und mit unterschiedlichen Sprachen und Quellcodes kombinieren können. Hiervon profitieren Ihr Vertrieb, Ihr Marketing und Ihre Kundenbeziehungen gleichermaßen.

Titelbild: Courtney Hale / iStock / Getty Images Plus