Affiliate Links mit YAML und TWIG

Zufällige Affiliate-Links ohne externe Plugins mit Hilfe von YAML und der Templatesprache Twig in Pico CMS realisieren, das ist sogar wirklich sehr einfach.

home » pico » affiliate links mit yaml und twig in pico cms ohne plugin

Verdienen Sie mit Affiliate Geld

Wenn Sie keine externen Affiliate-Plugins im CMS Pico nutzen möchten, dann kann Ihnen der eingebaute Twig-Symfony Parser und YAML genau das gleiche leisten - es ist ganz einfach. Sie erhalten einen zufälligen Affiliate-Link mit Produkt-Bild, Produkt-Beschreibung und Bestell-Button im Theme oder Template - ganz ohne Plugin.

YAML Liste erstellen

Zunächst müssen Sie eine YAML-Liste entweder in der Datei config/config.yml oder in der pico-theme.yml anlegen. Sie können sich dabei an dem folgenden Beispiel orientieren:

021  affiliate:
021      - cta: 
021        title:        WordPress 5
021        description:  Erstellen Sie einen Blog oder eine Website...
021        logo:         affiliate-wp5.png
021        link:         https://www.amazon.de...
021        label:        kaufen...
021      - cta:
021        title:        CSS von Animation bis Responsiv
021        description:  Das Buch für den Webentwickler...
021        logo:         affiliate-css.png
021        link:         https://www.amazon.de...
021        label:        kaufen...
021      - cta:
021        title:        SEO
021        description:  Die Suchmaschinen-Optimierung ist...
021        logo:         affiliate-seo.png
021        link:         https://www.amazon.de...
021        label:        kaufen...

Code

Es existieren drei Listen-Objekte cta die jweils title, description, logo, link und label als Attribute beinhalten. Titel stellt einen Buchtitel da, description die Beschreibung, logo das Produktbild, link den Link zum Affiliate-Shop und label ist die Beschriftung des Buttons der dem Leser gezeigt wird.

Affiliate Theme und Template mit Twig

Das Geheimnis dieses Affiliate-Banners ist der Twig-Befehl (Zufallswert - Random):

... {{ random(['apple', 'orange', 'citrus']) }} {# example output: orange #}

Code

er liefert einen zufälligen Wert aus einem iterierbaren Objekt zurück, dies können Sie ohne Umwege im Theme ausgeben.

001  {% set item = random(config.theme_config.affiliate) %}
002  <div class="container-fluid py-5">
003      <div class="container">
004          <div class="row">
005              <div class="col-sm-2">
006                  <img src="{{ item.logo }}" class="img-fluid mb-3">
007              </div>
008              <div class="col-sm">
009                  <p><strong>{{ item.title }}</strong> &ensp; - &ensp; {{ item.description }}</p>
010                  <a href="{{ item.link }}" class="btn btn-success">{{ item.label }}</a>
011              </div>
012          </div>
013      </div>
014  </div>

Code

Das Codeschnipsel oben ist für das CSS-Framework Bootstrap entwickelt, kann aber an Ihr eigenes CSS einfach angepasst werden. Wichtig sind die folgenden Zeilen:

  • Zeile 001: dem Value item wird ein zufälliges cta-Objekt aus der YAML-Liste zugewiesen
  • Zeile 006: liest das Bild aus dem logo-Value
  • Zeile 009: liest den Titel aus dem title-Value und die Beschreibung aus dem description-Value
  • Zeile 011: zeigt den Bestellbutton mit label und dem link

Nachfolgend noch mal die bereinigte Kurzform des Beispiels ohne CSS.

...  {% set item = random(config.theme_config.affiliate) %}
...  <img src="{{ item.logo }}">
...  <p>{{ item.title }} - {{ item.description }}</p>
...  <a href="{{ item.link }}">{{ item.label }}</a>

Code

Wenn Sie dieses Beispiel sinnvoll in Ihr Pico Theme einbauen, erhalten Sie eine zufällige Anzeige (mit Bild, Text und Bestellbutton) eines Affiliate-Produktes das Sie bwerben - am besten platzieren Sie dieses Template weit nach oben in der Webseite.

Optional

Möchten Sie bestimmte Produkte einfach und leicht abschalten können und von der Anzeige auf der Webseite ausschliessen, ohne alles erneut editieren zu müssen, dann sollten Sie einen boolean in die YAML-Liste einsetzen, den Sie abfragen ob der Artikel aktiv oder deaktiv ist. Ein Beispiel finden Sie im Beitrag YAML Syntax in Pico CMS

Der Vorteil dieser Variante gegenüber dem Plugin ist, das der Code überaus einfach und sicher ist, zudem können Sie alles mit (Pico) Bordmitteln abwickeln ohne auf externe Plugins zurückgreifen zu müssen. Dazu kommt, das Sie die YAML-Liste beliebig erweitern können, diese hat theoretisch keine Grenze. Pflegen Sie dort so viele Produkte ein, wie Sie vertretbar auf Ihrer Webseite bewerben möchten.

Hinweis: natürlich ist es notwendig, das Sie auch in einem Affiliate-Netzwerk registriert sind, um einen personalisierten Link entsllen zu können. Hier bietet sich Amazon an, da es sehr einfach zu handhaben ist. Alternativ können aber auch auf zufällige Beiträge Ihres eigenen Blogs verlinken, statt externer Affiliates.


FlightCMS
2024-01-28
PHP8
post

PHP8 und MySQL - Dynamische Webseiten mit PHP und MySQL programmieren: Alles, was Sie dafür wissen müssen, steht in diesem Buch. Profitieren Sie von einer praxisorientierten Einführung und lernen Sie alle neuen Sprachfeatures von PHP 8 kennen. Die Autoren Christian Wenz und Tobias Hauser sind erfahrene PHP-Programmierer und Datenbankspezialisten

Wir können mit so genannten Affiliate-Links den Betrieb der Webseite etwas unterstützen, für Sie als Leser ist das natürlich vollkommen kostenlos.

Impressum


CMSWorkbench ist ein Tec- und Entwickler-Seite, rund um die Webtechniken der Content Management Systeme.

Datenschutz


Diese Webseite nutzt keine Cookies oder sonstige Speichermechanismen, die einen Rückschluss auf das Leserverhalten zulassen.

Kontakt


Sie können mit der Redaktion oder dem Administrator via eMail unter der Adresse: Kontakt@Oliver-Lohse.de aufnehmen.