Einfache Amazon Partnernet Links mit Icon und Sternchentext per CSS

Heute zeige ich dir, wie du einen einfachen Amazon-Link mit nur einer CSS-Klasse um zwei wichtige Komponenten erweitern kannst. Die einfachen Amazon Kurzlinks eignen sich besonders dann, wenn du deine Affiliate-Links im Fließtext platzieren willst oder einfach kein Amazon-Plugin verwenden möchtest.

Dabei muss du allerdings zwei Dinge beachten:

1. Wenn du einen Amazon-Affiliate Link postest, muss klar sein, dass der Link zu Amazon führt. Das schreiben die Guidelines vor. Wir werden dazu ein kleines Amazon-Icon als SVG-Datei verwenden. Das schöne an einer SVG-Datei ist, dass sie auf Vektoren basiert. Das Icon ist daher unter 1KB groß und trotzdem auf jedem Gerät absolut scharf!

2. Es muss sichtbar werden, dass es sich bei dem Link um Werbung handelt. Dazu verwenden die meisten Webmaster (einschließlich mir) einen Sternchentext.

Sowohl das Icon, als auch das Sternchen kannst du natürlich bei jedem Link per Hand einfügen. Oder du erstellst eine CSS-Klasse, die beides automatisch an deinen Link anfügt.

Link per CSS ergänzen

a.amzn:before{content: " "; margin: 0px 4px 0 2px; background-image: url("../../uploads/icons/amzn.svg"); width: 16px; height: 16px; display: inline-block; background-size: 16px 16px; vertical-align: middle;}
a.amzn:after{content:"*";}

Den CSS-Code fügst du in die style.css deines Child-Themes ein. Das SVG muss in einem Ordner „icons“ in deinem Uploads-Ordner (in wp-contents) liegen. Das SVG kannst du hier herunterladen.

Deinen Amazon-Kurzlink ergänzt du jetzt einfach um die Klasse „amzn“:

<a href="https://www.amazon.de/" class="amzn" target="_blank">Artikel auf Amazon</a>

Im Ergebnis sieht das Ganze dann so aus: Artikel auf Amazon

Das Sternchen musst du natürlich irgendwo auf deiner Seite auflösen und erklären, dass es sich bei dem Link um einen Werbe- bzw. Affiliat-Link handelt.

Der große Vorteil liegt auf der Hand: Du brauchst nur eine CSS-Klasse zu deinem Amazon-Link hinzufügen und kannst den Link ansonsten ganz normal setzen. Außerdem ist eine nachträgliche Bearbeitung aller Links (z.B. die Größe des Icons) einfach in der CSS-Datei gemacht, ohne dass du alle Links erneut per Hand ändern musst.

2 Gedanken zu “Einfache Amazon Partnernet Links mit Icon und Sternchentext per CSS

  1. Hallo Timo,
    das ganze geht sogar ohne CSS-Klasse. Das kann deshalb für den einen oder anderen Seitenbetreiber eine gute Alternative sein. Dazu wird als CSS-Selektor folgende Form verwendet:

    a[href^=“http://amzn.to/“]:after,
    a[href^=“https://amazon.de/“]:after{
    content:“*“;
    }

    Mehr über diese Selektoren können auf css-tricks.com unter https://css-tricks.com/almanac/selectors/a/attribute/ nachgelesen werden. Das ganze funktioniert am besten mit Textlinks. Wer aber Bildlinks verwendet wird damit wahrscheinlich nicht glücklich oder muss die Links doch weiter eingrenzen. Dennoch finde ich diese Form klasse. So können keine Links vergessen werden und ich muss nicht jedes mal an die CSS-Klasse denken.
    Schönen Gruß

    • Hey Schmitt 😉
      Sehr guter Hinweis, danke! In diesem Fall würde ich noch .entry-content davor setzen, damit man den Style nicht in der Sidebar anwendet. Da ich teilweise Textlinks und teilweise Buttons verwende, bin ich auf die Idee gar nicht gekommen. Werde ich aber in dem Beitrag ergänzen!

Schreibe einen Kommentar