1. Einleitung
1.1 Vorteile von iFrames
Ein iFrame ist ein HTML-Element, mit dem fremder Inhalt über einen Rahmen (eng. frame) in eine Webseite schnell und einfach integriert wird. Nachdem das iFrame einmal integriert wurde, ist kein weiteres Zutun notwendig. Denn der Inhalt aktualisiert sich automatisch. Dies erspart Ihnen die kreative Arbeit, erleichtert die Programmierung und verringert den Zeitaufwand.
1.2 Voraussetzungen
Für die Einbindung bereitgestellter Webseiteninhalte, benötigen Sie grundlegende Kenntnisse in HTML sowie der Webseitenverwaltung, die Möglichkeit, den Quellcode der Seiten zu ändern, ggf. einen FTP-Zugang, ein FTP-Client und einen HTML-Editor. Sollten Sie diese Begriffe nicht kennen, benötigten Sie Unterstützung Ihres Webmasters bzw. einer Person mit entsprechenden Kenntnissen.
2. Welche Inhalte bieten wir Ihnen an?
2.1 Einbindung eines Banners
Bei der Einbindung eines Banners – in unserem Fall ein Philips Hearing Solutions Banner – wird eine Slideshow, bestehend aus mehreren Bannern mit aktuellen Inhalten, angezeigt.
2.2 Einbindung einer Seite
Bei der Einbindung einer Seite werden aktuelle Inhalte – in unserem Fall eine Seite über Philips HearLink, bestehend aus Bild, Text und Video, dargestellt. Vorteil der Einbindung einer Seite sind die umfangreichen Informationen über die Philips Hörgeräte, das Zubehör und weitere Inhalte wie die neuesten Imagevideos oder Kampagnen.
3. Einbindung des Banners in Ihre Webseite
Die Einbindung des Banners in Ihre Webseite erfolgt durch die Nutzung eines iFrames. Dies ist eine Art Rahmen (engl. frame) auf Ihrer Webseite, in dem Fremdinhalt angezeigt wird – in unserem Fall ein Philips Hearing Solutions Banner mit mehreren Slides. Das iFrame wird in Ihre Webseite eingefügt, indem an der gewünschten Stelle ein Codesnippet im HTML-Quelltext implementiert wird. Dies erfolgt auf einer statischen Webseite mittels FTP-Zugang sowie eines HTML-Editors oder im Backend Ihres Content Management Systems (z.B. WordPress, Squarespace, Typo 3 etc.).
3.1 Statische HTML-Seiten
Sie benötigen Ihren FTP-Zugang auf Ihre Webseite, einen FTP-Client und einen HTML-Editor. Viele HTML-Editoren verfügen bereits über einen eingebauten FTP-Client. Mittels des FTP-Clients stellen Sie eine Verbindung zu Ihrem Webspace her und können auf die einzelnen HTML-Dateien zugreifen. Steht die Verbindung zu Ihrem Webspace, öffnen Sie mit Ihrem HTML-Editor die HTML-Datei, auf der die Banner implementiert werden sollen. Gehen Sie nun an die Stelle, an der der Banner erscheinen soll und geben am besten per „Kopieren“ und „Einfügen“ folgendes HTML-Codesnippet ein:
<div> <iframe src="https://phs-iframe.com/banner" style="border: 0px; width: 1000px; height: 270px; margin: 0 0 0 0%;" scrolling="no"> </iframe> </div>
Hierbei wird ein iFrame mit einer Größe von 1000 x 270 px erstellt. In dieser Größe wird der Banner dann auf Ihrer Webseite dargestellt. Sie können die Breite des iFrames auch der Größe Ihrer Webseite anpassen. Hierfür ändern Sie bitte folgende Parameter im Codesnippet:
width: 1000 px; (Breite des iFrames in Pixeln)
height: 270 px; (Höhe des iFrames in Pixeln)
Fügen Sie hier die gewünschte Breite des iFrames ein. Achten Sie darauf, die Höhe entsprechend des Seitenverhältnisses (Ratio) anzupassen. In unserem Beispiel beträgt das Seitenverhältnis 1:0,27. D.h. bei 1000 px Breite benötigen wir eine Höhe von exakt 270 px, bei einer Breite von 800 px entsprechend eine Höhe von 216 px (800 px x 0,27=216 px).
Speichern Sie nun das Dokument ab und laden es mit dem FTP-Client wieder in Ihren Webspace. Denken Sie daran, beim ersten Test einen Reload der Webseite mittels „Strg+R“ oder „Strg+F5“ vorzunehmen, um eventuell im Browser-Cache liegende alte Webseitendaten zu löschen.
3.2 Content Management System
Öffnen Sie im Backend Ihres Content Management Systems die Seite, auf der Sie das Banner einbinden möchten. Fügen Sie an der gewünschten Stelle unter Nutzung des „reinen Quelltext einfügen“-Tools (Bezeichnung kann je nach Content Management System abweichen) das folgende Codesnippet ein:
<div> <iframe src="https://phs-iframe.com/banner" style="border: 0px; width: 1000px; height: 270px; margin: 0 0 0 0%;" scrolling="no"> </iframe> </div>
Hierbei wird ein iFrame mit einer Größe von 1000 x 270 px erstellt. In dieser Größe werden die Banner dann auf Ihrer Webseite dargestellt. Sie können die Breite des iFrames auch der Größe Ihrer Webseite anpassen. Hierfür ändern Sie bitte folgende Parameter im Codesnippet:
width: 1000 px; (Breite des iFrames in Pixeln)
height: 270 px; (Höhe des iFrames in Pixeln)
Fügen Sie hier die gewünschte Breite des iFrames ein. Achten Sie darauf, die Höhe entsprechend des Seitenverhältnisses (Ratio) anzupassen. In unserem Beispiel beträgt das Seitenverhältnis 1:0,27. D.h. bei 1000 px Breite benötigen wir eine Höhe von exakt 270 px, bei einer Breite von 800 px entsprechend eine Höhe von 216 px (800 px x 0,27=216 px).
Speichern Sie nun das Dokument ab. Denken Sie daran, beim ersten Test einen Reload der Webseite mittels „Strg+R“ oder „Strg+F5“ vorzunehmen, um eventuell im Browser-Cache liegende alte Webseitendaten zu löschen.
3.3 Dynamische Größe des iFrames
Für die dynamische Größenanpassung des Banners auf Ihrer Webseite fügen Sie bitte, wie oben beschrieben, folgenden HTML-Codesnippet in den Quellcode ein:
<div> <iframe src="https://phs-iframe.com/banner" style="border: 0px; width: 100%; min-height: 270px; margin: 0 0 0 0%;" scrolling="no"> </iframe> </div>
Info: Um ein exaktes Breiten-Höhen-Verhältnis auch bei dynamischer Größe zu erhalten (dies optimiert die Darstellung auf verschiedenen Endgeräten), benötigen Sie ein entsprechendes JavaScript / Plug-in auf Ihrer Webseite, welches dies automatisch in Echtzeit anpasst. Hierfür bedarf es in jedem Fall erweiterte Kenntnisse in HTML / CSS / JavaScript. Plug-in Beispiel: „CSS Ratio“.
4. Einbindung einer Seite
Die Einbindung der Seite in Ihre Webseite erfolgt durch die Nutzung eines iFrames. Dies ist eine Art Rahmen (engl. frame) auf Ihrer Webseite, in dem Fremdinhalt angezeigt wird – in unserem Fall vordefinierte und aktuelle Inhalte zu Philips Hearing Solutions. Das iFrame wird in Ihre Webseite eingefügt, indem an der gewünschten Stelle ein Codesnippet im HTML-Quelltext implementiert wird. Dies erfolgt auf einer statischen Webseite mittels FTP-Zugang sowie eines HTML-Editors oder im Backend Ihres Content Management Systems (z.B. WordPress, Squarespace, Typo 3 etc.).
4.1 Statische HTML-Seiten
Sie benötigen den FTP-Zugang Ihrer Webseite, einen FTP-Client und einen HTML-Editor. Viele HTML-Editoren verfügen bereits über einen eingebauten FTP-Client. Mittels des FTP-Clients stellen Sie eine Verbindung zu Ihrem Webspace her und können auf die einzelnen HTML-Dateien zugreifen. Steht die Verbindung zu Ihrem Webspace, öffnen Sie mit Ihrem HTML-Editor die HTML-Datei, auf der der Inhalt implementiert werden soll. Gehen Sie nun an die Stelle, an der der Inhalt erscheinen soll und geben am besten per „Kopieren“ und „Einfügen“ folgendes HTML-Codesippet ein:
<iframe src="https://phs-iframe.com/content" width="100%" height="1200px;" style="border: 0px"> </iframe>
Hierbei wird ein iFrame mit einer Größe von 100 % der Breite Ihrer Webseite und einer Höhe von 1200 px erstellt. In dieser Größe wird der Inhalt dann auf Ihrer Webseite dargestellt. Sie können die Breite des iFrames auch individuell in der Größe anpassen. Hierfür ändern Sie bitte folgende Parameter im Codesnippet:
width: 100 %; (dynamische Breite des iFrames in % der Breite Ihrer Webseite) oder alternativ
width: 900 px; (feste Breite des iFrames in Pixeln)
height: 1200 px; (feste Höhe des iFrames in Pixeln)
Speichern Sie nun das Dokument ab und laden es mit dem FTP-Client wieder in Ihren Webspace. Denken Sie daran, beim ersten Test einen Reload der Webseite mittels „Strg+R“oder „Strg+F5“ vorzunehmen, um eventuell im Browser-Cache liegende alte Webseitendaten zu löschen.
4.2 Content Management System
Öffnen Sie im Backend Ihres Content Management Systems die Seite auf der Sie den Seiteninhalt einbinden wollen. Fügen Sie an der gewünschte Stelle unter Nutzung des „reinen Quelltext einfügen“-Tools (Bezeichnung kann je nach Content Management System abweichen) das folgende Codesnippet ein:
<iframe src="https://phs-iframe.com/content" width="100%" height="1200px;" style="border: 0px"> </iframe>
Hierbei wird ein iFrame mit einer Größe von 100 % Breite Ihrer Webseite und einer Höhe von 1200 px erstellt. In dieser Größe wird der Inhalt dann auf Ihrer Webseite dargestellt. Sie können die Breite des iFrames auch individuell in der Größe anpassen. Hierfür ändern Sie bitte folgende Parameter im Codesnippet:
width: 100 %; (dynamische Breite des iFrames in % der Breite Ihrer Webseite) oder alternativ
width: 900 px; (feste Breite des iFrames in Pixeln)
height: 1200 px; (feste Höhe des iFrames in Pixeln)
Speichern Sie nun das Dokument ab. Denken Sie daran, beim ersten Test einen Reload der Webseite mittels „Strg+R“ oder „Strg+F5“ vorzunehmen, um eventuell im Browser-Cache liegende alte Webseitendaten zu löschen.