Ko-fi in WordPress einbinden - Spenden-Button ohne Gebühren

Ein Praxisbericht mit Ko-fi, PayPal, PHP und einem Hauch Markenrecht

Du möchtest einen Spenden-Button in WordPress einbinden ohne Abo-Modell, ohne Werbung, ohne technischen Aufwand? Diese Anleitung zeigt Dir Schritt für Schritt, wie Du Ko-fi in WordPress einbindest: vom Account anlegen über die Zahlungsmethode bis zum fertig integrierten Button auf Deiner Website. Wir klären außerdem, warum Ko-fi gegenüber Buy me a Coffee die bessere Wahl ist, was es mit dem Markenrecht auf sich hat, und wie der Button automatisch mehrsprachig funktioniert.

Um diese Anleitung verständlicher zu machen, begleiten dich drei Personen: Die typischen Büro-Charaktere: Die kompetente IT-Kollegin, der selbsternannte Experte und der ehrliche Anfänger. Diese drei Perspektiven helfen dir, typische Stolperfallen zu erkennen. Tanja ist die IT-Expertin. Sie weiß, wie es funktioniert, erklärt geduldig und strukturiert – und lässt sich von schlechten Ratschlägen nicht aus der Ruhe bringen. Wenn du eine Frage hast, hat Tanja die Antwort. Bernd ist der selbsternannte „Experte“, der alles besser weiß und meistens falsch liegt. Seine Abkürzungen und sein Halbwissen führen regelmäßig zu Problemen. Er steht für alle gefährlichen Mythen und schlechten Praktiken, die du vermeiden solltest. Ulf ist der Lernende, genau wie du. Er stellt die Fragen, die dir im Kopf herumschwirren, und braucht manchmal einen Vergleich aus dem Alltag, um IT zu verstehen. Wenn Ulf etwas nicht versteht, ist das völlig in Ordnung, dafür ist Tanja da.

Und… Action!

Warum überhaupt ein Kaffee-Button?

Bernd wedelt mit einem zerknitterten Zettel: „Ich hab das schon gelöst. Ich hab meinen PayPal-Link einfach in die Fußzeile kopiert. Fertig. Kostet nix, funktioniert seit 2011.“
Tanja schaut ihn an: „Seit 2011. Mobiloptimiert?“
Stille.
Tanja: „Und wenn jemand 3 Euro spendet – behältst Du davon wie viel?“
Bernd schaut auf den Zettel: „…Das regelt doch PayPal.“
Tanja: „PayPal nimmt Gebühren. Buy me a Coffee nimmt fünf Prozent obendrauf. Und dein Link aus 2011 sieht aus wie eine Phishing-Seite.“
Ulf hebt die Hand: „Was ist überhaupt ein Spenden-Button?“
Tanja: „Gute Frage, Ulf. Stell Dir vor, Du betreibst ein Blog, einen YouTube-Kanal, eine Website – kurz: Du produzierst Inhalte, die Menschen nützlich finden. Werbung willst Du keine schalten. Ein Abo-Modell ist Dir zu aufwendig. Aber ab und zu spendet jemand gerne einen kleinen Betrag, wenn er findet, dass Deine Arbeit es wert war.
Genau dafür gibt es Spenden-Plattformen. Sie stellen Dir eine fertige Zahlungsseite bereit, du verlinkst sie von Deiner Website aus – und Besucher können mit wenigen Klicks eine Einmalzahlung schicken. Kein Abo, keine Registrierungspflicht für den Spender, keine technische Eigenentwicklung.
Das bekannteste dieser Konzepte heißt „Buy me a Coffee“ – eine Plattform, die Creators (Content-Ersteller, also Menschen, die regelmäßig Inhalte veröffentlichen) ermöglicht, symbolische Einmalspenden zu empfangen. Die Idee ist so schlicht wie charmant: Wer mag, gibt. Wer nicht mag, liest einfach weiter.“

Für foundic.org eine Plattform rund um KI-News, Schulungen und Praxisprojekte war genau das der Ausgangspunkt. Unabhängig bleiben, werbefrei arbeiten und trotzdem langfristig finanziert sein. Der Weg dorthin führte allerdings nicht direkt zu Buy me a Coffee, sondern zunächst durch eine nüchterne Plattformanalyse. Und die hatte eine überraschende Empfehlung parat.

Ko-fi vs. Buy me a Coffee: Warum Ko-fi die bessere Wahl ist

Bernd sagt: „Buy me a Coffee klingt gut. Die kenn ich. Fertig.“
Tanja öffnet eine Tabelle: „Hier. Fünf Prozent Plattformgebühr auf jede Spende. Dazu nur Stripe als Zahlungsweg.“
Bernd: „Stripe ist doch gut.“
Tanja: „Für Kreditkarten, ja. Aber der größte Teil deiner Leser zahlt mit PayPal.“
Ulf blinzelt: „Ist das so wie… wenn der Verein nur Barzahlung akzeptiert, aber alle ihre Mitgliedschaft per Lastschrift einrichten wollen?“
Tanja nickt: „Genau so.“

Bevor Du irgendwo einen Account erstellst, lohnt sich ein kurzer Blick auf die Alternativen. Denn Plattformgebühren und Zahlungswege sind keine Nebensache sie entscheiden darüber, wie viel von einer Spende tatsächlich bei Dir ankommt.

Plattform	Gebühr auf Einmalspenden	Zahlungswege
Buy me a Coffee	5 %	Nur Stripe
Ko-fi	0 %	Stripe + PayPal
Patreon	5–12 %	Stripe
Gumroad	10 %	Stripe

Ko-fi nimmt null Prozent auf Einmalspenden. Das klingt nach einer Kleinigkeit – aber hochgerechnet über Monate und viele Spender ist der Unterschied erheblich. Dazu kommt: Ko-fi unterstützt PayPal als Zahlungsweg, was im deutschsprachigen Raum ein entscheidender Vorteil ist. Und: Spender müssen sich kein eigenes Ko-fi-Konto anlegen, um zu spenden.

Die Entscheidung für foundic.org fiel klar auf Ko-fi.

Fakten-Check: Ko-fi auf einen Blick

Keine Plattformgebühr auf Einmalspenden (es fallen nur die normalen Gebühren von Stripe oder PayPal an)

Unterstützt PayPal und Stripe parallel

Spender benötigen kein Ko-fi-Konto

Kostenloser Account ohne versteckte Monatspauschalen

WordPress-Integration über Embed-Code möglich

Schnellantwort: Was kostet Ko-fi?
Ko-fi erhebt 0 % Plattformgebühren auf Einmalspenden. Es fallen ausschließlich die normalen Transaktionsgebühren des gewählten Zahlungsdienstleisters an: bei PayPal ca. 1,90 % + 0,35 € pro Transaktion (je nach Kontomodell), bei Stripe ca. 1,5 % + 0,25 € für europäische Karten. Buy me a Coffee nimmt zusätzlich 5 % auf jede Spende. Bei Ko-fi bleibt dieser Anteil vollständig bei Dir.

Kopfnuss: Schau Dir kurz die Zahlungsgewohnheiten Deiner Zielgruppe an. Überwiegend deutschsprachig? Dann ist PayPal-Support keine Kür, sondern Pflicht. Überwiegend international? Dann reicht Stripe oft aus. Diese Frage entscheidet, welche Plattform für Dich richtig ist.

Ein kleines Markenrecht-Problem – und seine elegante Lösung

Bernd sagt: „Ich würd den Button einfach ‚Buy me a coffee‘ nennen. Klingt sympathisch. Den Text kennt jeder.“
Tanja setzt ihre Kaffeetasse ab. Sehr langsam: „Das ist eine eingetragene Marke.“
Bernd: „Echt jetzt.“
Tanja: „USPTO, Registrierung Nr. 6503375, seit September 2021. Schutzbereich: Software und Webseiten, die Creators Spendenempfang ermöglichen.“
Bernd: „…Aber das sind doch nur vier Wörter.“
Tanja: „Vier Wörter, die einer Firma gehören.“
Ulf: „Gibt’s denn nicht einfach was, das genauso klingt, aber nicht deren ist? Wie wenn man ‚Tempo‘ sagt, aber eigentlich ein No-Name-Taschentuch meint?“
Tanja: „Genau das machen wir.“

Buy Me a Coffee ist eine beim US-Patentamt (USPTO, United States Patent and Trademark Office) eingetragene Marke. Inhaber ist Publisherr Inc. Der Schutzbereich umfasst ausdrücklich Software und Webseiten, die Creators ermöglichen, Spenden zu empfangen. Den exakten Markennamen auf einem Konkurrenzprodukt zu verwenden ist juristisch riskant – selbst wenn es nur vier Wörter und ein Koffein-Versprechen sind.

Die Lösung ist einfach: eigene Formulierungen wählen, die den Geist des Originals tragen, ohne dessen Markenrecht zu berühren. Für foundic.org wurden zwei Varianten festgelegt:

Deutsch: „Lade uns auf einen Kaffee ein“
Englisch: „Treat us to a coffee“

Das „uns“ ist dabei kein Zufall. Es betont den Teamcharakter hinter foundic.org und macht die Einladung persönlicher. Markenrechtlich ist es sauber. Und sprachlich funktioniert es in beiden Sprachen gut.

Fakten-Check: Marke vs. Generikum

„Buy Me a Coffee“ = eingetragene Marke (USPTO), nicht verwenden auf Ko-fi-Buttons oder anderen Plattformen

Alternative Formulierungen wie „Treat us to a coffee“, „Spendiere uns einen Kaffee“ oder „Support uns“ sind unbedenklich

Faustregel: Wenn ein Ausdruck gleichzeitig Markenname und Produktbeschreibung ist, lieber umformulieren

Kopfnuss: Überleg Dir jetzt schon Deinen eigenen Button-Text. Nicht den generischen („Support me on Ko-fi“), sondern etwas, das zu Dir und Deiner Zielgruppe passt. Schreib ihn auf – Du wirst ihn gleich brauchen.

Schritt 1: Ko-fi-Konto erstellen

Bernd hat bereits einen Tab geöffnet: „Ich hab mich schon registriert. Username: ‚DerBernd1967‘.“
Tanja: „Und Dein Ko-fi-Link wäre dann…?“
Bernd: „ko-fi.com/DerBernd1967.“
Tanja: „Das steht dann auf Deiner professionellen Website.“
Bernd: „…Ich kann das noch ändern.“
Tanja: „Ja. Mach das.“

Los geht’s auf ko-fi.com. Die Startseite begrüßt Dich mit dem Versprechen „Love what you do and make money too“ und einem großen „Get started“-Button.

Die Registrierung

Das Formular ist angenehm schlank: Display name (Anzeigename – das ist der Name, den Besucher Deiner Ko-fi-Seite sehen), E-Mail-Adresse und Passwort. Alternativ kannst Du Dich über Twitter, Google oder Apple registrieren – das spart die manuelle Dateneingabe.

Beim Display name gilt: Trag sofort den Namen ein, unter dem Deine Website bekannt ist – also zum Beispiel „FOUNDIC“ statt Deinen Vornamen. Du kannst ihn zwar später ändern, aber es ist einfacher, direkt richtig anzufangen.

Den richtigen Username wählen

Gleich nach der Registrierung fragt Ko-fi nach einem Username – denn dieser wird zur Grundlage Deiner persönlichen Ko-fi-URL. Ko-fi schlägt etwas vor (meistens Vorname plus Zufallszahl), das Du aber sofort durch Deinen eigenen Markennamen ersetzen solltest.

Ulf würde fragen: „Ist das so wie die Rückennummer beim Fußball? Die behältst Du die ganze Saison?“

Fast. Der Username wird Teil Deiner dauerhaften Web-Adresse. ko-fi.com/foundic ist sauber, merkbar und professionell. ko-fi.com/michael78459 ist es nicht.

Ko-fi weist freundlich darauf hin: „You can change it anytime!“ – technisch stimmt das, aber es ist trotzdem besser, direkt den richtigen Namen zu wählen. Sobald Deine Ko-fi-URL auf Deiner Website verlinkt ist, wird eine Änderung aufwendiger.

Kategorien: Sichtbarkeit auf der Explore-Seite

Nach dem Username-Schritt fragt Ko-fi nach Deinen Interessenkategorien. Diese werden auf Ko-fis interner Explore-Seite verwendet, auf der Unterstützer neue Creators entdecken können.

Hier eine ehrliche Einschätzung: Die meisten Spender werden nicht über Ko-fis Explore-Seite zu Dir kommen, sondern über den direkten Link auf Deiner eigenen Website. Die Kategorien sind kein Traffic-Wunder, sie schaden aber auch nichts. Wähle einfach, was Deinen Inhalt am treffendsten beschreibt.

Für foundic.org wurden fünf Kategorien gewählt: Blogging, Education, News, Science & Tech und Software.

Das Profil: Name und Bio

Im nächsten Schritt kommt die Bio – eine kurze Selbstbeschreibung, die auf Deiner Ko-fi-Profilseite erscheint. Hier empfiehlt sich Englisch, weil Ko-fi eine internationale Plattform ist und Deine Profilseite potenziell von Menschen weltweit aufgerufen wird.

Für foundic.org: Display Name auf „FOUNDIC“ (später noch auf „FOUNDIC.org“), Bio auf Englisch:
„FOUNDIC.org – AI news, training and hands-on projects. Making artificial intelligence accessible and practical.“

Fakten-Check: Registrierung im Überblick

ko-fi.com aufrufen → „Get started“

Display name, E-Mail, Passwort eingeben (oder Social Login)

Username wählen → wird zur dauerhaften Ko-fi-URL (ko-fi.com/deinname)

Interessenkategorien wählen (optional, aber empfohlen)

Display name und Bio ausfüllen – Tipp: Display name = Markenname, Bio gerne auf Englisch

Kopfnuss: Bevor Du registrierst – schreib Deinen Wunsch-Username auf. Prüfe kurz, ob ko-fi.com/deinnamenoch frei ist, indem Du die URL einfach im Browser aufrufst. Existiert keine Seite, ist der Name noch frei.

Schritt 2: E-Mail bestätigen

Ko-fi verlangt eine E-Mail-Verifizierung, bevor Deine Seite aktiv wird. Das ist kein bürokratisches Ärgernis, sondern Sicherheitsstandard: Ohne Bestätigung könnte jeder mit einer fremden E-Mail-Adresse einen Account anlegen.

Ein vierstelliger Code wird an Deine hinterlegte Adresse geschickt. Den Code ins Formular eingeben – alternativ kannst Du auch auf den Link in der E-Mail klicken.

Keine E-Mail bekommen? Wirf einen Blick in den Spam-Ordner. Ko-fi-Mails landen dort gelegentlich, weil sie von automatischen Systemen verschickt werden und Spam-Filter manchmal überreagieren.

Schritt 3: Die Seite ist live

„Your page is live! foundic“ – Ko-fi ist nicht sparsam mit Erfolgsmeldungen, und das ist völlig berechtigt. Deine Profilseite unter ko-fi.com/foundic existiert ab diesem Moment wirklich.

Gleichzeitig öffnet Ko-fi direkt den Dialog zur Zahlungsmethode. Kein Umweg über Einstellungen, kein verstecktes Untermenü. Das ist gut so – ohne Zahlungsmethode kann niemand spenden.

Schritt 4: Zahlungsmethode verbinden

Bernd: „Ich nehm einfach meine Firmenkreditkarte“
Tanja: „Bernd. Ko-fi zahlt Spenden auf Dein Empfängerkonto aus. Du musst Dein PayPal oder Stripe damit verbinden – nicht Deine Kreditkarte.“
Bernd: „Ich hab kein PayPal.“
Ulf: „Das ist doch wie beim Verein: Wenn Du kein Konto bei der richtigen Bank hast, bekommst Du keine Überweisung.“
Tanja**: „Genau.“

Ko-fi bietet zwei Zahlungswege: PayPal und Stripe.
PayPal ist der am weitesten verbreitete Online-Bezahldienst im deutschsprachigen Raum. Akzeptiert Zahlungen aus aller Welt, schnelle Auszahlung, kein technisches Setup nötig.
Stripe ist ein Bezahldienst, der Kredit- und Debitkarten (Visa, Mastercard), Google Pay und Apple Pay unterstützt. Etwas technischer in der Einrichtung, aber unverzichtbar für Besucher ohne PayPal-Konto.
Beide können parallel aktiv sein – das ist sogar empfehlenswert, weil Du damit maximale Reichweite erreichst.

Die Verbindung läuft nicht über Ko-fi, sondern direkt über das jeweilige Zahlungsdienstleister-Login. Für PayPal: Du klickst auf „Connect“, Ko-fi leitet Dich zur PayPal-Anmeldeseite weiter, Du loggst Dich dort ein und bestätigst die Verbindung. Das ist aus Sicherheitsgründen absichtlich so gestaltet – Ko-fi sieht Deine PayPal-Zugangsdaten zu keinem Zeitpunkt.

Das Ergebnis ist eindeutig:

Grüner „Connected„-Status. Ko-fi ist nun einsatzbereit. Spenden können empfangen werden.

Fakten-Check: Zahlungsmethoden

PayPal: Für den deutschsprachigen Raum erste Wahl. Schnelle Einrichtung, breite Akzeptanz

Stripe: Für internationale Zahler und Kreditkartennutzer. Etwas aufwendiger in der Einrichtung

Beide parallel aktivieren = maximale Reichweite

Ko-fi sieht Deine Zugangsdaten nicht – die Verbindung läuft direkt über den Zahlungsdienstleister

Kopfnuss: Melde Dich jetzt bei Ko-fi an und verbinde Deine Zahlungsmethode. Falls Du noch kein PayPal-Konto hast: paypal.com → kostenloses Privatkonto erstellen → dann Ko-fi verbinden. Stripe-Einrichtung ist optional, kann jederzeit nachgeholt werden.

Schritt 5: Den Button erstellen

Bernd sagt: „Ich würd den Button einfach abschreenshooten. Dann als Bild in die Seite einbinden. Klingt viel einfacher.“
Tanja: „Ein Screenshot von einem Button, der auf ein Bild verlinkt, das wiederum…“
Bernd: „Auf meine Ko-fi-Seite.“
Tanja: „…Ein Bild kann nicht anklickbar sein ohne weiteren Code. Außerdem verlierst Du die Animation und den dynamischen Text.“
Ulf: „Wie wenn man ein Foto vom Spielplan aufhängt, statt den echten Spielplan zu nehmen.“
Tanja: „Etwas komplizierter, aber ja.“

Unter Settings → Buttons & Widgets (Schaltflächen und Integrationsbausteine) findest Du Ko-fis Widget-Builder. Verschiedene Integrationsformen stehen zur Auswahl:

BILD 10 – Übersicht mit Ko-fi button, Ko-fi tip widget, Discord, Stream alerts und Twitch chat alerts

Für WordPress eignet sich der Ko-fi button am besten. Er generiert einen Embed-Code – das ist ein kleines Stück JavaScript (JavaScript ist eine Programmiersprache, die im Browser des Besuchers ausgeführt wird und die Darstellung dynamischer Elemente auf einer Website steuert), das Du direkt in WordPress einfügst.

Im Widget-Builder lässt sich alles nach Belieben anpassen: Der Button-Text (frei wählbar, nicht auf Ko-fi-Standardtexte beschränkt), die Hintergrundfarbe des Buttons und eine Vorschau zeigt direkt, wie das Ergebnis aussieht.

Hier wird aus dem generischen „Support me on Ko-fi“ das eigene Wording – und die Farbe wird auf das FOUNDIC-Blau (#2563eb) gesetzt:

Ko-fi zeigt den fertigen Embed-Code direkt an. Für foundic.org sieht er so aus:

<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
<script type='text/javascript'>
  kofiwidget2.init('Treat us to a coffee', '#2563eb', 'G2G11X96H2');
  kofiwidget2.draw();
</script>

Keine Panik vor dem Code – Du musst ihn nicht verstehen, nur kopieren. Aber für alle, die es gerne wissen: kofiwidget2.init() ist der Befehl, der den Button initialisiert (vorbereitet). In den runden Klammern stehen drei Werte: der Button-Text, die Farbe (als Hex-Code, also eine sechsstellige Farbkennung) und die Ko-fi-ID Deines Accounts.

Für die deutschsprachige Version tauscht Du nur den Text:

kofiwidget2.init('Lade uns auf einen Kaffee ein', '#2563eb', 'G2G11X96H2');

Fakten-Check: Button-Konfiguration

Button-Text: Frei wählbar → Dein eigenes Wording (ohne Markenrechtsprobleme)

Farbe: Als Hex-Code eingeben (z. B. #2563eb für FOUNDIC-Blau) → Button passt zur Markenfarbe Deiner Website

Ko-fi-ID: Deine persönliche Kennung, automatisch im Code enthalten

Embed-Code: Direkt kopieren und in WordPress einfügen

Kopfnuss: Öffne den Ko-fi Widget-Builder. Trag Deinen Wunschtext ein (den Du Dir vorhin überlegt hast). Passe die Farbe an Deine Website an – die Primärfarbe Deiner Website findest Du oft in den Theme-Einstellungen oder im Browser-Inspektor. Kopiere den generierten Code. Du brauchst ihn im nächsten Schritt.

Schritt 6: Den Button in WordPress einbinden

Bernd navigiert bereits durch das WordPress-Backend: „Ich geh einfach in den Dateieditor und füg das in die footer.php ein.“
Tanja springt auf: „Stop.“
Bernd: „Was? Ich weiß, was ich tu.“
Tanja: „Wenn Du einen Tippfehler in der footer.php machst, ist die gesamte Website down. Kein CSS, keine Navigation, nur ein leerer weißer Bildschirm. Und beim nächsten Theme-Update werden Deine Änderungen überschrieben.“
Bernd: „…Ich mach ein Backup vorher.“
Tanja: „Nein. Wir nehmen Code Snippets.“
Ulf: „Was ist Code Snippets?“

Das Werkzeug: Code Snippets Plugin

Das Code Snippets Plugin ist eine Erweiterung für WordPress (ein Plugin ist eine Zusatz-App für WordPress, die neue Funktionen hinzufügt, ohne den Kern des Systems anzufassen). Es ermöglicht Dir, eigenen Code einzufügen, ohne Theme-Dateien direkt zu bearbeiten. Das hat drei entscheidende Vorteile:

Sicherheit: Ein Fehler im Snippet betrifft nur diesen Snippet, nicht die gesamte Website
Persistenz: Der Code bleibt erhalten, auch wenn Du später das Theme wechselst
Übersichtlichkeit: Du siehst auf einen Blick, welcher Code aktiv ist und welcher nicht
Vergleich für Ulf: Code Snippets ist wie die Trainermappe am Spielfeldrand. Die Taktik steht drin, aber sie überschreibt nicht das offizielle Regelbuch. Wenn der Trainer wechselt, nimmt er die Mappe mit – das Regelbuch bleibt.

Das Ziel: Sprachabhängiger Button auf allen Kategorieseiten

Für foundic.org war das Ziel konkret: Der Ko-fi-Button soll automatisch auf allen Archivseiten (Kategorieseiten wie „KI-News“, „Themen“, „Projekte“) erscheinen – rechtsbündig neben der Seitenüberschrift, sprachabhängig:

Auf deutschsprachigen Seiten: „Lade uns auf einen Kaffee ein“
Auf englischsprachigen Seiten: „Treat us to a coffee“
Foundic.org nutzt das Polylang-Plugin für die Mehrsprachigkeit. Polylang stellt eine Funktion namens pll_current_language() bereit, die die aktive Sprache zurückmeldet – auf Deutsch „de“, auf Englisch „en“. Der Button-Text wird anhand dieser Rückmeldung automatisch gewählt.

Der PHP-Code – und was er tut

PHP ist eine Programmiersprache, in der WordPress selbst geschrieben ist. Sie läuft auf dem Server (dem Computer, auf dem WordPress installiert ist), nicht im Browser des Besuchers. PHP ist zuständig dafür, dass WordPress Seiten aufbaut, bevor sie an den Browser geschickt werden.

Das Snippet besteht aus vier Teilen. Neu gegenüber dem Ko-fi-Standardcode: Alle wiederkehrenden Werte (Ko-fi-ID und Buttonfarbe) sind zentral als Konstanten definiert – so musst Du bei einer Änderung nur eine einzige Stelle im Code anpassen. Außerdem wird das Ko-fi-Script nur einmal pro Seitenaufruf geladen, unabhängig davon, wie viele Buttons auf der Seite erscheinen.

Teil 0: Zentrale Konfiguration

// ── Zentrale Konfiguration – hier anpassen ──────────────────────
define('FOUNDIC_KOFI_ID',    'G2G11X96H2'); // Deine Ko-fi-ID
define('FOUNDIC_KOFI_COLOR', '#2563eb');    // Deine Markenfarbe
// ────────────────────────────────────────────────────────────────

Diese zwei Zeilen sind der einzige Ort, den Du jemals anfassen musst, wenn sich Deine Ko-fi-ID oder Deine Markenfarbe ändert. Alle anderen Funktionen greifen automatisch auf diese Werte zurück.

Teil 1: Script einmalig laden

add_action('wp_footer', 'foundic_kofi_enqueue_script', 5);

function foundic_kofi_enqueue_script() {
    if (!is_archive()) return;
    wp_enqueue_script(
        'kofi-widget',
        'https://storage.ko-fi.com/cdn/widget/Widget_2.js',
        [],
        null,
        true
    );
}

wp_enqueue_script ist der WordPress-konforme Weg, externe Scripts einzubinden. WordPress stellt damit sicher, dass das Ko-fi-Script nur einmal pro Seitenaufruf geladen wird – auch wenn später mehrere Buttons auf derselben Seite erscheinen. Die ursprüngliche Methode (Script direkt per echo ausgeben) hätte bei mehreren Buttons zu doppelten Ladezeiten geführt.

Teil 2: Der Button selbst

add_action('astra_archive_header', 'foundic_kofi_archive_button', 15);

function foundic_kofi_archive_button() {
    if (!is_archive()) return;
    $lang        = function_exists('pll_current_language') ? pll_current_language() : 'de';
    $button_text = ($lang === 'en') ? 'Treat us to a coffee' : 'Lade uns auf einen Kaffee ein';
    printf(
        '<div id="kofi-archive-btn"><script>kofiwidget2.init(%s, %s, %s); kofiwidget2.draw();</script></div>',
        wp_json_encode($button_text),
        wp_json_encode(FOUNDIC_KOFI_COLOR),
        wp_json_encode(FOUNDIC_KOFI_ID)
    );
}

add_action hängt die Funktion an einen bestimmten Punkt im Seitenaufbau – hier an astra_archive_header, einen Haken (sogenannter Hook) im Astra-Theme, der auf Kategorieseiten aufgerufen wird. is_archive() prüft, ob wir uns überhaupt auf einer Archiv-/Kategorieseite befinden – ist das nicht der Fall, passiert gar nichts. wp_json_encode übernimmt die sichere Ausgabe der Werte und ersetzt das fehleranfällige manuelle Escaping.

Teil 3: Das CSS für die Positionierung

CSS (Cascading Style Sheets) ist die Sprache, die das Aussehen und die Anordnung von Elementen auf einer Website steuert. Hier wird das ast-archive-description-Element (der Container, der Überschrift und Button umschließt) auf Flexboxumgestellt – ein modernes CSS-Layout-Modell, das Elemente nebeneinander anordnet.

add_action('wp_head', 'foundic_kofi_archive_css');

function foundic_kofi_archive_css() {
    if (!is_archive()) return;
    echo '<style>
    .ast-archive-description {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #kofi-archive-btn { flex-shrink: 0; }
    #kofi-archive-btn .kofi-button { margin: 0 !important; }
    @media (max-width: 768px) {
        .ast-archive-description { flex-direction: column; align-items: flex-start; }
        #kofi-archive-btn { margin-top: 10px; }
    }
    </style>';
}

Der @media-Block am Ende ist die responsive Anpassung: Auf Bildschirmen unter 768 Pixel Breite (typischerweise Smartphones) wechselt das Layout von nebeneinander zu untereinander. Der Button rutscht dann unter die Überschrift – was auf kleinen Bildschirmen deutlich besser aussieht.

Teil 4: Die JavaScript-Korrektur

add_action('wp_footer', 'foundic_kofi_move_button');

function foundic_kofi_move_button() {
    if (!is_archive()) return;
    echo '<script>
    document.addEventListener("DOMContentLoaded", function() {
        var btn = document.getElementById("kofi-archive-btn");
        var section = document.querySelector(".ast-archive-description");
        if (btn && section) { section.appendChild(btn); }
    });
    </script>';
}

Dieser Teil klingt technischer als er ist. Das Astra-Theme rendert den Button (aufgrund der Hook-Reihenfolge) außerhalb des Überschriften-Containers. Dieses JavaScript-Stück wartet, bis die Seite vollständig geladen ist (DOMContentLoaded), und verschiebt den Button-Container dann per Code an die richtige Stelle innerhalb des Überschriften-Bereichs. Vergleich für Ulf: Als würde der Balljunge erst nach dem Anpfiff auf seinen Platz laufen – funktioniert trotzdem, weil das Spiel da gerade erst beginnt.

Das Ergebnis

So sah die KI-News-Seite auf foundic.org aus, bevor der Button eingebunden wurde:

Und auf anderen Kategorieseiten – ohne weitere Konfiguration, automatisch:

Der Clou: Da der Code auf is_archive() prüft – was alle WordPress-Archiv- und Kategorieseiten umfasst – erscheint der Button automatisch auf allen acht Kategorieseiten (vier deutschsprachig, vier englischsprachig), mit jeweils dem richtigen Sprachtext. Kein manuelles Einbinden Seite für Seite.

Fakten-Check: WordPress-Integration im Überblick

Code Snippets Plugin installieren und aktivieren (nicht die Theme-Dateien direkt bearbeiten!)

Neues Snippet anlegen → PHP-Code einfügen

Das Snippet besteht aus vier Teilen:

Konfiguration: Ko-fi-ID und Farbe zentral als Konstanten definiert (FOUNDIC_KOFI_ID, FOUNDIC_KOFI_COLOR)

Script-Funktion: Lädt das Ko-fi-Widget-Script einmalig per wp_enqueue_script

Button-Funktion: Gibt den Ko-fi-Button aus, prüft Archivseite und Sprache

CSS-Funktion: Positioniert Button rechtsbündig neben der Überschrift, responsive für Mobile

JavaScript-Funktion: Verschiebt Button zur richtigen DOM-Position nach dem Laden

Snippet aktivieren → Button erscheint automatisch auf allen Kategorieseiten

Voraussetzung für Mehrsprachigkeit: Polylang-Plugin installiert und konfiguriert

Anpassungen immer nur in der Konfigurationsblock-Section (Teil 0) – nie im restlichen Code

Kopfnuss – aber Vorsicht: Teste das Snippet nach dem Aktivieren sofort auf einer Kategorieseite. Öffne eine Kategorie Deiner WordPress-Website im Browser. Erscheint der Button? Sitzt er neben der Überschrift? Auf dem Smartphone: Sitzt er darunter? Wenn etwas nicht stimmt, deaktiviere das Snippet im Code Snippets Plugin – Deine Website bleibt dabei voll funktionsfähig. Bernd hätte das nicht gekonnt, weil er direkt in footer.php gearbeitet hätte.

Schritt 7: Die Ko-fi-Profilseite aufwerten

Bernd hat sein Profilbild bereits hochgeladen – es ist ein Urlaubsfoto von 2019 in einem Themenpark: „Ich hab das schon erledigt.“
Tanja: „Das ist ein Bild von Dir vor einem Riesenrad.“
Bernd: „Das bin ich aber.“
Tanja: „Es sollte das Logo Deiner Website sein.“
Bernd: „…Ich glaub, man erkennt mich trotzdem.“

Ein Klick auf den Ko-fi-Button auf Deiner Website führt Besucher zur Ko-fi-Profilseite. Diese ist das erste, was ein potenzieller Unterstützer zu Gesicht bekommt – und sie verdient ein wenig Pflege.

Drei Änderungen machen den größten Unterschied:

1. Display Name anpassen
Unter Settings → Profile den Display name auf den vollständigen Markennamen setzen. Aus „FOUNDIC“ wird „FOUNDIC.org“ – der Name, den Besucher kennen und dem sie vertrauen.

2. Profilbild hochladen
Das offizielle Logo ersetzt den Standard-Ko-fi-Avatar. Ko-fi unterstützt gängige Bildformate (PNG, JPG). Das Bild sollte quadratisch sein und mindestens 200 × 200 Pixel haben, damit es scharf aussieht.

3. Theme-Farbe setzen
Unter Settings → Page lässt sich eine eigene Akzentfarbe wählen. #2563eb – das FOUNDIC-Blau – sorgt dafür, dass die Ko-fi-Seite wie ein Teil der eigenen Marke wirkt, nicht wie eine generische Fremdseite.

Das Ergebnis: Eine Profilseite, die aussieht, als gehöre sie zur Website. Kein grünes Standard-Smiley, kein fremder Markenname, keine generische Ko-fi-Standardfarbe.

Wer möchte, kann noch weitere Elemente ergänzen:

Ein Cover-Bild (Bannerbild oben auf der Profilseite, empfohlene Größe: 1200 × 400 Pixel)
Einen About-Text, der erklärt, wofür Spenden verwendet werden
Einen Willkommens-Post, der die Seite mit Leben füllt und zeigt, dass hier tatsächlich jemand aktiv ist
Google Analytics 4 lässt sich unter Settings → Page in Ko-fi eintragen (Feld „Google Analytics ID“, Format: G-XXXXXXXXXX), um Besucher der Ko-fi-Seite in der eigenen GA4-Property zu tracken

Fakten-Check: Profilseite optimieren

Display name = vollständiger Markenname (nicht Vorname)

Profilbild = Logo, quadratisch, mindestens 200 × 200 px

Akzentfarbe = Primärfarbe der eigenen Website (Hex-Code)

Cover-Bild: Optional, empfohlen 1200 × 400 px

About-Text: Kurz erklären, wofür Spenden genutzt werden – schafft Vertrauen

Google Analytics: Ko-fi Settings → Page → GA4 Mess-ID eintragen

Kopfnuss: Öffne Deine Ko-fi-Profilseite (ko-fi.com/deinname) in einem privaten Browser-Tab – so siehst Du sie, wie ein Besucher sie sieht. Was fällt Dir als erstes auf? Passt der Name? Passt das Bild? Würdest Du als Besucher Vertrauen fassen – oder wirkst Du wie ein halbfertiges Profil? Mach drei Dinge: Name, Logo, Farbe.

Den Button zum Arbeiten bringen: Text, Position und A/B-Tests

Bernd sagt: „Ich hab den Button jetzt überall. Header, Footer, Sidebar, nach jedem Absatz, als Popup…“
Tanja: „Und wie viele Spenden hast Du bekommen?“
Stille.
Bernd: „…Die Leute müssen sich noch dran gewöhnen.“
Ulf: „Ich mein – wenn der Trainer nach jedem Pass fragt, ob man Lust hat, ein Trikot zu kaufen, hört man irgendwann auf zuzuhören.“

Dass der Button technisch funktioniert, ist die eine Sache. Dass er auch tatsächlich Spenden generiert, ist eine andere. Zwei Stellschrauben haben den größten Einfluss: der Button-Text und die Positionierung auf der Seite.

Button-Text: Emotionen schlagen Beschreibung

Der generische Ko-fi-Text „Support me on Ko-fi“ ist technisch korrekt und emotional wirkungslos. Gute Button-Texte kombinieren eine emotionale Komponente mit einem konkreten Nutzen – sie erklären, warum eine Spende sinnvoll ist, nicht nur, dass sie möglich ist.

Testbare Varianten auf Deutsch:

Variante	Typ	Wirkung
„Lade uns auf einen Kaffee ein“	Einladend, persönlich	Sympathisch, niedrigschwellig
„Unterstütze unsere Arbeit“	Direkt, klar	Seriös, aber wenig emotional
„Hilf uns, unabhängig zu bleiben“	Benefit-fokussiert	Erklärt den Mehrwert der Spende
„Gefällt dir das? Unterstütze uns“	Reaktiv, dialogisch	Spricht den Lesemoment direkt an

Testbare Varianten auf Englisch:

Variante	Typ	Wirkung
„Treat us to a coffee“	Einladend, bildhaft	Warm, niedrigschwellig
„Support our work“	Direkt, neutral	Klar, aber wenig emotional
„Keep this project alive“	Dringlichkeit, Bedeutung	Hohes Engagement, aber riskiert Druck
„Like what you read? Buy us a coffee“	Reaktiv, dialogisch	Knüpft an den Lesemoment an

Empfehlung: Beginne mit einer emotional-nutzenorientierten Variante wie „Hilf uns, unabhängig zu bleiben“ (DE) oder „Keep this project alive“ (EN). Wechsle nach 4–6 Wochen zu einer anderen Variante und vergleiche die Klickrate in Google Analytics. Das ist kein Hexenwerk – das ist systematisches Testen.

Positionierung: Wo der Button sitzt, entscheidet über die Conversion

Conversion beschreibt den Moment, in dem ein Besucher eine gewünschte Aktion ausführt – in diesem Fall: auf den Button klickt und spendet. Aus Studien über Creator-Plattformen lässt sich eine klare Hierarchie ableiten:

Position	Conversion-Wirkung	Empfehlung
Artikelende	★★★★★ Höchste Conversion	Pflicht – Leser sind am stärksten engagiert
Floating Button	★★★★☆ Hoch, aber riskant	Nur einsetzen, wenn er ausblendbar ist
Nach 2/3 des Artikels	★★★★☆ Hoch	Gut für lange Artikel (>1.500 Wörter)
Archivseiten	★★★☆☆ Mittel	Gut für wiederholte Leser – wie auf foundic.org umgesetzt
Sidebar	★★☆☆☆ Mittel	Wird oft ignoriert (sogenannte „Banner Blindness“)
Header	★☆☆☆☆ Niedrig	Zu früh – Leser haben noch nichts gelesen

Konkrete Empfehlung für WordPress:

Artikelende → höchste Priorität. In WordPress über das Code Snippets Plugin mit dem Hook the_content oder direkt im Theme-Template einbinden
Archivseiten → bereits umgesetzt (wie in Schritt 6 beschrieben)
Nach 2/3 des Artikels → optional, für sehr lange Artikel, über das Plugin „Advanced Ads“ oder einen Custom Shortcode realisierbar

Fakten-Check: Conversion-Optimierung

Button-Text: Emotional + Nutzen kombinieren > generisch

A/B-Test: Immer nur eine Variable ändern, mindestens 4 Wochen messen

Positionierung: Artikelende zuerst, dann Archivseiten, dann optional Floating

Floating Button nur mit Schließen-Option – sonst sinkt die Lesedauer statt der Absprungrate

Kopfnuss: Schreib drei verschiedene Button-Texte für Deine Website auf – einen sachlichen, einen emotionalen, einen benefit-fokussierten. Starte mit dem emotionalen. In vier Wochen weißt Du, welcher besser funktioniert.

Fazit: Klein, aber wirkungsvoll

Ulf lehnt sich zurück: „Also kurz zusammengefasst: Ich meld mich an, verbind PayPal, bau einen Button, pack den Code in dieses Snippet-Ding und dann sitzt der Button automatisch auf allen Kategorieseiten?“
Tanja: „Genau.“
Ulf: „Das ist… eigentlich gar nicht so schlimm.“
Bernd: „Ich hätt das in zehn Minuten gemacht.“
Tanja: „Dafür wäre Deine Website zweimal abgestürzt, Du hättest ‚Buy me a Coffee‘ draufgeschrieben – das ist eine eingetragene Marke – und der Button hätte auf allen Seiten denselben Text, egal ob Deutsch oder Englisch.“
Stille.
Bernd: „Aber in zehn Minuten.“

Was am Ende eines Apriltags steht: Ein vollständig funktionierender Spenden-Button auf einer WordPress-Website. Integriert ohne gefährliche Eingriffe in Theme-Dateien, ohne Markenrechtsprobleme, sprachabhängig für zwei Sprachen, mit der Primärfarbe der eigenen Website.

Hier nochmal die gesamte Route auf einen Blick:

Plattformwahl: Ko-fi wählen – 0 % Plattformgebühr, PayPal + Stripe
Button-Text: Eigenes Wording formulieren – markenrechtlich sauber
Ko-fi-Account anlegen: Username = Markenname, Display name und Bio ausfüllen
E-Mail bestätigen und Zahlungsmethode verbinden (PayPal, Stripe oder beides)
Button konfigurieren: Text und Farbe im Widget-Builder anpassen, Embed-Code kopieren
WordPress-Integration: Code Snippets Plugin nutzen, PHP-Snippet mit Button, CSS und JavaScript einfügen, aktivieren
Profilseite aufwerten: Logo, Name, Farbe, Cover-Bild, About-Text

Der technische Aufwand war überschaubar. Die konzeptionelle Vorarbeit – Plattformvergleich, Markenrechtsprüfung, Textfindung – hat mehr Zeit gekostet als die eigentliche Implementierung. Das ist meistens so. Und meistens auch richtig so.

Ausblick: Was kommt nach dem ersten Button?

Der Button sitzt. PayPal ist verbunden. Der erste Kaffee ist theoretisch bestellbar. Was jetzt?
Tanja würde sagen: „Warte vier Wochen. Schau Dir in Google Analytics an, von welchen Seiten Klicks auf ko-fi.com/foundic kommen. Die Seite mit den meisten Klicks bekommt als nächste einen Button – direkt am Artikelende.“
Ulf würde nicken: „Wie Videoanalyse nach dem Spiel. Erst schauen, was passiert ist. Dann die Taktik anpassen.“
Bernd hätte den Button inzwischen wieder aus 40 der 47 Seiten entfernt, weil „die Konversionsrate nicht stimmt“. Er verwendet das Wort „Konversionsrate“ seit heute Mittag.

Die nächsten sinnvollen Schritte nach dieser Anleitung:

Button am Artikelende einbinden – die Position mit der höchsten Conversion, noch nicht umgesetzt
Google Analytics-Daten auswerten – welche Seiten generieren Ko-fi-Klicks?
Button-Text A/B-testen – vier Wochen pro Variante, dann vergleichen
Stripe ergänzen – für Leser ohne PayPal-Konto

Daten kommen nur, wenn man beginnt. Und dann schaut, was passiert.

„Kauf uns einen Kaffee“ – Wie man einen Spenden-Button Ko-fi in WordPress einrichtet – Schritt für Schritt