{"id":2456,"date":"2019-12-22T14:15:42","date_gmt":"2019-12-22T14:15:42","guid":{"rendered":"https:\/\/blog.tchop.io\/?p=2456"},"modified":"2025-04-22T11:23:13","modified_gmt":"2025-04-22T11:23:13","slug":"wie-sie-das-perfekte-iframe-fuer-ihr-intranet-ihren-blog-oder-eine-beliebige-website-generieren","status":"publish","type":"post","link":"https:\/\/blog.tchop.io\/de\/wie-sie-das-perfekte-iframe-fuer-ihr-intranet-ihren-blog-oder-eine-beliebige-website-generieren\/","title":{"rendered":"Wie Sie den perfekten iFrame f\u00fcr Ihr Intranet, Ihren Blog oder eine beliebige Website generieren"},"content":{"rendered":"\n<p>Wie man das neue iFrame-Feature nutzt und was man damit alles so anstellen kann haben wir in <a href=\"https:\/\/blog.tchop.io\/de\/was-ist-ein-iframe-und-wie-funktioniert-die-integration\/\">diesem Blog-Post<\/a> bereits erkl\u00e4rt. Die M\u00f6glichkeiten sind praktisch unbegrenzt: Einzelne <a href=\"https:\/\/blog.tchop.io\/de\/wie-sie-mit-tchop-karten-den-perfekten-content-mix-erstellen\/\">Karten<\/a>, bestimmte Mixes oder auch der ganze <a href=\"https:\/\/blog.tchop.io\/de\/10-entwicklungen-nachrichtenjournalismus-2026\/\">News<\/a> Feed lassen sich so ganz einfach im eigenen Intranet, einem eigenen Blog oder auch einer News-Website integrieren. Die Integration ist einfach und auch f\u00fcr Menschen ohne Kenntnisse in Sachen Software jederzeit schnell und einfach machbar. <\/p>\n\n\n\n<p>In diesem Blog Beitrag wollen wir erkl\u00e4ren welche Einstellungen m\u00f6glich sind und wie Sie diese optimal f\u00fcr Ihre Anforderungen nutzen k\u00f6nnen. Es gibt eine ganze Reihe an wichtigen, zum Teil optionalen Einstellungen, die Sie nutzen k\u00f6nnen, um die Integration ideal zu realisieren.<\/p>\n\n\n\n<p>Im folgenden erl\u00e4utern wir alle Einstellungen im Detail, sollten dennoch Fragen bestehen, k\u00f6nnen Sie sich nat\u00fcrlich jederzeit bei uns melden. Das iFrame-Set Up finden Administratoren ganz einfach links im Tab &#8222;Entwickler&#8220;. Mit dem Button &#8222;Create Link&#8220; bzw. &#8222;Link erstellen&#8220; \u00f6ffnet sich ein Men\u00fc mit verschiedenen Formularen und Funktionen. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die perfekte Einstellung f\u00fcr Ihr iFrame<\/h3>\n\n\n\n<p>Im ersten Schritt geht es um die wichtigste Einstellung: die Gr\u00f6\u00dfe des iFrames. Diese wird mit zwei Werten definiert: der Breite und der H\u00f6he! Beides wird in Pixeln beschrieben und sollte durch die jeweilige Website und den &#8222;Einsatzort&#8220; bestimmt werden. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"646\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3-1024x646.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2457\" style=\"width:371px;height:234px\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3-1024x646.png 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3-800x505.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3-300x189.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3-768x485.png 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3-1100x694.png 1100w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-3.png 1306w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Des weiteren k\u00f6nnen Sie die Anzahl der Spalten sowie die Anzahl der darzustellenden Karten bestimmen. Voreingestellt ist die Darstellung der aktuellsten 20 Karten. Aber je nach Gr\u00f6\u00dfe und Format k\u00f6nnen auch mehr Karten Sinn machen. Mehrere Spalten machen wiederum nur Sinn in einem breiteren iFrame, d.h. um so breiter das iFrame, desto mehr Spalten k\u00f6nnen untergebracht werden. <\/p>\n\n\n\n<p>Neben der Pixel-Angabe f\u00fcr die Breite finden Sie zudem drei Buttons f\u00fcr die Einstellung der Ausrichtung. Hier k\u00f6nnen Sie festlegen, ob die Karten linksb\u00fcndig, zentriert oder rechtsb\u00fcndig im iFrame positioniert sein sollen. Dies ist besonders dann relevant, wenn Sie ein breites iFrame w\u00e4hlen aber nur eine oder wenige Spalten darin vorhanden sind.<\/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\">Optionen f\u00fcr die Anzeige<\/h3>\n\n\n\n<p>Im n\u00e4chsten Element k\u00f6nnen Sie einstellen, ob der Name des Nutzers, der den Inhalt gepostet hat, in der Karte angezeigt werden soll. Gleiches ist f\u00fcr den Zeitstempel m\u00f6glich. F\u00fcr die Darstellung dieser Informationen l\u00e4sst sich zudem die Sprache festlegen.<\/p>\n\n\n\n<p>Die Darstellung des Nutzers ist besonders interessant, wenn Ihr Angebot von unterschiedlichen Nutzern (oder auch Leserreportern) kuratiert wird. Auch f\u00fcr kleine Teams, die das iFrame wie eine &#8222;News Wall&#8220; nutzen ist die Darstellung interessant. In einem kleinen Team k\u00f6nnen alle interessante Inhalte teilen und man weiss wie in einem Sozialen Netzwerk immer sofort von dem dieser Inhalt zur Verf\u00fcgung gestellt wurde. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"581\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4-1024x581.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2459\" style=\"width:375px;height:212px\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4-1024x581.png 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4-800x454.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4-300x170.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4-768x436.png 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4-1100x624.png 1100w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-4.png 1290w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Je nachdem wie und wo Sie Ihr iFrame einsetzen, kann auch die Darstellung Ihres Logos als Absender wichtig sein. Wir erm\u00f6glichen hier den einfachen Upload eines Logos, welches dann rechts oben prominent eingebunden wird und Ihrer <a href=\"https:\/\/blog.tchop.io\/de\/wie-baut-man-eine-loyale-digitale-community-auf\/\">Marke<\/a> so wichtige Sichtbarkeit verleiht. <\/p>\n\n\n\n<p>Es gibt noch weitere M\u00f6glichkeiten den Header auf die eigenen Bed\u00fcrfnisse hin anzupassen. Oft ist es wichtig das iFrame mit einer kurzen \u00dcberschrift und einer Beschreibung zu versehen. So wird Nutzern auf der jeweiligen Seite klar was sie dort erwartet. Deswegen gibt es bei uns die M\u00f6glichkeit, beides &#8211; \u00dcberschrift und Einleitungstext &#8211; individuell f\u00fcr jedes iFrame festzulegen. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"938\" src=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5-1024x938.png\" loading=\"lazy\" alt=\"\" class=\"wp-image-2462\" style=\"width:375px;height:343px\" srcset=\"https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5-1024x938.png 1024w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5-800x733.png 800w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5-300x275.png 300w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5-768x704.png 768w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5-1100x1008.png 1100w, https:\/\/blog.tchop.io\/wp-content\/uploads\/2019\/12\/image-5.png 1290w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p>Ausserdem k\u00f6nnen verschiedene Farbwerte angepasst werden: Die Schriftfarbe f\u00fcr \u00dcberschrift und Einleitungstext, die Schriftart, die Hintergrundfarbe sowie die Textfarbe der beiden Kartenelemente Quellenangabe und Zeitstempel. Wahlweise kann der Hintergrund auch komplett transparent ausgespielt werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Einfacher Preview und Web Link<\/h3>\n\n\n\n<p>Im letzten Schritt k\u00f6nnen Sie Ihr iFrame auf einer speziellen Preview Seite noch einmal direkt begutachten. Dort besteht zudem die M\u00f6glichkeit die wichtigsten Settings noch einmal zu ver\u00e4ndern und sich das Ergebnis dann direkt anzusehen. Ausserdem erhalten Sie die M\u00f6glichkeit einen Web Link zu erstellen, der sich auch als einzelne Seite im Sinne einer &#8222;News Wall&#8220; nutzen und testen l\u00e4sst.<\/p>\n\n\n\n<p>Selbstverst\u00e4ndlich k\u00f6nnen Sie alle Einstellung jederzeit sp\u00e4ter \u00e4ndern oder das iFrame auch l\u00f6schen. Es besteht zudem die Option den Status der Ver\u00f6ffentlichung zu \u00e4ndern und es so zeitweise unsichtbar zu machen. <\/p>\n\n\n\n<p>Insgesamt gibt es also eine ganze F\u00fclle an M\u00f6glichkeiten und Optionen, um ein individuelles Erscheinungsbild der Inhalte und des iFrames an sich sicherzustellen. Die Anpassung an die Anforderungen Ihrer Marke bzw. Ihres Content-Angebots lassen sich damit leicht und schnell realisieren. <\/p>\n\n\n\n<p>Und nun: einfach ausprobieren und testen!<\/p>\n\n\n\n<p>Haben Sie Fragen zu einzelnen Einstellungen, lassen Sie es uns jederzeit wissen.<\/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>Wie man das neue iFrame-Feature nutzt und was man damit alles so anstellen kann haben wir in diesem Blog-Post bereits erkl\u00e4rt. Die M\u00f6glichkeiten sind praktisch&#8230;<\/p>\n","protected":false},"author":3,"featured_media":898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[135],"tags":[],"coauthors":[134],"class_list":["post-2456","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\/2456","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=2456"}],"version-history":[{"count":15,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/2456\/revisions"}],"predecessor-version":[{"id":5685,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/posts\/2456\/revisions\/5685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media\/898"}],"wp:attachment":[{"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/media?parent=2456"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/categories?post=2456"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/tags?post=2456"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.tchop.io\/de\/wp-json\/wp\/v2\/coauthors?post=2456"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}