iFrame – So kommt externer Inhalt in den Artikel

Was nutzt der tollste digitale Inhalt, der mit einem der ungezählten Tools im Netz (HIER eine Übersicht ausgewählter Werkzeuge) erstellt wurde, wenn man ihn nicht in den Artikel im Redaktionssystem oder im eigenen Blog einbinden kann. Man kann die Leser entweder mittels Link von der eigenen Seite weg und zum externen Inhalt führen. Oder aber, man nutzt einen Embed-Code in Form eines iFrames. Dieser Code ermöglicht es, externen Inhalt auf der eigenen Seite anzuzeigen.

ACHTUNG! Wer nur schnell einen Code bauen möchte, kann an dieser Stelle zum Ende des Artikels scrollen. Wer wissen will, wie das Ganze funktioniert, sollte weiterlesen.

So funktioniert der Code

Im Prinzip funktioniert ein iFrame so, als ob man ein Loch in die eigene Seite schneiden würde, um in dem entstandenen Rahmen eine andere Seite anzeigen zu lassen. Das hier ist ein Embedcode:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82428.8078832638!2d11.51155810670125!3d49.9404451558731!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a1a2c5a82d0319%3A0xda86df09d2d1e734!2sBayreuth!5e1!3m2!1sde!2sde!4v1516264865232" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Wir dieser Code in eine Seite eingebaut, sieht das so aus:

Dieser Artikel hat ein „Guckloch“ durch das der Leser auf eine andere Webseite, in diesem Fall Google Maps, blicken kann.

Der klassische Iframe sieht immer gleich aus:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82428.8078832638!2d11.51155810670125!3d49.9404451558731!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a1a2c5a82d0319%3A0xda86df09d2d1e734!2sBayreuth!5e1!3m2!1sde!2sde!4v1516264865232" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  • <iframe

    Beginn des Code-Schnipsels 

  • src=“ “ 

    src steht für Source und weist den Computer an, den Inhalt aus dieser Quelle zu holen. Der Link steht dann zwischen den beiden Anführungszeichen

  • width=“500″ 

    Dieser Teil des Code-Schnipsels gibt die Breite des angezeigten Inhalts an. Dieser muss entsprechend der Seitenbreite angepasst werden. Wenn man keine Ahnung hat, wie breit eine Seite ist, muss man sich an die passende Größe herantasten und ein bisschen rumprobieren.

  • height=“350″

    Hier wird die Höhe definiert. 

  • frameborder=“0″ 

    Hier wird der Umlauf/ Rahmen um den Iframe definiert. Nichts ändern, alles so lassen, wie es ist.

  • allowfullscreen=“allowfullscreen“> 

    Diesen Teil gibt es nicht bei allen iFrames. Google bietet hier die Option, die Karten im Vollbild anzuzeigen. 

  • </iframe> 

    Ende des iFrames

 

Wir bauen uns einen iFrame

Auf den ersten Blick ist dieses Code-Wirrwarr etwas irritierend, aber: ES IST TOTAL EINFACH! Viele Tools bieten die Option an, einen iFrame zu generieren. Meist versteckt sich dieser unter der Option „Teilen“. Dort kann man den iFrame kopieren und auf der eigenen Seite einbauen. Funktioniert das nicht, muss man sich selbst einen iFrame basteln.

Dazu nehmen wir diesen Code:

<iframe src=“HIER KOMMT DIE URL REIN“ width=“500“ height=“350“ frameborder=“0″></iframe> 


Als nächstes kopieren wir die Webadresse des Inhaltes, den wir einbinden wollen in das Feld HIER KOMMT DIE URL REIN. 

Anschließend wird der gesamte Code-Schnipsel kopiert. Bei WordPress muss man nun im Artikel rechts oben con VISUELL auf TEXT wechseln, um in die HTML-Ansicht zu kommen. Entsprechende Felder gibt es auch bei allen gängigen anderen CMS- und Redaktionssystemen. An der gewünschten Stelle kann der Code dann eingefügt werden. Damit er auch passgenau in der Seite sitzt kann man nun mittels width=“500“ die Breite und mit Hilfe von height=“350“ die Höhe einstellen. 

Viel Spaß beim Testen!