mobile.de per iframe einbinden

mobile.de Fahrzeugbestand in Homepage einbinden

mobile.de WordPress plugin - iPhone mockup
Viele WordPress Web Designer möchten auf der Homepage Ihrer Autohaus-Kunden die Gebrauchtwagen von mobile.de ĂŒber ein einfaches iframe einbinden. 

Das macht auch Sinn, denn die meisten AutohĂ€ndler in Deutschland sind Kunden beim grĂ¶ĂŸten europĂ€ischen Online-Fahrzeugmarkt. Die mobile.de GmbH gibt es immerhin schon seit 1996 und das Unternehmen ist neben autoscout24 und ebaykleinanzeigen der Ort online, den man besucht, wenn man sich einen Gebrauchtwage zulegen möchte.

Seit Beginn der Corona Pandemie 2020, kommen immer mehr AutohÀuser den Wunsch, eine eigene Web PrÀsenz, sprich eine eigene Autohaus Website aufzusetzen. Nun möchten viele AutohÀndler ihren Fahrzeugbestand von mobile.de direkt in ihre eigene Autohaus Website einbinden.

Das kann man ĂŒber ein einfaches mobile.de iFrame erreichen oder ĂŒber ein dediziertes WordPress Plugin.

 

mobile.de WordPress plugin - iPhone mockup
iFrame Einbindung

Anleitung: mobile.de per iframe in WordPress einbinden

Hier haben wir fĂŒr euch eine Schritt-fĂŒr-Schritt Anleitung erstellt, mit dem ihr dasdas Einbinden der mobile.de HĂ€ndlerseite in WordPress selber durchfĂŒhren könnt. 

Dabei ist es erst einmal irrelevant, welchen Page Builder ihr fĂŒr WordPress nutzt (Elementor, Divi, WP Bakery, Oxygen Builder, Beaver Builder, ect.)

Die Einbindung des aktuellen Fahrzeugbestandes in die WordPress Webseite ist mittels iframe-Einbindung des mobile.de Angebotes sehr einfach zu realisieren und sollte zirka 5-10 min dauern. 

Mit einigen extra HTML Handgriffen kann man die Darstellung des iFrames zusĂ€tzlich  beeinflussen. Viel Erfolg!

Schritt 1 – mobile.de CustomerId finden

Du benötigst zunÀchst die mobile.de customerId. 

Die “customerID” findest du im Administrationsbereich von mobile.de. Wenn du Web Designer bist, kannst du aber etwas Zeit sparen und muss nicht erst deinen deinen Kunden Fragen.

Gehe einfach auf die entsprechende mobile.de HĂ€ndlerseite, z.B. https://home.mobile.de/AUTOFR#ses .

 

mobile.de Händler-Homepage aufrufen
Wenn du auf der HĂ€ndler Homepage bist, klicke die rechte Maustaste “view page source” (auf deutsch: “Quelltext anzeigen”)
Quellcode anzeigen lassen - mobile.de
Nun wird dir der Quelltext der mobile.de HĂ€ndlerseite angezeigt und du kannst nach der customerID suchen.
im Quellcode die customerID suchen
HTML code fĂŒr mobile.de iFrame

Schritt 2 – HTML Vorlage anpassen

HTML Vorlage anpassen

Jetzt wo du die CustomerID hast (bei dem Beispiel von Auto FR war es “14870771”), fĂŒge sie in den folgenden HTML Code ein (anstelle der XXXXXX).

 

HTML iFrame Vorlage:

<iframe src=”http://home.mobile.de/home/index.html?customerId=XXXXXX&amp;partnerHead=false” width=”880px” height=”850px” frameborder=”0″ name=”Fahrzeugangebot” allowtransparency=”true” id=”Fahrzeugangebot”>Ihr Browser kann leider keine eingebetteten Frames anzeigen!</iframe>

 

HTML iFrame (mit entsprechend angepasster customerID):

<iframe src=”http://home.mobile.de/home/index.html?customerId=14870771&amp;partnerHead=false” width=”880px” height=”850px” frameborder=”0″ name=”Fahrzeugangebot” allowtransparency=”true” id=”Fahrzeugangebot”>Ihr Browser kann leider keine eingebetteten Frames anzeigen!</iframe>

HTML code fĂŒr mobile.de iFrame

Schritt 3 – HTML Code in WordPress Seite oder Post einfĂŒgen

So, das war es auch fast schon!

Jetzt hĂŒpfen wir gemeinsam rĂŒber zu WordPress und geben den angepassten HTML-Code ein.

Fertig!

Die Fahrzeuge von dem mobile.de HĂ€ndler sind nun via iFrame in der WordPress Website integriert:

Fertig - iframe in WordPress integriert-min

Wie sieht das Ergebnis auf einem iPhone aus?

Gibt es noch andere Möglichkeiten, den Fahrzeugbestand von mobile.de in WordPress darzustellen?

Ja, da mobile.de eine API (Schnittstelle) veröffentlicht hat, kann man diese Schnittstelle nutzen und eine alternative Form der Einbindung der Inhalte entwickeln. Aktuell gibt es mehere Anbieter.

Eine Option ist Wehiko WordPress Plugin.

Mehr zum Wehiko Plugin findest du hier: mobile.de Fahrzeuge auf eigener Homepage – ohne iFrame 

Das Einbinden von Inhalten mittels iFrame hat leider den Nachteil, dass die Inhalte nicht von den Suchmaschinen erfasst werden können.

Gibt es noch andere Möglichkeiten, den Fahrzeugbestand von mobile.de in WordPress darzustellen?

Fahrzeugbestand via Wehiko WordPress Plugin einbinden:

Vorteile des Wehiko Plugins gegenĂŒber eines iFrames:

1. Alle Fahrzeuge die du bei mobile.de hast, werden auf dem Smartphone als Kacheln dargestellt. Mit folgenden Parametern: Fahrzeugnamen, Preis, Erstzulassung, KM stand und PS.

2. Bilder pop-up und Slider Funktion: NatĂŒrlich wird auch ein großes Foto des Fahrzeugs gezeigt – d.h wenn der Besucher auf das Fahrzeugbild klickt, vergrĂ¶ĂŸert es sich als pop -up und man kann in der Galerie alle Bilder des jeweiligen Fahrzeugs anschauen. Wenn man beim letzten Bild angekommen bist, schliesst das pop-up automatisch

3. Weiterleitung zu mobile.de: Wenn der Nutzer auf den Fahrzeugtitel klickt, öffnet sich das jeweilige mobile.de Inserat

4. Infinite scroll: Das bedeutet der Webseitenbesucher scrollt durch alle Fahrzeuge und muss nicht erst von seite 1- bis zb seite 5 wechseln. Das kennen wir bereits von  Zalando, Facebook und Instagram.

5. Mobile responsive: Wie du hier im Video sehr schön sehen kannst, kann man das Handy auch im Querformat nutzen und die Fahrzeugdarstellung passt sich an: In diesem Fall wechselt es von einer zu zwei Spalten

6. Call2Action (Handlungsaufforderung): Eine klare Handlungsaufforderung in Form von einem Telefonhörer mit der Telefonnummer des Autohauses erscheint unten rechts auf dem Bildschirm

mobile.de Inserats-Einbindung via iFrame vs Wehiko WordPress Plugin

iFrame Einbindung – was direkt negativ auffĂ€llt, ist folgendes:

  • Passt nicht ins design – sieht ein wenig unschön aus
  • Sind nicht responsive
  • Und der wichtigste punkt – es wird nicht indexiert von Google = nicht gut fĂŒr SEO

mobile.de Inserats-Einbindung via iFrame vs Wehiko WordPress Plugin

Inseratseinbindung von mobile.de mit einem einfachen iFrame: www.myauto.nrw/fahrzeuge
iFrame Einbindung
Inseratseinbindung von mobile.de mit dem WordPress mobile.de Plugin:
www.fuchs-autohaus.de/leistungen/eu-auto-verkauf/
Wordpress mobile.de Plugin Einbindung

Wo finde ich die mobile.de API bzw. mobile.de Schnittstelle?

mobile.de Schnittstelle - API Dokumentation
Hier der LINK zur mobile.de API Dokumentation:

https://services.mobile.de/manual/index.html

Um auf die mobile.de API zugreifen zu können, benötigst du ein Account. 

Aktuell gibt es zwei Arten von Accounts:

API-Account – ein allgemeines API-Konto, fĂŒr das bestimmte APIs (z.B. Search-API) aktiviert werden kann. FĂŒr die Aktivierung und die Zugangsdaten musst du dich den mobile.de Kundensupport wenden.

HĂ€ndler-Account – ist an einen HĂ€ndler-VerkĂ€ufer gebunden. Du kannst Zugangsdaten fĂŒr bestimmte APIs aus dem HĂ€ndlerbereich erhalten.

FĂŒr weitere Informationen besuche bitte die offiziele mobile.de Seite: 

https://services.mobile.de/manual/index.html

 

Fragen zum Thema iFrame

Was ist ein iFrame?

iframe steht fĂŒr “inline Frame” und ist quasi ein Browserfenster im Browserfenster. Ein iFrame ist ein HTML-Element und ermöglicht es dir, relativ einfach externe Dokumente in ein HTML-Dokument – also eine Website zum Beispiel – einzubinden.

Was ist das Problem bei iFrames?

Problematik Nr.1:
iframes werden von Suchmaschinen nicht gestehen und somit auch nicht indexiert. Somit wirken sich die Inhalte des iFrames nicht auf das Raking deiner Website aus.

Problematik Nr.2: 
Die Anpassung der iFrame Breite ist relativ unproblematisch, die Anpassung der Höhe macht es  aber kompliziert.

LĂ€sst sich das mobile.de iFrame auch responsive integrieren?

Ja, im Prinzip lĂ€sst sich das iFrame auch responsive integrieren – sofern sich der Inhalt responsive verhĂ€lt.


Sven Wolfermann von maddesigns.de hat dazu einen sehr interessanten und detaillierten Blog Post verfasst. Den Blog Artikel von Sven findest du hier: Responsive iFrame (maddesigns.de)

Danke Sven. Good job! 👍

Ich möchte auf meiner Homepage unsere Gebrauchtwagen auf mobile.de via iframe einbinden. Wie geht das?

Eine detailierte Schritt-fĂŒr-Schritt Anleitung findest du in unserem Blogartikel: Anleitung: mobile.de per iFrame einbinden – WordPress 🚙

Viel Erfolg beim Umsetzen!

Ich habe ein Problem mit der iFrame Integration in meine Website. Was kann ich tun?

Wenn du keine Web Design Agentur hast, die dich betreut, kannst du gerne auf Agnes zugehen: agnes@fewolino.com ➀ Fewolino Web Design & Consulting ➀ www.fewolino.com

Alternativ rufe uns gerne an ➀ 0178 714 27 48 oder schreibe uns eine E-Mail ➀ support@wordpress-mobile.de

Wir helfen gerne! đŸ‘©đŸ»â€đŸ’» đŸ‘šâ€đŸ’»

Fragen zu iFrame Alternativen

Welche Alternativen zu Fahrzeugdarstellung via iFrame gibt es noch?

Wenn man kein iFrame nutzen möchte, kann man auf ein WordPress Plugin zurĂŒckgreifen oder einfach einen Button mit LINK zur mobile.de HĂ€ndler-Homepage einfĂŒgen.

Es gibt mehrere Anbieter fĂŒr die Darstellung von mobile.de Autos direkt auf der eigenen Kfz Website. Eine Lösung bietet Wehiko an.

Das WordPress Plugin wurde 2020 veröffentlicht. Das Plugin ermöglicht es Web Designer, den Fahrzeugbestand von AutohĂ€ndlern kinderleicht in WordPress zu ĂŒbernehmen und macht so die iFrame Lösung ĂŒberflĂŒssig.

Was sind die Vorteile von einem WordPress Plugin zur Integration von mobile.de Fahrzeugen?

Die AutohĂ€ndler profitieren nicht nur von einer enorm verbesserten Auffindbarkeit fĂŒr Suchmaschinen sondern haben auch weitere nĂŒtzliche Funktionen um Ihren Fahrzeugbestand aus mobile.de perfekt in die Unternehmenswebsite zu integrieren. 

D.h. der Webseitenbesucher fĂŒhlt sich auf der Website nicht so, als ob er gerade auf mobile.de surfen wĂŒrde. Das Kundenerlebnis ist besser vergleichen mit einem einfachen iFrame. Außerdem bleiben die Autohaus Webseitenbesucher lĂ€nger auf der Website – das wiederum wirkt sich positiv auf die Bounce Rate aus (ein Google Ranking Faktor).

Fragen zur mobile.de customerID

Entspricht die “mobile.de CustomerId” der “mobile.de Kundennummer”?

Nein, die customerId entspricht nicht deiner Kundennummer.

Die customerID findet man am einfachsten, indem man die entsprechenden mobile.de HĂ€ndler-Homepage geht (Beispiel 1: https://home.mobile.de/AUTOFR#ses , Beispie 2: ) https://home.mobile.de/AUTOHAUSFUCHSGMBH#ses ) und dann die Rechte Maustast drĂŒckt und “Quelltext anzeigen” klickt. 

Eine detalierte Anleitung wie das geht, findest du hier: mobile.de customerID finden

Wenn ich die Kundennummer (sechsstellig) von mobile.de eintrage, kommt immer ein anderer Anbieter - was mache ich falsch?

Du musst die customerID angeben und NICHT die Kundennummer. Wie du die customerID findest, beschreiben wir hier im Detail. mobile.de customerID finden.

Fragen zur mobile.de XML Schnittstelle

Bietet mobile.de eine Programmierschnittstelle an?

Ja, mobile.de bietet mehere APIs an, die Programmierer und Webdesigner nutzen können.

API steht fĂŒr “Application Programming Interface”. Eine API ist im Grunde ein StĂŒck Software, der von einem Softwaresystem (in diesem Fall mobile.de) anderen Programmen zur Anbindung an das System zur VerfĂŒgung gestellt wird. Die Anbindung erfolgt meist auf Quelltext-Ebene.

Wenn du dich fĂŒr die mobile.de XML Schnittstelle interessiert, findest du die Dokumentation auf der offiziellen mobile.de Seite: https://services.mobile.de/manual/index.html.

Dort werden auch in regelmĂ€ĂŸigen AbstĂ€nden die neuesten API changes veröffentlicht.