Reflinks kennzeichnen

Reflinks kennzeichnen

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.

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

7 thoughts on “Reflinks kennzeichnen”

  1. 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 🙂

  2. 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.

  3. 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.

  4. 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.

  5. Ich finde das garnicht schlimm… wenn sich einer Mühe macht Über Ref-Links zu schreiben, ist das doch zu honerieren!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.