Haben Sie sich schon einmal gefragt, wie ein YouTube-Video so schnell in fast jeder beliebigen Website eingebettet werden kann? Wie Sie sich durch ein mehrseitiges Formular klicken können, aber immer auf der gleichen Seite mit der gleichen URL bleiben?
Dahinter stecken sogenannte iframes. Wir erklären im Folgenden, was iframes sind, warum sie in vielen Lebenslagen nützliche kleine Helfer sind und wie sie sogar Crowdsourcing erleichtern können.
Was ist ein iframe?
„iframe“ ist die abgekürzte Form von „inline frame“ und bezeichnet ein Element im body-Bereich einer Webseite, das von den restlichen Seiteninhalten separiert ist. Weder beeinflussen Änderungen an den Seiteninhalten das iframe noch wirken sich Änderungen am iframe auf die restlichen Inhalte aus. Beide Inhalte werden von Browsern separat gerendert. Ein iframe können Sie durch verschiedene Attribute der Programmiersprachen HTML und CSS anpassen.
Ziel eines iframes ist es, Fremdinhalte aus beliebigen Quellen schnell einzubinden. Dies können beispielsweise Videos von Video-Plattformen, Formulare, Google-Maps-Inhalte oder andere externe Widgets sein. Wenn Sie diese Inhalte aus anderen Quellen richtig einsetzen, verbessern Sie die Nutzererfahrung signifikant – und das ohne den großen Aufwand, den eine API mit sich bringt.
Wie ist ein iframe aufgebaut?
Um ein iframe in Ihre Website einzubinden, bedarf es grundsätzlich nur einiger rudimentärer HTML-Kenntnisse. Sie müssen die Browser nur wissen lassen, aus welcher Quelle sie die Inhalte des iframes laden können, und bestimmen zusätzlich, wie das Layout des iframes auf Ihrer Seite aussehen soll.
Im Folgenden stellen wir Ihnen die wichtigsten Attribute vor, die bei der Einbindung eines iframes eine Rolle spielen.
Als Beispiel verwenden wir folgenden Code mit einigen der häufigsten Attribute:
<iframe src=“https://www.crowdguru.de/ “ title=“Crowd Guru Startseite“ width=“640″ height=“360″ align=“left“ scrolling=“yes“ frameborder=“0″ sandbox></iframe>
Quelle des iframes
Als Quelle fungiert in diesem Beispiel der Codeschnipsel src=“https://www.crowdguru.de/“. Den Browsern teilen Sie mit, dass die Inhalte dieser Quelle eingebettet werden sollen. In unserem Beispiel würden Sie die Startseite von Crowd Guru auf einer beliebigen Website einbinden.
Titel des iframes
Wenn Sie dem iframe einen Namen geben, erleichtern Sie Nutzern und Bots die Einordnung des iframes. Je eindeutiger er den iframe beschreibt, desto besser. Der zugehörige Code-Schnipsel sieht folgendermaßen aus: title=“Crowd Guru Startseite“.
Attribute für das Layout eines iframes
Mit folgenden Attributen beeinflussen Sie das Layout eines iframes:
- width: Die Breite des iframes in Pixeln.
- height: Die Höhe des iframes in Pixeln.
- align: Darüber bestimmen Sie, wie das iframe im Verhältnis zu den restlichen Inhalten platziert ist. Bei align=“left“ laufen die Inhalte rechts am iframe vorbei, bei align=“right“ umgekehrt.
- scrolling: Sollten Breite und Höhe des iframes nicht ausreichen, um alle Inhalte anzuzeigen – etwa bei ausführlichen Formularen –, können Sie das Scrollen innerhalb des iframes durch scrolling=“yes“ ermöglichen.
- frameborder: Um das iframe optisch von den restlichen Inhalten abzugrenzen, können Sie einen Rahmen anzeigen lassen. Bei frameborder=“10″ verläuft ein zehn Pixel breiter Rahmen um das iframe, bei frameborder=“0″ ist kein Rahmen sichtbar.
- sandbox: Mit dem Sandbox-Modus können Sie die Rechte für Drittseiten beschränken. So ist es dem eingebetteten Inhalt dann beispielsweise nicht mehr möglich, Scripte und Plugins auszuführen oder Formulare zu versenden.
Hinweis: iframes und SEO
Suchmaschinenbots erkennen zwar, dass externe Inhalte per iframe geladen werden, diese werden aber nicht inhaltlich ausgewertet und haben daher keinen direkten positiven Einfluss auf Ihre Rankings in Suchmaschinen. Indirekt können sie aber selbstverständlich die Nutzererfahrung auf Ihrer Website verbessern und damit für bessere Ranking-Positionen sorgen.
Wie iframes Crowdsourcing erleichtern können
Für unsere Kunden bieten wir vielfältige Einsatzbereiche von iframes an. Wenn direkt in Ihrem System Aufgaben von der Crowd übernommen werden sollen, bietet Crowd Guru neben einer API-Lösung auch an, iframes zu integrieren, damit unsere Gurus ohne direkten Kontakt zu Ihrem System auf Ihre Seiteninhalte zugreifen können. Iframes ermöglichen es uns somit, unkompliziert eine Schnittstelle zu Ihrem System aufzubauen. Mithilfe des Sandbox-Modus können Sie außerdem genau bestimmen, welche Rechte Sie für Crowdsourcing auf Ihrer Seite gewähren.
Kontaktieren Sie uns, um mit uns gemeinsam die optimale Lösung zu finden!
