Flattr-Buttons einbinden – eigentlich ganz einfach!
Das Flattr-Prinzip (Skizze auf flattr.com)
Schon seit Monaten hatte ich vor, die grünen Flattr-Buttons auf die Seiten meines Online-Magazins "Internet-fuer-Architekten.de" zu bringen, doch das Einbinden erschien mir zu kompliziert. Dabei ist es eigentlich ganz leicht.
Wer (wie ich im Falle von Internet-fuer-Architekten.de) seine Website nicht gerade mit Wordpress oder einem anderen bekannten CMS betreibt, muss die Flattr-Buttons "von Hand" integrieren, denn nur für die bekanntesten Content-Management-Systeme existieren Flattr-Addons bzw. -Plugins.
Die Anleitung auf flattr.com kam mir zunächst etwas verworren vor. Doch wenn man das ganze Ding einfach mal komplett durchliest, merkt man: Es ist ziemlich einfach.
So geht's: In den Kopf der HTML-Datei (bzw. des CMS-Templates) muss der Javascript-Aufruf gesetzt werden. Dabei ist wichtig, dass man der aufgerufenen Datei "load.js" die eigenen Parameter mitgibt: "uid" (Nutzer-ID), "language" (Sprache der Landing-Page auf flattr.com) und "category" (Medienkategorie der zu flatternden Inhalte).
Hinweis: Da die Nutzer-ID angegeben werden muss, sollte man sich also vorher bei Flattr angemeldet haben, sonst wird's nichts mit dem Geldverdienen ;o)
Screenshot: Aufruf des Flattr-Javascript ("load.js") im <head>-Bereich der Website
Der grüne Flattr-Button selbst wird mit einem simplen Anker-Tag erzeugt. Wie man am Screenshot unten sieht, sind noch weitere Angaben wichtig:
- href: klar, die zu flatternden Seite (URL)
- title: der Titel der Seite, die geflattert wird
- lang: Sprache der Landing-Page bzw. der Seite
Screenshot: Der Flattr-Button wird durch einen simplen Anker-Tag erzeugt.
Hinweis: Die beiden Angaben "onClick" und class="extern" schreibt mein CMS automatisch, sie haben nichts mit Flattr zu tun.
Zwischen den <a>-Tags steht die Seitenbeschreibung, die nach dem Klick auf der Flattr-Landingpage (auf flattr.com) für die Seite angezeigt wird.
Wer ein CMS nutzt, kann URL, Seitentitel, Seitenbeschreibung relativ einfach dynamisch erzeugen, darauf will ich hier jetzt nicht eingehen. (Bei einer kleinen, statischen Seite kann man diese Angaben theoretisch auch auf jeder Seite von Hand eintragen.)
Sprachangabe: Je nach System wird die Angabe für "lang" ebenfalls dynamisch erzeugt oder fest reingeschrieben.
OK, das war's schon. Fertig.
Oben: Ein Flattr-Button auf Internet-fuer-Architekten.de
