Partnerlinks automatisch mit * oder Icon markieren

Auf dieser und anderen Webseite von mir setze ich manchmal sogenannte Partnerlinks ein. Dabei wird ein im Beitrag erwähntes Produkt direkt mit einem Onlineshop verlinkt. Kauft jemand über diesen Link ein Produkt, erhält der Webseitenbetreiber eine Provision.

Es handelt sich dabei um eine Möglichkeit mit der Webseite Einnahmen zu erzielen, ohne die Seite mit Werbung zu überfrachten, oder sich für sogenannte Sonsored Posts zu verkaufen.

Üblicherweise wird beim Aufruf des Shops über den Partnerlink ein Cookie gesetzt. Dadurch können auch Einkäufe vergütet werden, die erst später getätigt werden. Dementsprechend gibt es schwarze Schafe, die versuchen um jeden Preis diesen Cookie zu setzen.

Dies passiert beispielsweise indem die Seite des Shops in einem Pop-Up oder in einem unsichtbaren Iframe geladen wird. Oder es wird versucht Besucherinnen und Besucher mit mehr oder weniger zweifelhaften Methoden dazu zu bringen, selbst auf den Link zu klicken. Beispielsweise indem man verschleiert dass es sich um einen Partnerlink handelt.

Um die eigene Glaubwürdigkeit nicht zu gefährden und auch um rechtlichen Problemen mit ungekennzeichneter Werbung aus dem Weg zu gehen, ist man also gut beraten, Partnerlinks auch als solche ersichtlich zu machen.

Bisher habe ich Partnerlinks immer manuell mit einem Sternchen markiert. Die Bedeutung des Sternchens habe ich in der Seitenleiste oder im Footer erläutert. Mittlerweile bin ich eher dazu übergegangen Partnerlinks mit dem Icon eines Einkaufswagens zu versehen.

Ich bin mir noch nicht sicher was die bessere Version ist. Ich denke der Einkaufswagen ist unmissverständlich. Das Sternchen funktioniert hingegen immer, auch wenn keine Bilder geladen werden.

Mit CSS Amazon und andere Partnerlinks automatisch mit einem Sternchen oder Icon kennzeichnen

Um mir die Arbeit zu erleichtern und um ggf. an einer zentralen Stelle die Art der Kennzeichnung ändern zu können, war ich auf der Suche nach einer Möglichkeit die Kennzeichnung zu automatisieren. Wie sich herausstellt, lässt sich dies mit einer Zeile CSS lösen.

/* Sternchen hinter Amazon Partnerlinks */
a[href*="amazon.de"]:after , a[href*="amzn.to"]:after { content: "*";  }

/* Icon hinter Amazon Partnerlinks */
a[href*="amazon.de"]:after , a[href*="amzn.to"]:after { content: url(path/to/icon.png);  }

Das Ganze sieht dann so aus: