Viele Gruppen und Organisationen, die über WECHANGE zusammenarbeiten und sich vernetzen, haben zusätzlich eine eigene Website. Dabei bietet es sich an, ausgewählte Inhalte aus eurer WECHANGE-Gruppe oder eurem -Projekt automatisch auf eure Website zu übertragen. Die gute Neuigkeit: Das ist möglich, im Grunde ist es sogar ziemlich einfach. In dieser Artikelreihe erklären wir euch, wie ihr eure Veranstaltungen, Neuigkeiten, (Unter-)Projekte oder die Karte auf eure Website übertragt. Wie das alles zusammen aussehen kann, könnt ihr euch live auf der Website von Lebendiges Lüneburg anschauen.
In diesem ersten Teil fangen wir mit dem Einbetten der Karte an. Ihr könnt sowohl einen gewünschten Ausschnitt der allgemeinen WECHANGE-Karte als auch die individuelle Mitgliederkarte eurer Gruppe oder eures Projektes anzeigen lassen. Dabei handelt es sich nicht etwa um einen Screenshot, sondern um die voll funktionsfähige Karte, die Besucher*innen eurer Website genauso nutzen können, als wären sie auf WECHANGE. Dafür braucht ihr nicht einmal ein Plugin, sondern nur etwas HTML-Code, den ihr mit Hilfe dieses Artikels ganz einfach erstellen könnt. Diese Anleitung gilt daher auch, aber nicht nur für WordPress. Ihr könnt WECHANGE-Karten auch in Websites einbetten, die auf Basis anderer Pagebuilder oder Content Management Systeme laufen.
So kann ein vorgefilterter Ausschnitt der WECHANGE-Karte aussehen.
Interesse an Tipps und Austausch mit anderen WECHANGE-affinen Website-Gestalter*innen? Dann tritt unserem öffentlichen Rocket-Chat-Kanal #wechange-meets-wordpress bei!
Felix Englisch
Als Website-Gestalter der Initiative “Lebendiges Lüneburg”, die lokale Initiativen über WECHANGE vernetzt, hat Felix viel mit der Übertragung von Plattform-Inhalten herumexperimentiert. Seit Dezember 2020 ist er Vorstand der wechange Genossenschaft.
Kurzfassung
Du hast nicht viel Zeit? Dann mach Folgendes:
- Wähle auf der WECHANGE-Karte durch Zoomen, Schieben, Filtern und Suchen den gewünschten Ausschnitt aus.
- Ändere die URL per Hand, indem du hinter
https://wechange.de/map/das Wortembed/einfügst. Die neue URL beginnt jetzt also mithttps://wechange.de/map/embed/?...Wenn du die Seite lädst, müsste die Karte deinen Wünschen entsprechend angezeigt werden, aber die WECHANGE-Menüzeile ist verschwunden. - Kopiere die URL und füge sie in das folgende HTML-Segment ein:
<iframe src="URL-HIER-EINFÜGEN" width="100%" height="400" title="WECHANGE-Karte"></iframe> - Kopiere das angepasste HTML-Segment und füge es in deine Website an der gewünschten Stelle ein. Je nach Bearbeitungsmodus musst du ggf. von der visuellen in die Text-Ansicht wechseln oder einen HTML-Block einfügen und das Segment hier einfügen, damit der Code nicht als Text angezeigt wird.
- Speichere bzw. lass dir die Seitenvorschau anzeigen. Die Karte müsste nun entsprechend deinen Wünschen eingebettet sein. Gratulation!
- Falls es nicht geklappt hat oder du weitere Anpassungen vornehmen möchtest, lies dir die Schritt-für-Schritt-Anleitung durch.
Hintergrund: iFrame – Der Trick an der ganzen Sache
Bevor wir uns die einzelnen Schritte anschauen, wollen wir euch kurz darüber aufklären, wie das Einbetten der Karte überhaupt funktioniert. Zum Einsatz kommt ein sogenannter inline frame, kurz iFrame. Damit werden fremde Webinhalte auf eurer Website innerhalb eines Rahmens (frame) angezeigt. Nicht nur die WECHANGE-Karte könnt ihr dadurch einbetten, sondern auch andere Webinhalte, z. B. die Karte von Morgen. Auch externe Videos werden in der Regel auf diese Weise eingebunden.
Schritt-für-Schritt-Anleitung
Zum Einbetten der Karte braucht ihr das richtige iFrame-Segment, das ihr individuell anpassen und als HTML zu eurer Seite hinzufügen könnt. So kann das Ganze aussehen:
<iframe src="https://wechange.de/map/embed/?limit=100&q=&people=false&events=false&projects=true&groups=true&ideas=true&topics=1%2C4%2C7%2C9&ne_lat=53.26193&ne_lon=10.43289&sw_lat=53.23276&sw_lon=10.37796" width="100%" height="400" title="WECHANGE-Karte mit Gruppen und Projekten in Lüneburg"></iframe>
Keine Angst, das sieht komplizierter aus als es ist. Schauen wir uns die einzelnen Attribute der Reihe nach im Detail an.
Opening & closing tag – <iframe ...></iframe>
Mit diesen Ausdrücken verrätst du der Website, dass du ein iFrame-Segment beginnst (<iframe...>) bzw. schließt (</iframe>). Anstelle der drei Punkte fügst du die Attribute ein, mit denen du festlegst, welchen Webinhalt du wie einbetten möchtest. Diese Attribute musst du wie im Folgenden beschrieben anpassen, opening & closing tag bleiben jedoch unverändert.
Was genau darf’s sein? – src="..."
Das Source-Attribut ist das Wichtigste. Es handelt sich um einen Link, besser gesagt eine individuell angepasste URL. Hiermit legst du fest, welchen Webinhalt genau du einbetten willst. Bei der WECHANGE-Karte heißt das, dass du hier den gewünschten Ausschnitt, die Art und Anzahl der Einträge sowie optional einen Suchbegriff angibst. Dafür braucht es mehrere URL-Parameter, die im hinteren Teil der URL stehen und die jeweils durch ein & voneinander getrennt sind.
Wenn wir die URL https://wechange.de/map/embed/?limit=100&q=&people=false&events=true&projects=true&groups=true&ideas=true&topics=1%2C4%2C7%2C9&ne_lat=53.26193&ne_lon=10.43289&sw_lat=53.23276&sw_lon=10.37796 auftrennen, wird daraus:
https://wechange.de/map/embed/? | Dieser Teil ist immer gleich. |
limit=100 | Optional: Die maximale Anzahl der angezeigten Marker (Standard ist 20). Vor dem ersten Parameter darf kein & stehen. |
&q= | Optional: Der Suchbegriff. |
&people=true | Ob Menschen angezeigt werden sollen (nur öffentlich sichtbare WECHANGE-Nutzer*innen mit Ortsangabe im Profil). Die Alternative zu true ist false. |
&events=true | Ob Veranstaltungen angezeigt werden sollen (nur öffentlich sichtbare Veranstaltungen mit Ortsangabe). |
&projects=true | Ob Projekte angezeigt werden sollen (alle mit Ortsangabe). |
&groups=true | Ob Gruppen angezeigt werden sollen (alle mit Ortsangabe). |
&ideas=true | Ob Ideen angezeigt werden sollen (alle mit Ortsangabe). |
&topics=1%2C4%2C7%2C9 | Optional: Nach welchen Themen gefiltert wird (wird automatisch erzeugt, siehe unten; die Ziffern sind die ID’s der Themen und %2C steht jeweils für ein Komma). |
&ne_lat=53.26193&ne_lon=10.43289&sw_lat=53.23276&sw_lon=10.37796 | Koordinaten (keine Sorge, diese werden automatisch erzeugt, siehe unten). |
Wenn du alle Schnipsel zusammenfügst, bekommst du die URL, die du für den iFrame brauchst (die Reihenfolge ist dabei egal, solange https://wechange.de/map/embed/? ganz vorne steht und danach direkt der erste URL-Parameter ohne & davor folgt – sonst aber schon ein & zwischen allen URL-Parametern)
Wie bekommst du jetzt die richtigen Koordinaten für deine URL? Öffne zuallerst die WECHANGE-Karte. Zoome und verschiebe sie so, dass der gewünschte Ausschnitt angezeigt wird. Die URL im Browser scheint sich dabei auf den ersten Blick nicht zu ändern. Wenn du genau hinschaust, siehst du jedoch, dass sich ganz hinten in der URL die Koordinaten ändern, wenn du die Position oder die Zoom-Stufe änderst. Wenn du die richtigen Ausschnitt hast, kannst du noch die Such- oder die Filterfunktion verwenden, um dir Einträge bestimmter Arten (z. B. Projekte, Ideen…) oder Themen (z. B. Klimaschutz, Bildung…) anzeigen zu lassen bzw. diese auszublenden. Wenn du die Filter anwendest, wird auch hierdurch deine URL angepasst.
Nun musst du die URL nur noch minimal per Hand anpassen. Sie beginnt mit https://wechange.de/map/? – Füge vor dem Fragezeichen embed/ ein, sodass die neue URL folgendermaßen beginnt: https://wechange.de/map/embed/? (dahinter folgen die URL-Parameter).
Wenn du die neue URL lädst, wirst du merken, dass die Karte in deinem Browser nun anders dargestellt wird. Zwar sind der Ausschnitt und der Filter noch wie gewünscht eingestellt, jedoch ist die WECHANGE-Menüzeile verschwunden. Herzlichen Glückwunsch, du hast die URL für deinen Karten-iFrame!
In dieser Vollbildansicht der Karte kannst du weiterhin zoomen, schieben und filtern. Dadurch wird jedoch die URL nicht mehr verändert. Auf die Einbettung der Karte als iFrame hat das daher keinen Einfluss. Dafür kannst du jetzt noch per Hand den URL-Parameter &limit einfügen, wenn du möchtest, dass mehr oder weniger als maximal 20 Marker auf einmal angezeigt werden (siehe Tabelle oben).
Größe anpassen – width="..." & height="..."
Mit diesen Attributen legst du die Breite (width) und Höhe (height) des Rahmens fest, in dem die Karte angezeigt wird. Erlaubt sind Werte in Pixel oder Prozent. Bei Pixel-Werten kann die Einheit px weggelassen werden (height="650" und height="650px" geht beides).
Damit die Karte auch auf Smartphones nicht über den Rand hinaus ragt und trotzdem groß genug ist, dass man etwas erkennt, empfiehlt sich width="100%". Wenn das auf dem Desktop zu groß ist, könnt ihr die Karte innerhalb einer schmaleren Spalte platzieren. Für die Höhe scheinen Werte ab 400 px sinnvoll (height="400").
Mehr Barrierefreiheit – title="..."
Damit Besucher*innen eurer Website, die einen Screenreader oder ähnliches verwenden, auch wissen, was der iFrame enthält, solltest du einen Titel angeben. Dieser soll natürlich nicht ausufernd lang sein, sondern den Inhalt präzise beschreiben, z. B. title="WECHANGE-Karte mit Gruppen und Projekten in Lüneburg".
Weitere Attribute
Zusätzlich zu den genannten Attributen (src, height, width und title) kannst du weitere Attribute zu deinem iFrame-Tag hinzufügen. Hier findest du eine Übersicht über alle erlaubten Attribute. Mit style="..." kannst du außerdem festlegen, ob der iFrame z. B. einen Rahmen haben soll, aber auf den Inhalt der iFrames haben die hier eingefügten CSS-Regeln keinen Einfluss.
In die Website einfügen
Wenn du dein fertiges iFrame-Segment hast, kannst du es in deine Website einfügen. Kopiere den HTML-Code und füge ihn in deine Website an der gewünschten Stelle ein. Je nach Bearbeitungsmodus musst du ggf. von der visuellen in die Text-Ansicht wechseln oder einen HTML-Block erstellen und das Segment hier einfügen, damit es nicht als Absatz missverstanden wird.
Speichere bzw. lass dir die Seitenvorschau anzeigen. Die Karte müsste nun entsprechend deinen Wünschen eingebettet sein. Gratulation!
Mitgliederkarte
Wie am Anfang versprochen, könnt ihr nicht nur einen Ausschnitt der allgemeinen WECHANGE-Karte einbetten, sondern auch die individuelle Mitgliederkarte eurer Gruppe oder eures Projektes. Auf WECHANGE selbst könnt ihr euch die Karte auch anzeigen lassen (die URL zum Einbetten erhaltet ihr auf diese Weise jedoch nicht). Ihr findet sie, indem ihr über das Gruppen- bzw. Projektmenü zu “Mitglieder” wechselt. Standardmäßig werden diejenigen Mitglieder angezeigt, bei deinen ein Ort angegeben ist. Bei Gruppen werden zusätzlich zugeordnete Unterprojekte angezeigt.
Das Einbetten der Mitgliederkarte funktioniert auf die gleiche Art und Weise und auch mit denselben Attributen und URL-Parametern wie bei der allgemeinen Karte. Der einzige Unterschied ist der, dass es einen zusätzlichen URL-Parameter für das src-Attribut gibt, und zwar &filter_group. Der URL-Parameter heißt auch so, wenn es sich bei euch um ein WECHANGE-Projekt und keine -Gruppe handelt, heißt der URL-Parameter so). Hier gibst du die ID eurer Gruppe oder eures Projektes ein. Meistens ist das eine vierstellige Zahl.
Mitgliederkarte am Beispiel der Gruppe “WECHANGE Betatest-Community” (Unter-Projekte und Veranstaltungen könnten hier auch angezeigt werden)
Bleibt nur noch die Frage: Wie findet ich die ID heraus? Das ist ganz einfach. Navigiere auf WECHANGE zum entsprechenden Gruppen- bzw. Projektdashboard oder zur jeweiligen Microsite. Mache nun irgendwo auf der Seite einen Rechtsklick und wähle “Quelltext anzeigen” (engl.: “View Page Source”). Der Shortcut hierfür ist Strg + U in Windows und Option + Command + U bei Mac.
Keinen Schreck bekommen! Der HTML-Quelltext, den du nun siehst, braucht dich nicht zu interessieren. Du suchst nur nach einer Sache, und zwar der data-id. Öffne die Suchfunktion deines Browsers (bei Windows über Strg + F) und suche nach data-id. Es müsste genau einen Treffer geben. Merke dir die Zahl dahinter (oder kopiere sie am besten). Im iFrame-Segment ergänzt du den src-Link einfach um den URL-Parameter &filter_group=???? (die Fragezeichen natürlich durch eure data-id ersetzen). Und fertig! Mit den weiteren URL-Parametern (siehe Tabelle oben) kannst du jetzt noch auswählen, was, wer und wie viel angezeigt werden soll. Die passenden Koordinaten erhältst du dabei nicht über das Verschieben der Karte im Mitgliederverzeichnis deiner Gruppe oder deines Projektes, sondern über die allgemeine Karte.
So, das war es nun wirklich. Wir von WECHANGE wünschen euch viel Spaß und Erfolg beim Ausprobieren. In Kürze erscheint hier der nächste Artikel, in dem wir euch verraten, wie ihr die Veranstaltungen eurer Gruppe oder eures Projektes auf eure Website übertragt. Bis dahin senden wir euch solidarische und klimabewegte Grüße!