Ein Reflink ist ein Link, der meist auf einen Shop oder eine andere kommerzielle Seite verweist. Wenn ein User auf einen Reflink klickt und danach in dem Shop etwas kauft, kriegt derjenige, der den Link gepostet hat, eine Provision von dem Händler ausbezahlt. Wenn ihr jetzt z. B. auf diesen Link hier klickt -> Amazon, dann landet ihr bei Amazon und kriegt ein Buch zum Thema CSS angezeigt. Kauft ihr danach dieses Buch oder einen anderen Artikel bei Amazon, dann kriege ich eine Provision für diesen Kauf.
Das ist eigentlich eine faire Sache, von der alle profitieren. Ich empfehle dem Käufer einen Artikel, den er wahrscheinlich noch nicht gekannt hat und kriege als Gegenleistung dafür eine kleine Provision. Und Amazon profitiert natürlich auch davon, weil durch meine Empfehlung zusätzlicher Umsatz generiert wird.
Fair geht vor
Wichtig ist aber, dass, wenn man einen solchen Reflink in seinen Blog einbaut (und das sollte man auch wirklich nur auf der eigenen Seite tun), man seinen Besuchern gegenüber so fair ist und diesen kennzeichnet. Wie das funktioniert, erkläre ich in diesem Artikel.
Reflinks mit dem Euro-Symbol kennzeichnen
Um einen Reflink zu kennzeichnen, empfiehlt es sich auf das CSS-Pseudoelement „:after“ zurückzugreifen. Damit kann man nach einem Element noch einen Text oder eine Grafik einbauen. Nach dem :after weist man dann der Eigenschaft „content“ den gewünschten Inhalt zu. Wenn man hinter einem reflink ein rotes Euro-Zeichen einblenden will, sieht der Code dafür wie folgt aus:
a.reflink:after{content:" €"; color:red;}
Zuerst kommt das Element dem man einen Inhalt anhängen will. Das ist in diesem Beispiel ein Link, also ein a. Dahinter kommt die Klasse, die wir nachher in den HTML-Code einbauen. Ich habe sie in diesem Fall „reflink“ genannt. Dann folgt das schon angesprochene Pseudoelement „:after“. In der geschweiften Klammer gibt man hinter „content:“ den Inhalt an, der hinzugefügt werden soll. Im Beispiel füge ich ein Leerzeichen und ein Eurozeichen hinzu. Diesen Inhalt kann man dann noch nach Wunsch formatieren. Mit „color:red“ habe ich die Schrift für das Eurozeichen auf rot geändert.
Wenn man, so wie ich im Beispiel, Sonderzeichen anhängen will, sollte man darauf achten, dass man die CSS-Datei als „UTF-8 ohne BOM“ speichert. Das geht am einfachsten, wenn man die CSS-Datei mit Notepad++ erstellt und dort unter „Kodierung“ das entsprechende Format wählt.
Reflinks mit einer Grafik kennzeichnen
Will man anstatt eines Textes eine Grafik anhängen, dann sieht der CSS-Code wie folgt aus:
a.reflink:after{content:url(https://example.com/grafik.png);}
Wenn man, wie im ersten Beispiel, noch ein Leerzeichen hinter dem Element haben will, sieht es so aus:
a.reflink:after{content: " " url(https://example.com/grafik.png);}
Zum Schluss braucht man nur noch die Klasse in den HTML-Code einzubauen:
<a class="reflink" href="http://www.example.com/artikel.html?linkcode=4711">
Alternativ zu „:after“ kann man auch das Pseudoelement „:before“ verwenden. Dieses bewirkt, dass der Inhalt vor dem Element ausgegeben und nicht dahinter wie bei „:after“.
Einen kleinen Nachteil haben „:after“ und „:before“ allerdings. Der Internet Explorer unterstützt diese beiden Pseudoelemente erst ab Version 8. Von älteren Versionen des IE werden sie daher ignoriert.
Reflinks in euren Blogs
Verwendet ihr auch Reflinks in euren Blogs? Und falls ja, kennzeichnet ihr diese? Ich würde mich freuen, wenn ihr eure Erfahrungen dazu in den Kommentaren posten würdet.
Ich verstehe nur nicht ganz was das mit fairness zu tunhaben sollte?
Naja, es gibt Leute, die sich hintergangen fühlen, wenn jemand einen Reflink postet und den nicht kennzeichnet.
Ich finde es auch besser, wenn jeder weiß, woran er ist. Ich habe, als ich den Artikel vorbereitet habe, sogar eine Diskussion darüber gelesen, ob es gesetzlich vorgeschrieben ist, einen Reflink zu kennzeichnen, da es sich ja um Werbung handelt. Ich bin zwar nicht sicher, ob das so stimmt, aber schaden kann so eine Kennzeichnung jedenfalls nicht.
Ist ja auch keine große Sache, wie in dem Artikel nachzulesen ist 🙂
Ist die Frage, inwiefern Leute verwirrt sind wegen der Kennzeichnung. Außerdem soll es ja angeblich Neider geben, die einem die Provision nicht gönnen und daher dann erst recht nicht klicken bzw. sich eine andere Kennung dahinter basteln.
Du meinst, die Leute könnten durch das Euro-Zeichen denken, dass sie etwas bezahlen müssen, wenn sie draufklicken? Stimmt, daran habe ich nicht gedacht. Ich werde das Euro-Symbol lieber durch ein * ersetzen.
Mir stinkt das zu sehr nach Doppelmoral.
Vllt. entschuldigst Du Dich dann jeweils noch in einem Zweizeiler und zeigst auf, welche Mühe es macht, einen Blog zu betreiben.
Hey, entspann Dich …ich persönlich finds okay, wenn dort n Ref-Link steht. Wenn ich einen Mehrwert erhalten habe, geb ich Dir etwas zurück, indem ich Deinen Ref-Link nutze.
In dieser Hinsicht könnten wir uns in USA wirklich noch n kleinwenig abschauen.
Ich finde das garnicht schlimm… wenn sich einer Mühe macht Über Ref-Links zu schreiben, ist das doch zu honerieren!
@peter: sehe ich genauso! keine ahnung wo das problem sein sol!?