Aktionen einbinden
Die Müllsammel-Aktionen der Berliner Initiativen sind offene Daten. Du kannst sie auf deiner eigenen Website anzeigen oder in deinen Kalender holen. Das funktioniert für Initiativen genauso wie für Bezirks- und Stadtteilseiten. Alles ohne Anmeldung.
1. Für deine Website
Der Webseiten-Baustein (Einbett-Widget): ein kurzer Code-Schnipsel, kein Programmieren nötig. Er aktualisiert sich von selbst.
Manche Website-Baukästen lassen fremden Einbett-Code nur in einem kostenpflichtigen Tarif oder gar nicht zu. Dann hilft das Kalender-Abo weiter.
Eine Initiative
Ersetze deine-initiative durch den Namen der Initiative aus ihrer cleanups.berlin-Adresse. Steht die Initiative z. B. unter /i/arkona-trifft-sich, ist es arkona-trifft-sich.
<script src="https://cleanups.berlin/embed.js"
data-cleanups-org="deine-initiative"></script>Berlinweit
Alle aktiven Initiativen mit einem Bezirksfilter zum Eingrenzen.
<script src="https://cleanups.berlin/embed.js"
data-cleanups-berlin></script>Ein Bezirk
Fest auf einen Bezirk oder Ortsteil eingegrenzt, ohne Filter. Welcher Name in den Code gehört, steht in der Adresse der Bezirksseite: bei /r/pankow ist es pankow.
<script src="https://cleanups.berlin/embed.js"
data-cleanups-region="pankow"></script>Einstellungen
Über zusätzliche Attribute steuerst du Umfang und Darstellung. Beispiel mit allen gängigen Optionen:
<script src="https://cleanups.berlin/embed.js"
data-cleanups-berlin
data-cleanups-upcoming="4w"
data-cleanups-view="tile"
data-cleanups-columns="2"
data-cleanups-map="true"></script>| Attribut | Wirkung |
|---|---|
data-cleanups-org | Eine Initiative anzeigen. Als Wert den Namen aus ihrer cleanups.berlin-Adresse. |
data-cleanups-berlin | Alle Aktionen berlinweit, mit Bezirksfilter. Kein Wert nötig. |
data-cleanups-region | Fest auf einen Bezirk oder Ortsteil, ohne Filter. Als Wert den Namen aus der Bezirksadresse. |
data-cleanups-initiatives | Verzeichnis aller Initiativen als Kacheln statt einer Terminliste. Kein Wert nötig. |
data-cleanups-upcoming | Kommende Aktionen begrenzen: Anzahl (z. B. 10) oder Zeitfenster (4w, 2m). |
data-cleanups-past | Vergangene Aktionen zusätzlich zeigen, gleiche Schreibweise wie upcoming. |
data-cleanups-view | Ansicht umschalten: list oder tile. Voreingestellt ist bei einzelnen Initiativen list, im berlinweiten und im Regionsmodus tile. |
data-cleanups-columns | Feste Spaltenzahl in Kachel- und Verzeichnisansicht: 1 bis 6. Ohne Angabe passt sich die Spaltenzahl automatisch an die Breite an. |
data-cleanups-map | Karte oberhalb der Liste anzeigen: true. |
data-cleanups-filter-position | Position des Bezirks-/Ortsteilfilters zur Karte: above (Standard) oder below. |
data-cleanups-share-base | Teilen-Links auf eure Seite statt auf cleanups.berlin lenken. |
data-cleanups-more-url | Den Link am Fuß des Embeds auf eine Seite eurer Wahl lenken, damit Besuchende bei euch bleiben. cleanups.berlin bleibt als Herkunftsangabe sichtbar. |
Für Entwickler:innen: Die Akzentfarbe und Hintergründe lassen sich über CSS Custom Properties (--cb-brand, --cb-surface-card) auf einem umschließenden Element setzen; auf dem Script-Element selbst wirken sie nicht, da der Baustein daneben eingehängt wird. Die Farbe, mit der eine Initiative ihre Aktionen kennzeichnet, legt die Initiative selbst fest; beim Einbinden lässt sie sich nicht ändern.
Ohne JavaScript (iframe)
Für Plattformen, die keinen eigenen Script-Einbau erlauben, aber HTML zulassen.
<iframe src="https://cleanups.berlin/embed/deine-initiative"
width="100%" height="400" frameborder="0"></iframe>Du betreust selbst eine Initiative? Nach dem Login findest du unter Verwalten einen Konfigurator mit Live-Vorschau, der dir den passenden Code erzeugt.
2. Für deinen Kalender
Das Kalender-Abo (ICS-Format): Abonniere die Termine in jedem Kalenderprogramm. Das Abo bleibt automatisch aktuell.
Eine Initiative
https://cleanups.berlin/api/orgs/deine-initiative/feed.ics
Ein Bezirk
Alle Aktionen eines Bezirks gebündelt, über alle Initiativen hinweg.
https://cleanups.berlin/api/regions/pankow/feed.ics
In der Kalender-App als Abo eintragen. Ein einmaliger Import lädt keine neuen Termine nach.
3. Für eigene Anwendungen
Die Programmierschnittstelle (API): wenn du die Daten direkt in eine eigene Anwendung holen möchtest.
Eine dokumentierte öffentliche API ist in Vorbereitung. Bis dahin decken Webseiten-Baustein und Kalender-Abo die meisten Fälle ab.