Affiliate (Werbe-) Links mit FontAwesome kennzeichnen

Da es immer wichtiger wird, man läuft sonst Gefahr abgemahnt zu werden, Werbelinks bzw. Affiliate Links zu kennzeichnen, möchte ich dir einen Weg zeigen, wie du das auch optisch wunderbar hinbekommst. Auch für ältere Posts.

Affiliate Links mit FontAwaesome kennzeichnen

Da dies immer wieder Thema in Facebook – Gruppen oder sonst wo im WWW ist, habe ich mich entschlossen zu zeigen wie ich das auf meinem Hauptprojekt guenstig-kochen.at so handhabe. Zum einen scheint es mir optisch mal schöner, als diese Sternchen (mit ellenlanger Beschreibung im Footer) oder diese Zusätze nach den eigentlichen Links => (= Provisonslink).

Wir brauchen dafür zuerst mal den Icon – Font (Schriftart) FontAwesome in unserem WordPress – Universum. Diesen können wir auf 2 Arten einbinden. Die komfortabelste ist die mittels Plugin. Hier zu würde ich zu folgendem raten

Better Font Awesome

Better Font Awesome
Better Font Awesome
Entwickler: Mickey Kay
Preis: Kostenlos

Einfach installieren und schon kann es losgehen! Oder du wählst den etwas aufwendigeren Weg und lässt diese Schriftart direkt mit deinem Blog – Theme laden. Dazu gehst du wie folgt vor.

Der eigene Weg

  • Lade Dir die nötigen Dateien direkt auf der Webseite herunter => FontAwesome Dateien herunterladen
  • Als Nächstes kopierst du den gesamten Ordner in das Hauptverzeichnis Deines Themes.
  • Als Letztes fehlt dir noch der Verweis dorthin in deiner header.php zwischen <head> und </head>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/font-awesome/css/font-awesome.min.css">

Und schon kannst Du loslegen und Deine Affiliate – Links kennzeichnen. Dafür benötigst Du je Anbieter nur ein paar Zeilen CSS (Cascading Style Sheets) in der style.css deines Themes.

Lass mich Dir noch ein paar Beispiele zeigen

Amazon

a[href^="https://www.amazon.de"]:after {
	color: #f90; /* hier stellst du die Farbe des Icons ein */
	font-family: FontAwesome;
	content: " \f270"; /* hier wechselst du das Icon */
	text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Ergebnis => Zu Amazon

Youtube

a[href^="https://www.youtube.com"]:after {
	color: #ff0001;
	font-family: FontAwesome;
	content: " \f167";
	text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Ergebnis => Zu YouTube

Ausgehende  Links

a[target^="_blank"]:after {
	color: #555;
	font-family: FontAwesome;
	content: " \f08e";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

Ergebnis => Link in neuem Tab

Und so weiter und so fort. Damit du weißt welchen Unicode du für deinen gekennzeichneten Link verwenden musst => Alle FontAwesome Icons im Überblick