So betten Sie eine interaktive Georivo 3D-Karte in WordPress ein
Betten Sie ein veröffentlichtes Georivo-Widget in WordPress mit dem Individuellen HTML-Block, einem responsiven Wrapper, der Domain-Autorisierung und der Überprüfung der Live-Seite ein.
Um eine Georivo-Standortpräsentation in WordPress einzubetten, veröffentlichen Sie zuerst das Widget und autorisieren Sie die genaue öffentliche Website-Domain in Georivo. Kopieren Sie den generierten HTTPS-Iframe, fügen Sie ihn über das von der Plattform unterstützte HTML- oder Code-Element ein, behalten Sie das Seitenverhältnis bei und veröffentlichen Sie die Seite. Überprüfen Sie die Live-URL auf Desktop- und Mobilgeräten, einschließlich Domain-Zugriff, Ladeverhalten, Quellenangabe, Cookie-Einwilligung und Fallback-Verhalten.
Voraussetzungen
Bevor Sie interaktive 3D-Standortpräsentationen in Ihre WordPress-Website integrieren, müssen Sie sicherstellen, dass mehrere technische und administrative Voraussetzungen erfüllt sind. Zunächst muss ein veröffentlichtes Georivo-Widget in Ihrem aktiven Dashboard bereitstehen. Dieses Widget wird mit einer bestimmten Immobilienadresse und nahegelegenen Points of Interest konfiguriert, die das Georivo-System in eine einbettbare, interaktive und fotorealistische 3D-Standortpräsentation umwandelt. Diese Präsentation nutzt lizenziertes Geodaten-Bildmaterial, um den umgebenden Kontext der Immobilie darzustellen. Da das Widget vor dem Generieren des Integrationscodes veröffentlicht werden muss, sollten Sie überprüfen, ob alle programmierten Kamerabewegungen, Abläufe (wie Immobilien-Präsentation, Nachbarschafts-Story oder Anreise-Guide) und nahegelegene Orte finalisiert sind.
Zweitens müssen Sie über Editor- oder Administratorrechte für die WordPress-Zielseite verfügen. Die WordPress-Plattform implementiert strenge Sicherheitsrichtlinien bezüglich der Ausführung von benutzerdefinierten Skripten und unformatiertem HTML. Insbesondere die Möglichkeit, ungefiltertes HTML oder Iframe-Elemente einzufügen, unterliegt Beschränkungen der Benutzerrollen. Wenn Ihrem Konto diese Berechtigungen fehlen, filtert der WordPress-Editor die Iframe-Tags beim Speichern oder Veröffentlichen der Seite möglicherweise heraus. Stellen Sie außerdem sicher, dass Ihr aktiver WordPress-Tarif und Ihre Hosting-Umgebung die Verwendung von benutzerdefiniertem Code oder externen Iframe-Integrationen zulassen, da einige Basistarife oder Sicherheits-Plugins die Ausführung externer Skripte einschränken.
Drittens muss in Ihrem Georivo-Konto die genaue öffentliche Domain Ihrer WordPress-Website autorisiert sein. Georivo nutzt domaingebundene Einbettungen, um Ihr lizenziertes Geodaten-Bildmaterial zu schützen und zu verhindern, dass unbefugte Dritte Ihre interaktiven Inhalte direkt verlinken. Schließlich ist es wichtig, diese 3D-Visualisierung klar von physischen Drohnenaufnahmen abzugrenzen. Die Georivo-Plattform rendert eine interaktive Standortpräsentation mithilfe von lizenzierten, fotorealistischen 3D-Geodaten. Es handelt sich nicht um physische Drohnenaufnahmen in Echtzeit, und sie stellt weder unmittelbare physische Bedingungen noch das aktuelle Wetter oder aktive Baustellendetails dar. Nutzer müssen verstehen, dass es sich hierbei um ein Visualisierungswerkzeug handelt, das dazu dient, räumliche Beziehungen und die regionale Topografie zu vermitteln, und nicht um eine physische Live-Aufnahme.
Kopieren Sie den Georivo-Einbettungscode
Sobald die Voraussetzungen erfüllt sind, können Sie den korrekten Integrationscode von der Georivo-Plattform abrufen. Melden Sie sich in Ihrem Dashboard an, wählen Sie das Projekt aus, das Ihrer Immobilie entspricht, und navigieren Sie zu den Veröffentlichungs- oder Freigabeeinstellungen. Hier finden Sie den generierten HTTPS-Iframe-Code, der speziell für Ihr Widget entwickelt wurde. Dieser Code ist an das eindeutige Token Ihres Projekts gebunden und so strukturiert, dass er die interaktive 3D-Umgebung sicher lädt.
Gemäß der Einbettungsvereinbarung dürfen Sie nur den exakten Iframe-Code verwenden, der direkt aus dem veröffentlichten Georivo-Widget kopiert wurde. Sie dürfen die geschützte URL oder das Sicherheitstoken niemals offenlegen, ändern oder manipulieren. Der Versuch, die Quell-URL manuell zu ändern oder erforderliche Parameter zu entfernen, kann die Verbindung zur Rendering-Engine unterbrechen oder domaingebundene Sicherheitssperren auslösen.
Kopieren Sie den gesamten Codeblock in Ihre Zwischenablage. Um Formatierungsfehler zu vermeiden, sollten Sie den Code nicht in Rich-Text-Editoren oder Textverarbeitungsprogramme einfügen, bevor Sie ihn in WordPress übertragen. Diese Programme können versteckte Formatierungszeichen einfügen oder standardmäßige gerade Anführungszeichen in typografische Anführungszeichen umwandeln, was die HTML-Syntax beschädigt. Belassen Sie den Code in Ihrer Zwischenablage oder fügen Sie ihn in einen einfachen Texteditor ein, falls eine temporäre Speicherung erforderlich ist.
Fügen Sie einen Individuellen HTML-Block hinzu
WordPress verwendet einen blockbasierten Editor (Gutenberg) zu organisieren und darzustellen. Um Ihre interaktive 3D-Karte einzufügen, öffnen Sie die Zielseite oder den Beitrag im Editor und suchen Sie den Bereich, in dem die Visualisierung erscheinen soll. Fügen Sie einen neuen Block hinzu, indem Sie auf das Plus-Symbol klicken und nach dem Block "Individuelles HTML" suchen. Dieser Block ist speziell dafür ausgelegt, unformatiertes HTML und Iframe-Codes zu akzeptieren, ohne die Tags zu parsen oder zu maskieren.
Vermeiden Sie es, Standard-Absatzblöcke, Textblöcke oder Standard-Medien-Einbettungsblöcke für diese Integration zu verwenden. Standard-Textblöcke stellen den unformatierten Code als reinen Text auf Ihrer Live-Website dar, während Standard-Einbettungsblöcke für bestimmte oEmbed-Anbieter optimiert sind und die von Georivo verwendeten domaingebundenen, sicheren Iframes nicht unterstützen. Der Block "Individuelles HTML" bietet die sauberste und zuverlässigste Umgebung für benutzerdefinierte Iframe-Integrationen.
Fügen Sie den kopierten Georivo-Iframe-Code direkt in den Textbereich des Blocks "Individuelles HTML" ein. Sie können die Schaltfläche "Vorschau" in der Werkzeugleiste des Blocks verwenden, um zu überprüfen, ob die 3D-Karte in der Editor-Oberfläche korrekt geladen wird. Wenn der Vorschaubereich leer bleibt oder einen Fehler anzeigt, stellen Sie sicher, dass der vollständige Iframe-Code ohne fehlende Tags oder unvollständige Attribute eingefügt wurde, und überprüfen Sie, ob Ihre Benutzerrolle die erforderlichen Berechtigungen zum Speichern von ungefiltertem HTML besitzt.
Responsive Größenanpassung
Immobilienkäufer und Kunden betrachten Angebote auf einer Vielzahl von Geräten, darunter Mobiltelefone, Tablets und hochauflösende Desktop-Monitore. Um eine professionelle Benutzererfahrung zu bieten, muss Ihre eingebettete 3D-Karte auf allen Bildschirmgrößen responsiv skalieren. Standard-Iframes laden oft mit festen Pixelabmessungen, was dazu führen kann, dass die Karte auf kleineren Bildschirmen über den Rand hinausragt oder auf größeren Displays als kleines Feld erscheint.
Um sicherzustellen, dass die Karte vollständig responsiv bleibt, müssen Sie ihr Seitenverhältnis beibehalten. Dies kann erreicht werden, indem Sie den kopierten Iframe in einen responsiven CSS-Container einbetten. Verpacken Sie den Iframe im Block "Individuelles HTML" in ein div-Element mit einem benutzerdefinierten Klassennamen und definieren Sie die responsiven Stile im Customizer Ihres WordPress-Themes oder im globalen Stylesheet. Alternativ können Sie das Breitenattribut des Iframes auf 100 Prozent festlegen und eine relative oder Viewport-basierte Höhe definieren.
Dieser Ansatz ermöglicht es der interaktiven 3D-Karte, sich über die gesamte Breite ihres übergeordneten Containers zu erstrecken, während gleichzeitig eine angemessene vertikale Höhe für die Touch-Bedienung beibehalten wird. Testen Sie das Layout-Verhalten immer, indem Sie Ihr Browserfenster in der Größe verändern oder die Geräte-Vorschau-Modi des Editors verwenden, um sicherzustellen, dass die Visualisierung reibungslos skaliert, ohne dass wichtige Schnittstellenelemente abgeschnitten werden.
Veröffentlichen und überprüfen
Nachdem Sie den Iframe-Code platziert und sein responsives Styling angepasst haben, klicken Sie oben rechts im WordPress-Editor auf die Schaltfläche "Veröffentlichen" oder "Aktualisieren", um die Änderungen live zu schalten. Sobald die Seite veröffentlicht ist, rufen Sie die öffentliche Live-URL in einem Inkognito- oder privaten Browserfenster auf. Dies stellt sicher, dass Sie die Seite als normaler Besucher betrachten, ohne zwischengespeicherte Administrator-Sitzungen, die Sicherheits- oder Laderegeln umgehen könnten.
Fügen Sie eine gründliche Überprüfung der Live-Seite sowohl auf Desktop- als auch auf Mobilgeräten durch. Überprüfen Sie erstens den Domain-Zugriff, um sicherzustellen, dass die Karte ohne domaingebundene Sicherheitssperren oder Autorisierungsfehler geladen wird. Überprüfen Sie zweitens den Ladezustand, um zu bestätigen, dass die 3D-Karte vollständig initialisiert wird und alle programmierten Kamerabewegungen wie gewünscht starten. Überprüfen Sie drittens, ob die erforderliche Quellenangabe für das lizenzierte Geodaten-Bildmaterial deutlich sichtbar ist und den Nutzungsbedingungen entspricht.
Testen Sie außerdem das Einwilligungsverhalten, um sicherzustellen, dass die Einbettung die Cookie-Einwilligungstools oder Datenschutz-Banner Ihrer Website berücksichtigt. Überprüfen Sie schließlich das Fallback-Verhalten auf Geräten oder Browsern, die das Rendern von 3D-Inhalten einschränken könnten. Stellen Sie sicher, dass die interaktive Karte auf mobilen Bildschirmen nicht den Touch-Fokus des Benutzers blockiert, sodass Besucher problemlos am Kartenbereich vorbeiscrollen können, um die restlichen Details Ihres Immobilienangebots zu lesen.
Fehlerbehebung
Wenn die eingebettete 3D-Karte nicht korrekt geladen wird oder einen Fehler anzeigt, sollten einige häufige Probleme untersucht werden. Ein leerer Iframe ist oft das Ergebnis strenger Sicherheitsberechtigungen oder Rollenbeschränkungen, die den benutzerdefinierten HTML-Code während des Speichervorgangs entfernt haben. Stellen Sie sicher, dass Ihr WordPress-Benutzerkonto über die erforderlichen Rechte zum Veröffentlichen von ungefiltertem HTML verfügt.
Ein weiteres häufiges Problem ist eine blockierte oder nicht übereinstimmende Domain. Da Georivo domaingebundene Einbettungen verwendet, muss die genaue öffentliche Domain Ihrer Live-Website in Ihrem Georivo-Dashboard autorisiert sein. Dies schließt die Übereinstimmung des genauen Protokolls (HTTPS) und der Subdomains (wie das Vorhandensein oder Fehlen des "www"-Präfixes) ein. Bei einer Nichtübereinstimmung blockiert die Rendering-Engine die Anfrage, um Ihr lizenziertes Geodaten-Bildmaterial zu schützen.
Prüfen Sie außerdem in der Entwicklerkonsole Ihres Browsers, ob Fehler bezüglich der Content Security Policy (CSP) oder gemischter Inhalte (Mixed Content) vorliegen. Strenge Sicherheits-Plugins oder Server-Header können externe Anfragen an Georivo blockieren. Wenn Probleme mit fehlerhafter Höhe oder abgeschnittenen Inhalten auf Mobilgeräten auftreten, überprüfen Sie Ihren responsiven CSS-Wrapper, um sicherzustellen, dass das Seitenverhältnis beibehalten wird. Löschen Sie schließlich den Cache Ihrer WordPress-Website, den Server-Cache und den Browser-Cache, um veraltete Cache-Daten oder Einwilligungssperren zu beheben, die das Laden des aktualisierten Codes verhindern könnten.
Leistung und Performance
Die Integration von reichhaltigen, interaktiven 3D-Geodaten kann die Ladezeit Ihrer Website und die Core Web Vitals beeinträchtigen, wenn sie nicht korrekt optimiert wird. Um eine hohe Performance und Sichtbarkeit in Suchmaschinen zu erhalten, sollten Sie steuern, wie und wann der Georivo-Iframe initialisiert wird. Die effektivste Optimierungsmethode ist die Implementierung von Lazy Loading (verzögertes Laden).
Sie können das standardmäßige Attribut loading="lazy" direkt zu Ihrem Iframe-Code im Block "Individuelles HTML" hinzufügen. Dieses Attribut weist den Browser an, das Laden der rechenintensiven 3D-Inhalte so lange zu verzögern, bis der Benutzer zu dem Bereich mit der Karte scrollt. Dies verhindert, dass die interaktiven Elemente das anfängliche Rendern von Texten, Hauptbildern und Navigationsmenüs blockieren, was besonders für mobile Besucher in langsameren Netzwerken von Vorteil ist.
Erwägen Sie, die 3D-Karte unterhalb des direkt sichtbaren Bereichs (below the fold) Ihres Seitenlayouts zu platzieren, anstatt ganz oben. Diese strategische Platzierung stellt sicher, dass der LCP-Wert (Largest Contentful Paint) Ihrer Website optimiert bleibt, während den Besuchern der notwendige schriftliche Kontext zur Immobilie vermittelt wird, bevor sie mit der 3D-Visualisierung interagieren. Durch die Kombination von Lazy Loading mit einem durchdachten Seitendesign können Sie eine immersive Standortpräsentation anbieten, ohne die Performance zu beeinträchtigen.
Einschränkungen und Eignung
Verwenden Sie dieses Material zur Präsentation und Entscheidungsunterstützung, nicht als Ersatz für unabhängig verifizierte Quelleninformationen. Bestätigen Sie Routen, Entfernungen, Zugänge, Verfügbarkeit, Bildmaterial, rechtliche Grenzen, Plattformanforderungen und aktuelle Bedingungen vor der Veröffentlichung oder Verwendung mit der entsprechenden zuständigen Stelle.
| WordPress-Blocktyp | Empfohlener Anwendungsfall | Responsive Unterstützung | Sicherheitsstufe |
|---|---|---|---|
| Individueller HTML-Block | Standard-Iframe-Einbettungscode | Hervorragend mit CSS-Wrapper | Hoch (ungefiltertes HTML eingeschränkt) |
| Shortcode-Block | Veraltete Page Builder | Mittelmäßig | Mittel |
| Absatz-Block | Nicht empfohlen (entfernt Code) | Keine | Niedrig |
| Benutzerdefiniertes Theme-Template | Globale, website-weite Einbettungen | Hervorragend | Hoch |
Schritte zum Einbetten einer Georivo 3D-Karte in einen WordPress-Block in wenigen Minuten nach der Widget-Integration
- Melden Sie sich in Ihrem WordPress-Administrator-Dashboard an und navigieren Sie zur Zielseite oder zum Beitrag.
- Fügen Sie an der gewünschten Stelle im Block-Editor einen neuen Block "Individuelles HTML" hinzu.
- Fügen Sie den kopierten responsiven Georivo-Iframe-Code direkt in den Textbereich des Blocks ein.
- Verpacken Sie den Iframe in einen benutzerdefinierten CSS-Container, um das Standard-Seitenverhältnis beizubehalten.
- Nutzen Sie die Vorschau des Entwurfs, um den anfänglichen Ladezustand und die Layout-Ausrichtung zu überprüfen.
- Veröffentlichen Sie die Seite und testen Sie die Live-URL auf mehreren Geräten, um die Domain-Autorisierung zu überprüfen.
Die Integration interaktiver Geodaten-Visualisierungen direkt in Immobilienangebote schließt die Lücke zwischen statischen Bildern und physischen Besichtigungen vor Ort und bietet Käufern einen sofortigen geografischen Kontext.
Häufige Fragen
Warum zeigt meine eingebettete 3D-Karte eine Domain-Fehlermeldung an?
Dieser Fehler tritt auf, wenn die Domain der Live-WordPress-Website nicht mit den in Ihrem Georivo-Dashboard konfigurierten autorisierten Domains übereinstimmt. Um dies zu beheben, melden Sie sich bei Georivo an, navigieren Sie zu Ihren Widget-Einstellungen und fügen Sie Ihre genaue Website-Domain zur Liste der autorisierten Domains hinzu.
Kann ich den Standard-Einbettungsblock von WordPress für Georivo verwenden?
Nein, der Standard-Einbettungsblock von WordPress ist für bestimmte oEmbed-Anbieter konzipiert. Da Georivo domaingebundene, sichere Iframes verwendet, müssen Sie den Block 'Individuelles HTML' verwenden, um den direkten Iframe-Code einzufügen.
Wie sorge ich dafür, dass die eingebettete Karte auf Mobilgeräten schneller lädt?
Sie können die Performance optimieren, indem Sie das Attribut loading="lazy" im Iframe verwenden. Dies stellt sicher, dass die 3D-Kartendaten erst geladen werden, wenn der Benutzer in die Nähe der Karte scrollt, was die anfängliche Ladezeit der Seite auf Mobilgeräten schont.
Erfordert diese Einbettung eine physische Drohnen-Videodatei?
Nein, Georivo verwendet lizenziertes, fotorealistisches 3D-Geodaten-Bildmaterial, um interaktive Standortpräsentationen zu erstellen. Es müssen keine großen Videodateien auf Ihrem WordPress-Server gehostet, hochgeladen oder gestreamt werden.
Was passiert, wenn ein Benutzer die Seite besucht und Drittanbieter-Cookies blockiert sind?
Georivo-Einbettungen sind so konzipiert, dass sie moderne Datenschutzstandards respektieren. Sie benötigen keine Tracking-Cookies von Drittanbietern, um die grundlegende 3D-Kartenansicht zu laden, was eine hohe Kompatibilität mit sicheren Browsern gewährleistet.