Nutzer:innen von Komoot und Strava können geplante und gemachte Touren bzw. ihre Aktivitäten in einer anderen Website – z.B. einem WordPress-Blog – einbetten.
Ich habe die Einbettungen beider Plattformen schon mehrfach in meinen Beiträgen über meine Rennrad- und Mountainbike-Touren getestet. In diesem Beitrag zeige ich, wie du die Touren von Komoot und Strava auf deiner WordPress-Website einbettest und wo die Unterschiede der beiden Anbieter sind.
Bonus: Ich erkläre, wie die Einbettung datenschutzfreundlich mit dem WordPress-Plugin Borlabs Cookie umgesetzt werden kann. Vorausgesetzt, du verwendest dieses Plugin.
Komoot-Tour einbetten
Die Einbettung von Komoot hat richtig viel zu bieten und ist ein echter Mehrwert auf der eigenen Website. Neben der Karte und den Eckdaten der Tour (Distanz, Höhenmeter, Geschwindigkeit, Zeit) wird auch das Höhenprofil angezeigt. Und richtig gut ist, dass man sich per Mouseover sogar die jeweilige Stelle auf der Karte anzeigen lassen kann. Zusätzlich kann man zwischen Karte und Bildergalerie wechseln. Toll gemacht von Komoot!
Hier zunächst 2 Screenshots:
Und nun die richtige Komoot-Einbettung, hinter einem Content-Blocker von „Borlabs Cookie“ verborgen, sofern du nicht ohnehin allen Cookies meiner Website zugestimmt hast:
Mit dem Laden der Tour akzeptierst du die Datenschutzerklärung von Komoot.
Und so verwendest du eine Einbettung von Komoot in deinem WordPress-Blog:
- Gehe in deinem Komoot-Konto im Bereich „Touren“ zur gewünschten Tour und klicke rechts oben auf den Button „Teilen“ und dann auf „Einbetten“.
- Wähle, ob zuerst die Karte (Standard) oder zuerst die Bildergalerie angezeigt werden soll.
- Kopiere dann den Einbettungscode (iframe) und füge ihn in deinem WordPress-Editor in einen HTML-Block ein.
Borlabs: Der Content-Blocker erkennt dieses iframe automatisch und überlagert es vom Standard-Content-Blocker. Optional kannst du dir einen eigenen Content-Blocker mit Komoot-Logo und eigenem Text anlegen.
Strava-Aktivität einbetten
Im Vergleich zu Komoot ist die Strava-Einbettung etwas einfacher, macht aber trotzdem einen guten Eindruck auf der eigenen Website. Es werden Titel, Auszug der Beschreibung, Distanz, Höhenmeter und Zeit angezeigt. Darunter werden die Karte und optionale Bilder eingebunden. Ein Höhenprofil fehlt leider und die Karte ist auch nicht interaktiv.
Hier zunächst wieder 2 Screenshots:
Und nun die richtige Strava-Einbettung, hinter einem Content-Blocker von „Borlabs Cookie“ verborgen, sofern du nicht ohnehin allen Cookies meiner Website zugestimmt hast:
Mit dem Laden der Aktivität akzeptierst du die Datenschutzerklärung von Strava.
Und so verwendest du eine Einbettung von Strava in deinem WordPress-Blog:
- Gehe in deinem Strava-Konto im Bereich „Meine Aktivitäten“ zur gewünschten Tour und klicke rechts oben auf das Teilen-Symbol.
- Kopiere dann den Einbettungscode (div und script) und füge ihn in deinem WordPress-Editor in einen HTML-Block ein.
Borlabs: Der Content-Blocker erkennt diese Einbettung nicht automatisch. Wenn du sie mit dem Standard-Content-Blocker blockieren möchtest, füge den gesamten Code-Schnipsel in den folgenden Shortcode ein:
[borlabs-cookie id="default" type="content-blocker"]...hier Strava-Code einfügen...[/borlabs-cookie]
Optional kannst du dir einen eigenen Content-Blocker mit Strava-Logo und eigenem Text anlegen.
Fazit
Sowohl Komoot, als auch Strava machen es Nutzer:innen ihrer Plattformen sehr einfach, Aktivitäten auf der eigenen Website oder im eigenen Blog einzubetten. Die Komoot-Einbettung finde ich etwas ansprechender, da sie eine interaktive Karte inklusive Höhenprofil enthält.
Tipps
Voraussetzung bei beiden Plattformen ist natürlich, dass die Sichtbarkeit der Aktivitäten auf „öffentlich“ eingestellt ist. Private oder nur für Kontakte sichtbare Touren können nicht öffentlich geteilt werden.
Wenn du diese Einbettungen verwendest, solltest du deine Besucher darüber in deiner Datenschutzerklärung informieren. Zusätzlich empfehle ich die Nutzung eines Content-Blockers, wie ihn „Borlabs Cookie“ anbietet.
Dieser Beitrag wurde aktualisiert am: 05. Juli 2022
Wer möchte, kann mir gern bei Strava oder Komoot folgen.
Strava: https://www.strava.com/athletes/matthiaspabst
Komoot: https://www.komoot.de/user/594673787394
3 Antworten auf „Touren von Komoot und Strava in WordPress einbetten“
Riesen Dank! Es kann so einfach sein… Ab sofort hab ich dann endlich schicke Komoot Touren auf meinem Blog. Merci! 🙂
Hallo Matthias, zunächst vielen Dank für diesen super Post. Ich nutze Borlabs und habe komoot via iframe auf meiner WordPress Seite eingebunden. Aber weder blockt Borlabs die iframs standardmäßig, noch sieht bei mir der Content Blocker via Shortcode so elegant aus, wie bei dir. Hast du einen Tipp für mich, wie du das gemacht hast?
Liebe Grüße und danke,
Andi
Hallo Andi! Ich habe mir für Komoot auch noch einen eigenen Content-Blocker angelegt (für Hosts komoot.de und http://www.komoot.de). Das HTML sieht wie folgt aus:
<div class="_brlbs-content-blocker">
<div class="_brlbs-default _brlbs-komoot">
<img class="wp-image-29233 size-medium" src="https://kurz-nach-spaet.de/wp-content/uploads/2022/01/logo-komoot-300x81.png" alt="Komoot Logo" width="150" height="40" />
<p>Mit dem Laden der Tour akzeptierst du die Datenschutzerklärung von %%name%%.</p>
<p><a href="%%privacy_policy_url%%" target="_blank" rel="nofollow noopener noreferrer ugc">Mehr erfahren</a></p>
<p><a class="_brlbs-btn" href="#" data-borlabs-cookie-unblock role="button" rel="nofollow ugc">Tour anzeigen</a></p>
<p><label><input type="checkbox" name="unblockAll" value="1"> <small>%%name%% immer entsperren</small></label></p>
</div>
</div>
Logo bitte auf eigener Website hochladen und Bild-URL ersetzen!
Und das ist das CSS:
.BorlabsCookie ._brlbs-strava {border: 1px solid #e1e8ed;
padding: 3rem 2rem !important;
}
.BorlabsCookie ._brlbs-komoot p {
margin-bottom: 1rem;
}
.BorlabsCookie ._brlbs-komoot img {
width: 150px;
margin: 1rem auto;
}
.BorlabsCookie ._brlbs-komoot a._brlbs-btn {
background: #6aa127;
border-radius: 2px;
}
.BorlabsCookie ._brlbs-komoot a._brlbs-btn:hover {
background: rgba(82, 137, 6);
}