Mit dem ThankU Counter-Badge kannst Du dynamisch die aktuelle Anzahl Deiner empfangenen und versendeten ThankUs auf Deiner eigenen Website präsentieren. Wie Du den Counter-Badge in Deine Website integrieren kannst, erfährst du in diesem Beitrag.
Schritt 1: Bevor wir starten
Überlege Dir, ob Du die für den Counter-Badge erforderlichen Dateien auf Deinem eigenen Server hosten möchtest, oder die Dateien lieber über eine Verlinkung auf Deiner Website einbindest. Während die erste Variante besser für die Ladezeiten Deiner Website sein dürfte, ist die zweite Variante wohl einfacher und schneller erledigt.
- Variante 1 – Dateien auf dem eigenen Server hosten:
- Lade die erforderlichen Dateien herunter: https://github.com/thanku/counter-badge/archive/refs/heads/master.zip.
- Extrahiere den .zip Ordner und lade den entpackten Ordner auf deinen Server hoch.
- Merke dir den Pfad zur “counter-badge.js” Datei im Unterordner “libs”.
- Füge auf deiner Website das folgende Script zum HTML-Code hinzu:
<script type="module" src="path/to/counter-badge.js"></script>
- Variante 2 – Dateien per Verlinkung einbinden:
- Füge auf Deiner Website das folgende Script zum HTML-Code hinzu:
<script type="module" src="https://unpkg.com/@thanku/counter-badge"></script>
Damit Du vom vollen ThankU Look & Feel profitieren kannst, solltest Du zusätzlich noch dafür sorgen, dass die Schriftart “Exo” auf Deiner Website verfügbar ist (via Google Web-Fonts, lokal gehosted oder über das folgende Script innerhalb des <head> Bereichs in Deinem HTML-Code:
<link href="https://www.thanku.social/fonts/exo.css" rel="stylesheet" />
Schritt 2: Counter-Badge Element erstellen
- Füge an der Stelle auf Deiner Website, wo der Counter-Badge angezeigt werden soll, das Element (s. u.) hinzu.
- Ergänze den Namen Deiner ThankU-Page mittels des Attributs “slug” .
- Ergänze den Link zu Deiner ThankU-Page (https://thx.to/: …) und den entsprechenden Text, der angezeigt werden soll.
Counter-Badge Element:
<thanku-counter-badge slug="martin"> <a href="https://thx.to/:martin">Visit my ThankU page</a> </thanku-counter-badge>
Schritt 3: Anpassen des Counter-Badges
Die Standard-Größe des Counter-Badges beträgt 100px. Du kannst die Größe selbst anpassen, indem Du das Element beispielsweise mit inline-CSS (style=”–size: …px”) ergänzt:
<thanku-counter-badge slug="martin" style="--size: 50px;"> <a href="https://thx.to/:martin">Visit my ThankU page</a> </thanku-counter-badge>
Schritt 4: Überprüfen der Implementierung
Gratulation: Das war’s schon. Wenn Du alles richtig gemacht hast, sollte der ThankU Counter-Badge nun an der gewünschten Stelle auf Deiner Website erscheinen.
Dir ist das alles zu kompliziert? Bitte doch einfach Deine:n Webdesigner:in oder -Admin, diese einfache Aufgabe für Dich zu erledigen – mehr als ein paar Minuten dürfte es ihn / sie nicht kosten.
Eine technisch detaillierte Anleitung, Angaben zur Lizenzierung sowie weiteren Beispiel-Code findest du übrigens auf GitHub.
Viel Spaß mit dem ThankU-Counter Badge!
