TYPO3 OpenImmo Immobilien-Übertragung

Wenn Sie Ihre Website mit TYPO3 betreiben, können Sie WP-ImmoMakler trotzdem als vollwertiges Immobilien-Plugin nutzen — durch eine iFrame-Integration. WP-ImmoMakler läuft dabei auf einer separaten WordPress-Installation, und die Immobilienansicht wird als iFrame in Ihre TYPO3-Seite eingebettet.

Voraussetzungen

Sie benötigen eine WordPress-Installation, auf der WP-ImmoMakler läuft und Ihre Immobilien importiert werden. Diese Installation kann auf demselben Server wie Ihre TYPO3-Website liegen oder auf einem separaten Host.

WP-ImmoMakler bringt für diesen Fall einen eigenen iFrame-Modus mit. Sie binden also kein selbst geschriebenes <iframe>-Tag ein, sondern aktivieren den Modus in den Einstellungen und übernehmen den Code, den WP-ImmoMakler Ihnen dort fertig anzeigt.

Schritt 1: iFrame-Modus aktivieren

Einstellungen öffnen

Öffnen Sie im Backend Ihrer WordPress-Installation (wp-admin) WP-ImmoMakler → Einstellungen → Darstellung.
iFrame-Modus einschalten

Setzen Sie den Haken bei iFrame-Modus. Die Listen- und Detailansichten Ihrer Immobilien werden dann als iFrame-Inhalt bis zum Rand ausgegeben — ohne Header, Menü und Footer der WordPress-Installation. Bildergalerien öffnen sich in diesem Modus automatisch im Vollbild, damit sie nicht auf die Höhe des iFrames beschränkt bleiben.
iFrame-aufrufende Basis-URL eintragen

Tragen Sie unter iFrame-aufrufende Basis-URL die vollständige Basis-URL Ihrer TYPO3-Website ein — also die Adresse der Website, in der das iFrame eingebunden wird, zum Beispiel https://www.example.com ohne Unterseite. Aus Sicherheitsgründen (CORS) funktioniert die automatische Anpassung der iFrame-Größe erst, wenn diese Angabe hinterlegt ist.
Speichern

Speichern Sie die Einstellungen.

WP-ImmoMakler Einstellungen: iFrame-Modus und iFrame-aufrufende Basis-URL

Schritt 2: Einbindungs-Code kopieren

Direkt unter der Option iFrame-Modus zeigt WP-ImmoMakler den fertigen Einbindungs-Code an — bereits mit den URLs Ihrer eigenen Installation. Ein Klick in das Feld markiert den gesamten Code, sodass Sie ihn kopieren können.

Der Code hat diesen Aufbau:

<style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
<iframe id="wp-immomakler-iframe" src="https://ihre-wordpress-domain.de/immobilien/" allowfullscreen></iframe>
<script type="module">import { initialize } from "https://ihre-wordpress-domain.de/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>

Er besteht aus drei Teilen: einem kleinen Stylesheet, das dem iFrame die volle Breite gibt, dem iFrame selbst und einem JavaScript-Modul, das die Höhe des iFrames laufend an den Inhalt anpasst. Dadurch entsteht kein zweiter Scrollbalken, und beim Wechsel von der Liste in die Detailansicht stellt sich die Höhe automatisch um.

Schritt 3: Einbindung in TYPO3

In TYPO3 lässt sich der Code auf verschiedene Weisen einbinden.

Über ein HTML-Inhaltselement

Inhaltselement anlegen

Erstellen Sie auf der gewünschten TYPO3-Seite ein neues Inhaltselement vom Typ HTML.
Code einfügen

Fügen Sie den kopierten Code aus den WP-ImmoMakler-Einstellungen ein.
Speichern und veröffentlichen

Speichern Sie das Inhaltselement und veröffentlichen Sie die Seite.

Über TypoScript

Alternativ können Sie den Code über TypoScript ausgeben:

lib.immomakler = TEXT
lib.immomakler.value (
  <style>#wp-immomakler-iframe{width:100%;height:100vh;border:none;}</style>
  <iframe id="wp-immomakler-iframe" src="https://ihre-wordpress-domain.de/immobilien/" allowfullscreen></iframe>
  <script type="module">import { initialize } from "https://ihre-wordpress-domain.de/?wp-immomakler-iframe-resizer";initialize({}, "#wp-immomakler-iframe");</script>
)

Ersetzen Sie dabei beide https://ihre-wordpress-domain.de-Adressen durch die Werte aus Ihren Einstellungen.

Wenn die Höhe nicht automatisch angepasst wird

Bleibt das iFrame auf der Anfangshöhe stehen oder erscheint ein zweiter Scrollbalken, liegt es fast immer an einer dieser drei Ursachen:

Die iFrame-aufrufende Basis-URL ist leer, enthält einen Tippfehler oder eine Unterseite. Eingetragen gehört ausschließlich die Basis-URL inklusive https://.
Die eingetragene Basis-URL passt nicht zur tatsächlich aufgerufenen Adresse, etwa https://example.com statt https://www.example.com.
TYPO3 oder eine Erweiterung entfernt das <script type="module"> aus dem Inhaltselement. Prüfen Sie in diesem Fall die Ausgabe im Quelltext der fertigen Seite.

Hosting-Optionen

Sie können das iFrame selbst einrichten oder von Ihrer Agentur konfigurieren lassen. Alternativ bieten wir einen Einrichtungsservice an, der die optische Integration des Plugins in das Layout Ihrer TYPO3-Website übernimmt. Das iFrame kann auf Ihrem eigenen Server oder auf unserem Server betrieben werden.

Bei Fragen zur Einrichtung wenden Sie sich an unser Support-Team.