Aktuelle Corona Inzidenz automatisch auf der eigenen Homepage ausgeben

Webmaster können einige der auf corona-zahlen-heute.de be­reit­ge­stell­ten Zah­len, kos­ten­los und ohne großen Auf­wand, als frei-gestalt­ba­ren Fließ­text, auf ihrer Home­page aus­ge­ben. Ein­fach die Java­Script-Datei mit­tels fol­gen­dem HTML-Code (z. B. zwi­schen dem HEAD-Tag) ein­binden:

<script async src="https://corona-zahlen-heute.de/webmaster/covid19data.js" crossorigin="anonymous"></script>

Werte an beliebiger Stelle der Webseite ausgeben

Dieses Beispiel bezieht sich auf den Daten­satz von Deut­sch­land, mit der Location-ID: C1. Für andere Län­der, wie auch Bun­des­länder und Land­kreise ist diese ein­fach aus­zu­tau­schen. Die Location-ID wird auf der je­wei­li­gen Sta­tis­tik­seite der je­wei­li­gen Re­gion am Ende der Web­seite (im Foo­ter-Be­reich) an­ge­zeigt. Hilf­reich ist in dem Zu­sam­men­hang auch die Such­funk­tion oder Über­sichts­seite aller Orte.

7-Tage-Inzi­denz

Die Ausgabe der 7-Tage-Inzi­denz von Deutschland erfolgt an be­lie­bi­ger Stelle der Web­seite über fol­gen­den HTML-Tag:

<span class="czhde" data-location="C1" data-value="incidence" data-round="false"></span>

Hospitalisierungsrate

Für Deutschland so­wie seinen 16 Bun­des­län­dern und eini­gen anderen Län­dern (wird nicht in allen Län­dern an­ge­ge­ben), kann außer­dem über fol­gen­den HTML-Tag auch die Hos­pi­ta­li­sie­rungs­rate aus­ge­ge­ben werden:

<span class="czhde" data-location="C1" data-value="hospitalization" data-round="false"></span>

Meldedatum

Zusätzlich lässt sich auch das Datum des Melde­stan­des ausgeben:

<span class="czhde" data-location="C1" data-value="incidence-date"></span>

bzw.

<span class="czhde" data-location="C1" data-value="hospitalization-date"></span>

Werte runden

Der Ausgabewert wird auto­ma­tisch auf eine Nach­komma­stelle ge­run­det. Ist eine Ganz­zahl er­wünscht, so ist das Attri­but data-round von false auf true zu setzen.

Formatierungen

Optische Formatierungen der Zah­len las­sen sich eigen­stän­dig über die CSS-Klasse czhde vor­nehmen. Nach­dem ein Wert ge­laden wurde, be­kommt die­ser zu­sätz­lich die Klasse init zugewiesen.

Schnelle Ladezeit (auch bei mehreren Datenpunkten)

Es ist möglich, bis zu 50 Daten­punkte auf einer Seite aus­zu­ge­ben. Die Datei muss da­für nicht mehr­fach ge­la­den wer­den. Die Location-ID (im Bei­spiel­fall von Deutsch­land) ist in den je­wei­li­gen HTML-Tags aus­zu­tauschen. Das Script lädt asyn­chron, also ohne den übri­gen Sei­ten­auf­bau zu blockieren. Mit einer Datei­größe von unter 25 kb ist es außer­dem sehr klein. Und dank moder­ner Brotli-Kom­pri­mie­rung wer­den tat­säch­lich so­gar nur knapp 7 kb über das Inter­net übertragen.

Optional lässt sich die Lade­­zeit mittels fol­gen­der An­wei­sung (mög­lichst weit oben inner­halb des HEAD-Tags) oft­mals noch wei­ter be­schleu­ni­gen:

<link rel="preconnect" href="https://corona-zahlen-heute.de/webmaster/covid19data.js">
<link rel="preload" href="https://corona-zahlen-heute.de/webmaster/covid19data.js" as="script" crossorigin="anonymous">

Einen Platzhalter während des Ladevorgangs anzeigen

Zwischen dem span-Tag kann ein Platz­hal­ter­text oder sons­ti­ges -element ge­setzt wer­den. Die­ser wird, nach­dem der Lade­vor­gang ab­ge­schlos­sen ist, durch den je­wei­li­gen Inzi­denz­wert über­schrie­ben. Be­su­cher mit sehr lang­sa­mer Inter­net­ver­bin­dung (z. B. bei schlech­tem Mo­bil­emp­fang) wis­sen so, dass der Wert noch ge­la­den wird.

<span class="czhde" data-location="C1" data-value="incidence" data-round="false">(Wert lädt)</span>

bzw.

<span class="czhde" data-location="C1" data-value="hospitalization" data-round="false">(Wert lädt)</span>

Nutzungsbedingungen

Die Nutzung dieser Funk­tion er­folgt un­ent­gelt­lich und völ­lig ohne Back­link­zwang! Ein op­tio­na­ler Link auf die je­wei­lige Corona-Sta­tis­tik des Ortes (z. B. als Quellen­an­gabe) zeigt dennoch An­er­ken­nung und bie­tet zu­dem einen ge­wis­sen Mehr­wert für den Be­su­cher. Die Roh­daten­sätze stam­men vom RKI (Deutsch­land) oder Our World in Data (welt­weit) und sind nach CC BY 4.0 frei ver­füg­bar. Sie wur­den von corona-zahlen-heute.de auf­be­rei­tet und werden im Rah­men dieses Scrip­tes un­ter glei­cher Li­zenz (für eine kom­mer­zielle und nicht kom­mer­zielle Nut­zung) be­reit­ge­stellt.

Das Script ist noch recht neu. Sollte es beim Ein­bau haken oder plötz­lich nicht mehr rich­tig funk­tio­nie­ren, ein­fach kurz mailen: hallocorona-zahlen-heutede