{"id":2368,"date":"2019-11-22T14:11:56","date_gmt":"2019-11-22T14:11:56","guid":{"rendered":"https:\/\/blog.tchop.io\/?p=2368"},"modified":"2025-04-22T11:11:49","modified_gmt":"2025-04-22T11:11:49","slug":"was-ist-ein-iframe-und-wie-funktioniert-die-integration","status":"publish","type":"post","link":"https:\/\/blog.tchop.io\/de\/was-ist-ein-iframe-und-wie-funktioniert-die-integration\/","title":{"rendered":"Was ist ein iFrame und wie funktioniert die Integration"},"content":{"rendered":"\n<p>Mit tchop l\u00e4sst sich ein Ort f\u00fcr alle Inhalte, <a href=\"https:\/\/blog.tchop.io\/de\/10-entwicklungen-nachrichtenjournalismus-2026\/\">News<\/a> und Content Feeds schaffen &#8211; von interessanten Texten, Links, Social Media Posts oder Videos bis hin zu Podcasts oder Newslettern. Der Output ist oft so spannend, dass es Sinn macht diesen auch in bestehende oder neue Webseiten einzubinden. Daf\u00fcr gibt es verschiedene technische Methoden. Diese machen die Integration zum Kinderspiel und erf\u00fcllen gleichzeitig alle modernen Anforderungen hinsichtlich Sicherheit und User Experience. Im folgenden Blog Post erkl\u00e4ren wir dieses ab sofort allen Kunden zur Verf\u00fcgung stehende Feature im Detail. Vorab: es wird spannend, denn es ergeben sich daraus sehr sehr viele neue M\u00f6glichkeiten!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wie die Einbindung technisch funktioniert<\/h3>\n\n\n\n<p>F\u00fcr das Einbetten von Medieninhalten auf Websites gibt es im modernen HTML5-Web-Standard das sogenannte iFrame (engl. frame = dt. Rahmen). Diese erm\u00f6glichen es dem Website-Anbieter, mehrere Seiten auf einmal anzuzeigen, die technisch v\u00f6llig unabh\u00e4ngig sind. Die Handhabung ist sehr einfach: man kann damit Videos, <a href=\"https:\/\/blog.tchop.io\/de\/wie-sie-mit-tchop-karten-den-perfekten-content-mix-erstellen\/\">Karten<\/a>, Pr\u00e4sentationen und andere Inhalte schnell und ohne tieferes technisches Wissen einbinden.<\/p>\n\n\n\n<p>iFrame (oder auch &#8222;Inline Frame&#8220; oder &#8222;Floating Frame&#8220;) ist ein separates  HTML-Dokument, welches in einem eigenem Fenster zusammen mit anderen Inhalten der Seite im Browser angezeigt wird. Es kann \u00fcberall platziert werden und l\u00e4sst sich hinsichtlich H\u00f6he und Breite einfach an die jeweilige Anforderung anpassen. Technisch wird dabei ein anderes HTML-Dokument in dem bestehenden Dokument der Seite angezeigt. Wenn man eine Seite mit einem solchen iFrame-Rahmen \u00f6ffnet, wird im Hintergrund &#8222;unsichtbar&#8220; eine weitere unabh\u00e4ngige Seite geladen. D.h. der Nutzer bekommt davon nichts mit. <\/p>\n\n\n\n<p>Wir sehen diese Integration selbstverst\u00e4ndlich heute bereits, wenn wir Youtube Videos oder Audio Player von Spotify auf Websites sehen und nutzen. Das Internet ist voll damit und in der Regel f\u00e4llt dem Nutzer gar nicht auf.  Auch Live-Ticker auf News-Webseiten sind in der Regel mit dieser Technik eingebettet. iFrame-Integrationen sind also ein fester Bestandteil des modernen Web und ein weit verbreitetes Standardwerkzeug. Aufgrund der Isolierung zu dem urspr\u00fcnglichen Dokument, stellt es zudem eine besonders sichere Methode dar, dynamische Inhalte wiederzugeben.<\/p>\n\n\n\n<p>Es gibt eigentlich nur zwei Nachteile: Zum einen k\u00f6nnen keine Daten zwischen der Website und dem eingebundenen Element ausgetauscht werden. Au\u00dferdem k\u00f6nnen iFrames nicht von sogenannten Web-Crawlern gesehen werden. Crawler sind Programme, die das Internet f\u00fcr unterschiedliche Zwecke anhand verschiedener Kriterien durchsuchen. Google nutzt dies f\u00fcr seine Suchmaschine. Dabei indexiert und \u201eversteht\u201c der Google Crawler nur Inhalte, die sich tats\u00e4chlich auf der Webseite befinden. Damit hat die Einbindung keinen positiven Einfluss auf die SEO-Performance einer Website (aber eben auch keine negativen).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sie haben die Wahl<\/h3>\n\n\n\n<p>Aus den Content Formaten von tchop ergeben sich unterschiedliche Optionen, um Inhalte in Ihre Webseite zu integrieren. W\u00e4hrend sich bei bekannten Social Media Wall-Anbietern nur Social Media Posts &#8222;embedden&#8220; lassen (und bei manchen vielleicht noch eigene Bilder und einfache Text-Posts) profitieren Sie dabei von der ganzen Bandbreite der verschiedenen Content-Formate von Links, Social Media Posts, Video und Audio. Sie haben dabei die Wahl der Integration zwischen<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>einer einzelnen Karte<\/li>\n\n\n\n<li>einem speziellen Mix<\/li>\n\n\n\n<li>dem gesamten Newsfeed eines Channels<\/li>\n<\/ul>\n\n\n\n<p>Sie k\u00f6nnen beliebig viele Integrationen aus unterschiedlichen Kan\u00e4len und Mixes nutzen, um unterschiedliche Inhalte auf verschiedenen Websites einzubinden. Damit l\u00e4sst sich eine zu Ihren Anforderungen passende Struktur aufsetzen, die Ihre Website automatisch mit dem richtigen Content versorgt. <\/p>\n\n\n\n<p>Der iFrame Code Snippet sieht \u00fcbrigens so aus:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"150\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/11\/image.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2378\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/11\/image.png 969w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/11\/image-800x124.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/11\/image-300x46.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/11\/image-768x119.png 768w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/><\/figure>\n\n\n\n<p>Er l\u00e4sst sich ganz einfach via &#8222;Copy &amp; Paste&#8220; in einen beliebigen Online-CMS-Editor hinein kopieren. In dem Code Snippet l\u00e4sst sich auch ganz einfach festlegen, welche H\u00f6he und Breite das Element haben soll. Die Karten ordnen sich dann responsiv innerhalb dieses Moduls an. Damit l\u00e4sst sich ganz einfach Einfluss auf das Erscheinungsbild und die User Experience der Webseite nehmen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/tchop.io\/resources\/library\/user-needs-model-for-internal-communications\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"950\" height=\"287\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-5666\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA.png 950w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA-300x91.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA-768x232.png 768w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Wof\u00fcr kann man das nutzen?<\/h3>\n\n\n\n<p>Vorab: Das kann man f\u00fcr sehr vieles nutzen! Die M\u00f6glichkeiten sind auf den ersten Blick \u00e4hnlich der sogenannten Social Media Walls. Eine Social Media Wall sammelt und filtert Inhalte von Social-Media-Kan\u00e4len wie Instagram, Twitter, Facebook und YouTube. Sie wird oft auf einer Firmen-Website, auf Produkt-Pages von E-Commerce-Seiten oder digitalen Bildschirmen in B\u00fcros, auf der Stra\u00dfe oder bei Live-Events gezeigt bzw. integriert. Die sonst nur bei den Sozial Netzwerken laufenden Inhalte, kann man so auch anderen Zielgruppen einfach und unkompliziert zur Verf\u00fcgung stellen. <\/p>\n\n\n\n<p>Mit tchop gehen die M\u00f6glichkeiten nun noch ein ganzes St\u00fcckchen weiter! Denn auf unserer Plattform lassen sich praktisch alle heute relevanten Inhaltstypen einfach und effizient aggregieren und kuratieren. So entsteht auf Wunsch eine Mischung aus Nachrichten, Social Media Inhalten und Micro-Contents wie Bildern oder Videos, ein Mix aus eigenen oder fremden, aktuellen oder Evergreen-Inhalten. Inhalte k\u00f6nnen &#8222;live&#8220; via App hochgeladen, kommentiert oder editiert werden, wobei man bestimmen kann welche Nutzer wohin etwas posten d\u00fcrfen. <\/p>\n\n\n\n<p>Ein weiterer, ganz entscheidender Vorteil gegen\u00fcber den bekannten Social Walls ist die Tatsache, dass die Inhalte rechtlich immer in Ihrem Hoheitsbereich bleiben. Sie behalten immer die Kontrolle wer wo etwas sehen soll. Alle Rechte bleiben uneingeschr\u00e4nkt bei Ihnen, w\u00e4hrend man bei den bekannten Netzwerken ja sehr umfangreich Rechte abtreten muss.<\/p>\n\n\n\n<p>Deswegen eignet sich tchop als System vor allem auch f\u00fcr F\u00e4lle in denen eben nicht gew\u00fcnscht ist, Inhalte \u00f6ffentlich zug\u00e4nglich zu machen (bspw. auch, weil die Inhalte nur f\u00fcr Abonnenten, <a href=\"https:\/\/blog.tchop.io\/de\/wie-baut-man-eine-loyale-digitale-community-auf\/\">Mitglieder<\/a> oder Event-Teilnehmer bestimmt sein sollen). Die Integration kann einfach in einem gesch\u00fctzten Bereich nur f\u00fcr angemeldete Mitglieder erfolgen oder z.B. auch innerhalb eines Intranets.<\/p>\n\n\n\n<p>Die M\u00f6glichkeiten im <a href=\"https:\/\/blog.tchop.io\/de\/warum-kleinere-communities-oft-groessere-wirkung-entfalten\/\">Kontext<\/a> der jeweiligen Website sind unbegrenzt und es h\u00e4ngt letztlich vom jeweiligen Anwendungsfall ab, wie man dies nutzen will. Ganz sicher gilt: die Integration von mehr Content, erh\u00f6ht die Verweildauer auf der Website, erm\u00f6glicht es zus\u00e4tzliche Perspektiven und Hintergr\u00fcnde zu liefern, ohne viel Aufwand zu riskieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zusammenfassung<\/h3>\n\n\n\n<p>Ein iFrame ist ein rechteckiges HTML-Element, dass heute auf vielen Webseiten eingesetzt wird. Durch diese Technik lassen sich die eigenen tchop Inhalte und Outputs flexibel und dynamisch an jeder gew\u00fcnschten Stelle einer Webseite einbetten. Dabei fungiert das iFrame wie ein kleines Browserfenster und liefert die tchop Inhalte im Kontext der eigenen Website. Die Einbindung ist schnell, einfach und sicher. Jeder kann ein iFrame mittels eines kurzen Code Snippets auf seiner Website integrieren. Die inhaltlichen M\u00f6glichkeiten sind praktisch unbegrenzt. Der Fantasie sind keine Grenzen gesetzt!<\/p>\n\n\n\n<p>Sprechen Sie uns jederzeit an! Das Feature ist f\u00fcr alle Kunden ab sofort kostenlos verf\u00fcgbar. Gerne sind wir bei der Integration behilflich und liefern Anregungen und Ideen aus anderen Anwendungsf\u00e4llen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/tchop.io\/resources\/library\/user-needs-model-for-internal-communications\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"950\" height=\"287\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-5666\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA.png 950w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA-300x91.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2025\/04\/User-Needs-Model-for-Internal-Communications-CTA-768x232.png 768w\" sizes=\"auto, (max-width: 950px) 100vw, 950px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Mit tchop l\u00e4sst sich ein Ort f\u00fcr alle Inhalte, News und Content Feeds schaffen &#8211; von interessanten Texten, Links, Social Media Posts oder Videos bis&#8230;<\/p>\n","protected":false},"author":3,"featured_media":958,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[135],"tags":[],"coauthors":[134],"class_list":["post-2368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integrationen"],"_links":{"self":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/2368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/comments?post=2368"}],"version-history":[{"count":18,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/2368\/revisions"}],"predecessor-version":[{"id":5675,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/2368\/revisions\/5675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media\/958"}],"wp:attachment":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media?parent=2368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/categories?post=2368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/tags?post=2368"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/coauthors?post=2368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}