In dem vorangegangenen Beitrag – WordPress Shortcode ohne Plugin, haben wir ein Inhaltsverzeichnis via Shortcode gebaut und gelernt wie man dieses auf der eigenen Seite integriert. Weiterführend dazu gibt es in diesem Beitrag um einen Shortcode Affiliate Werbehinweis.
Müssen Werbelinks gekennzeichnet werden?
Im Internet wird über diese Frage viel diskutiert. Nach heutigem Stand ist es wohl nicht ganz eindeutig geregelt, es wird aber definitiv dazu geraten betreffende Links zu markieren. Des Weiteren sei gesagt, dass du Affiliate Links nicht maskieren darfst. Dein Seitenbesucher muss also immer sehen, wohin ihn euer Link führt.
Ich für meinen Teil habe mich dazu entschlossen Affiliate Links zu kennzeichnen und möchte meine Überlegungen zu dem Thema, hier mit dir teilen.
Das Markieren der Links erledige ich in zwei Schritten:
- Hinter jedem Link wird per CSS eine Kennzeichnung generiert zum Beispiel ein * Symbol.
- Am Ende jedes Beitrages füge ich mit der Hilfe eines Shortcodes eine Fußnote ein, die den Zusammenhang zwischen dem Symbol und dem Affiliate Link erklärt.
Auf meiner Badminton-Seite sieht das zum Beispiel so aus:
Integration von Affiliate Links auf der eigenen Website
Als Erstes solltest du dir im Klaren darüber werden, wie du deine Links auf dem Nutzer zur Verfügung stellst.
Gleich vorweg, wir reden hier ausschließlich über Links, die nicht im Zusammenhang mit der Amazon Product Advertising API generiert werden. Sondern nur über Textlinks, die du zum Beispiel mit der “Sitestripe Toolbar von Amazon” generierst.
Ich habe damit angefangen meine Affiliate Links einfach als normale Links zu setzen. Das hat aber mindestens 3 entscheidende Nachteile:
- Du wirst nicht benachrichtigt, ob die Links funktionieren oder nicht.
- Du bekommst keine Informationen darüber, ob dein Link geklickt wird.
- Außerdem kannst du mehrfach verwendete Links nicht global ändern.
Für mich war das Grund genug, um mich nach einer Plugin-Lösung umzusehen. Nach einigen Fehlschlägen bin ich dann auf das Plugin Easy Affiliate Links aufmerksam geworden.
Dieses Plugin löst in der kostenfreien Version zumindest zwei der oben genannten Probleme. Den “Broken Link Checker” gibt es in der kostenpflichtigen Version dann für 29 Euro mit dazu.
Das Plugin erzeugt einen Link, der mit der in CSS nutzbaren Klasse “eafl-link” ausgeliefert wird. Außerdem lässt sich innerhalb des Plugins noch ein custom CSS-Skript definieren.
Na, wenn das Mal nicht super praktisch ist?
Ist es! Den nun folgenden CSS Code könnt ihr im Plugin unter “Settings” – “custom CSS” einfügen und auf eure Bedürfnisse anpassen. Der Code erzeugt nach dem Link ein rotes * Symbol und formatiert den Link automatisch auf Fett. Außerdem wird die Hintergrundfarbe geädert, wenn ihr mit der Maus darüber fahrt.
.eafl-link {font-weight: bold;}
a:hover.eafl-link { background-color: white; }
a.eafl-link::after {
content: ' *';
color: red}
}Werbehinweis am Seitenende
Ausgehende Affiliate Links sind schon mal gekennzeichnet. Allerdings musst du deinem Besucher jetzt noch erklären, was deine Kennzeichnung überhaupt bedeutet.
Das machst du am besten über einen Spruch wie diesen:
Werbepartner
Mit * gekennzeichnete Verlinkungen sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekommen wir von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. [Quelle: affima.de]
So, oder so ähnlich. Natürlich möchtest du das aber nicht immer und immer wieder in deine Beiträge einfügen. Aus diesem Grund bietet sich auch hier die Nutzung eines Shortcode an.
/** Custom Shortcode **/
/** Box für Werbeanzeigen Werbepartner
Mit * gekennzeichnete Verlinkungen sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekommen wir von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. [Quelle: affima.de]
**/
function custom_shortcode_werbepartner( $atts , $content = null ) {
$ausgabe = '<div class="BeWer"><p><b><i>* Werbepartner</b><br>';
$ausgabe = $ausgabe.'Mit * gekennzeichnete Verlinkungen sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekommen wir von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. [Quelle: affima.de]</i></p>';
$ausgabe = $ausgabe.'</div>';
return $ausgabe;
}
add_shortcode( 'BeWer', 'custom_shortcode_werbepartner' );Der Code wird wieder in die Function.php eures Child Themes eingebunden.
Mit [‘BeWer’] rufst du deinen custom Shortcode Affiliate Werbehinweis am Ende deiner Seite auf.
Kurze Anmerkung: natürlich kannst du den Namen des Shortcodes frei vergeben. Ich nutze hier das WordPress Theme Bento. Da ich nicht mit Shortcodes aus anderen Plugins in Konflikt geraten möchte, schreibe immer die ersten zwei Buchstaben meines Themes vor den Namen meines custom Shortcodes.
Über den zusätzlich im div-Tag eingebauten class-selector, könntest du über CSS noch weitere Anpassungen vornehmen.
Mein Endergebnis kannst du nun hier bestaunen: (zur besseren Sichtbarkeit habe ich noch eine Trennlinie ‘<hr>’ vorher eingefügt)
Werbepartner
Mit * gekennzeichnete Verlinkungen sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekommen wir von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. [Quelle: affima.de]
Noch ein kleiner Tipp zum Schluss:
- Über alle gängigen Browser lässt sich der Quelltext einzelner Elemente untersuchen. Nutze das unbedingt!
- Zum einen, wenn du selber etwas programmierst, um deine Fehler zu korrigieren.
- Und zum anderen, kannst du so auf fremden Webseiten den Code einzelner Elemente analysieren und daraus etwas lernen.
Fazit
Markiere deine Affiliate Links. Eine Möglichkeit wie du das Anstellen kannst, habe ich dir hier gezeigt. Beim nächsten Mal hübschen wir unsere Links noch etwas auf.
Ich hoffe, ich konnte dir mit diesem Beitrag weiterhelfen?
Mich würde interessieren, welche Erfahrungen du beim Markieren von Links gemacht hast und wie du dabei vorgehst?