Affiliate Links mit YAML und TWIG in Pico CMS ohne Plugin

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.

Juli 12, 2023 - Lesezeit: 4 Minuten

Inhalt

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.

Affiliate

Affiliate Marketing ist das geilste Business der Welt: Vom frustrierten Dreher zum Internet Millionär. Deine Schritt für Schritt Anleitung zum erfolgreichen Online Business

Wie starte ich mit meinem eigenen Online Business durch? Vor allem als Anfänger oder ohne genaue Affiliate Strategie, ist es gar nicht so leicht, ein erfolgreiches Online Business zu gründen beziehungsweise zu führen. Viele verzetteln sich ständig, sehen den Wald vor lauter Bäumen nicht und haben keinen klaren Fahrplan. Auch technische Probleme mit der Umsetzung führen häufig dazu, dass man in seinem Business nicht weiterkommt. Doch auch fortgeschrittenen Online Marketern fehlt oft die richtige Strategie, mit der sie ihr Business optimieren können, um das nächste Level zu erreichen. (*

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...

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 #}

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>

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>

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.

Weiterführende Links

Schlagworte:

Affiliate CTA YAML

Beiträge in der Kategorie "Pico":

PICO Abbruch ab Version PHP8 kann schnell selbst behoben werden, dann läuft das beliebte CMS stabil weiter.

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.

Die YAML Syntax anhand einer Liste erläutert, die beispielsweise Affiliate oder CTA Links aufnimmt und die vom Twig-Template ausgelesen werden können.

Das Pico CMS mit Twig hat ein Leerzeichen-Problem, denn Leerzeichen (Whitespaces) vor Templatevariablen werden von der internen Template Engine Twig verschluckt

Zählen Sie in der Template-Engine Twig eine Counter Variable im Template hoch oder runter und regeln damit Kontrollzwecke in Ihren eigenen Templates.

Top-Level vs Sub-Level Menüs in Pico CMS. Zeigen Sie immer die oberen Menüebene oder die aktuell untergeordneten Menüebene an. Mit diesem Code geht es

Implementieren Sie mit einem Meta-Feld mit geringem Aufwand ein Teaser oder Kategoriebild in der Startseite des Pico CMS bzw. in einem Beitrag als Artikel-Bild.

Für das Pico CMS erzeugt dieses Codebeispiel eine Tagliste, die Beiträge mit gleichen Tags auflistet. Binden Sie diese Twig Template in einen Beitrags ein.

Möchten Sie einen Zurück-Button in jedem Beitragsverzeichnis im PICO CMS implementieren, dann lesen Sie diesen Beitrag und nutzen das folgende Coding.

Das Pico CMS bietet bereits eine ganze Menge an Meta-Attributen die Sie bereits gut nutzen können. Eine vollständige Attribut-Liste zeigt dieser Beitrag.

Versuchen Sie sich bei der Erstellung von Beiträgen in PICO an die SEO Vorgaben von Google zu halten, dann kannt dieser Trick das Ranking bei Google verbessern

Sie haben Probleme mit Ihrem SEO? Wer nicht! Dann kann Ihnen dieses kleine Coding helfen eine korrekte Überschriftenstruktur für Suchmaschinen zu erstellen

Dieser Beitrag zeigt Ihnen, wie Sie mit wenigen Handgriffen einen Seitenpaginator und Blätterfunktion in Ihre CMS-Webseite bzw. Web-Blog implementieren.

if-Kontrollstrukturen im Twig-Template helfen bestimmte Seiten auszuschließen, denn nicht alle Seiten sollen beispielsweise einen Autor oder das Datum zeigen

Dieser Beitrag zeigt Ihnen, wie Sie ein erstes Plugin für PICO entwickeln. Die wenigen Zeilen Code verdeutlichen die Arbeitsweise der Plugins in diesem CMS

Der Beitrag zeigt, wie Sie mit dem Plugin PicoPagesList.php weitere Beiträge des aktuellen Ordners azeigen lassen können, um diese in ein Menü aufzunehmen.

Möchten Sie einen Log-Mechanismus entwickeln den Sie leicht in jedes PICO Template einbinden können, dann ist JavaScript und PHP ideal dafür.

So finden Sie heraus, welche Beiträge von der Suchmaschine angefordert werden aber nicht mehr im PICO CMS existieren

Fügen Sie neue Meta-Attribute in Pico hinzu oder entfernen diese, dann ist es sinnvoller zuvor auf deren Existenz abzufragen, das vermeidet Fehlermeldungen

So legen Sie die wichtigen Metadaten eines jeden Pico-Beitrags an. Es ist ein reguläres MD-File, das Sie mit jedem ASCII-Editor leicht selbst anlegen können.

Dieser Beitrag zeigt Ihnen, wie Sie einen Bildindex in Markdown anlegen und im Texte auf diese Bilder leicht referenzieren können. Dies ist eine Erleichterung.

Der aktuelle Index des Pico Loops kann für die Steuerung unterschiedlicher Formate abgefragt werden, nutzen Sie das Tag loop.index der Twig Template Engine.

Erstellen Sie einen einfachen Hitcounter und Besuchszähler als Pico Plugin. Dieser Counter zählt Aufrufe von Menschen oder Robots der Suchmaschinen.

Statt alle Blogbeiträge im Loop aufzulisten, können Sie auch einen ganz konkreten Beitrag anzeigen und dessen Existenz zuvor prüfen. Dieses Script zeigt es.

Dieser Beitrag zeigt Ihnen die einfache Installation und Inbetriebnahme des freien PICO CMS ist. Es sind nur wenige Handgriffe und wenig Voraussetzungen nötig.

Dieser Beitrag soll Ihnen einen Eindruck vermitteln, wie ein einfacher PICO Beitrag in Markdown aussieht. Sie benötigen dafür einen beliebigen ASCII Editor.

Die Datei config.conf speichert im YAML-Format Variablen ab auf die Sie aus den Templates zugreifen und verarbeiten können. Dies ist das Setup der Webseite

Dieser Beitrag zeigt Ihnen, wie Sie dynamische Templates anlegen, um damit den Content aus verschiedenen Ordner in Ihrer Webseite anzeigen zu können.

Eine Breadcrumb Navigation können Sie leicht mit Befehlen des Twig in PICO CMS leicht selbst erzeugen - so gehts.

Mit der Markdown Syntax können Sie auch einen klickbaren Bildlink im Text eintragen. Es ist eine Schachtelung verschiedener bekannter Markdown Format-Befehle.

Für die Einbindung eines Menüs gibt es kostenlose Plugins, Sie können dies auch mit Mitteln des Templates umsetzen und verzichten auf unsichere Plugins

Mit wenigen Handgriffen ändern Sie die Standard-Beitragssortierung in PICO individuell ab. Passen Sie diese Einstellung in der YAML-Datei config.yml an.

Wollen Sie im Rahmen des Twig-Templatings unter PICO die Anzahl der Beiträge in einem Ordner ermitteln, dann ist dieser Code die Lösung

Kategorien

Automad

Das kostenlose Flat File CMS Automad bietet bereits nach der Installation auf dem Server das beste Layout unter allen CMS am Markt.

Bludit

Das kostenlose Flatfile CMS Bludit ist das beliebteste Content Management System, das dem großen WordPress sehr nahe kommt, jedoch deutlich mehr Sicherheit bietet.

CMS

In dieser Rubrik geht es um übergreifenden Themen aus dem Bereich der Content Management Systeme.

Coast

Coast ist ein CMS aus deutscher Feder und ist mit einem exzellenten HTML/PHP Frontend-Editor zu vergleichen, die Daten werden direkt in der HTML-Datei gespeichert.

GetSimple

Das kostenlose Content Management System GetSimple verspricht genau das, was der Name andeutet, ein stabiles Flat File CMS auf der Basis von XML-Dateien.

GRAV

Das kostenlose Content Management System GRAV gehört zu den komplexesten CMS, da es den größten Funktionsumfang mitbringt.

Handlebars.JS

Handlebars.js ist eine kostenlose JavaScript Template-Engine mit der einfache Webseiten oder Prototypen leicht und schnell erzeugt werden können.

htaccess

Die .htaccess ist die wohl wichtigste und mächtigste Datei, über die der Server seinen Umgang mit den Daten und Besuchern steuert.

Java

Java ist die strategische Programmiersprache für verteilte Anwendungen im Internet oder auch in der Client-Server Architektur und sogar auf dem Host.

Monstra

Das CMS Monstra ist ein überaus gelungenes und sauber entwickeltes CMS mit Admin-Backend und Flat File Datenbank.

PHP

PHP ist die strategische Programmiersprache des Internets, mit PHP geht alles und ohne PHP nichts! Allerdings ist PHP nicht auf lokalen Client-Umgebungen verbreitet (aber möglich).

Pico

Das CMS Pico ist derzeit das ausgereifteste und einfachste headless CMS für den Einsatz großer Mengen an MarkDown-Files (Content).

Smarty

Smarty ist eine Template-Engine auf Basis der Programmiersprache PHP und ist in der Lage HTML-Vorlagen (Templates) dynamisch mit Content zu versorgen.

Typemill

Typemill ist zunächst ein ganz normales Flat File CMS, entfaltet jedoch sein wahres Potenzial mit einigen besonderen Plugins, die es zum kraftvollen Publishing-Tool macht.

WonderCMS

WonderCMS ist das mit Abstand kleinste CMS das es derzeit kostenlos gibt. WonderCMS kommt mit einem PHP-Script und einer JSON-Datenbank aus und bietet ein Backend.

WordPress

Das datenbankbasierte Content Management System WordPress ist das beliebteste CMS und hält die meisten Installationen - ist allerdings auch das am meisten attackierte System.

Affiliate CTA Plugin für das Bludit CMS schreiben

Legen Sie mit Hilfe der Benutzerfelder ein Kennzeichen zu jedem Bludit Beitrag an, ob dieser eine Werbung oder einen Affiliate anzeigen soll oder nicht

CTA und Affiliate Plugin mit Formular im CMS Bludit

Ein hochwertiges Affiliate und CTA Plugin für Bludit, mit beqemer Eingabemaske im Admin-Backend für vier Affiliate und CTA einblendungen im Hook pageBegin().

Ein Affiliate oder CTA Plugin für WonderCMS schreiben

Möchten Sie mit Ihrem WonderCMS und Affiliate-Links, der verschiedenen Anbieter wie Amazon,Geld verdienen, dann sollten Sie sich dieses Plugin erstellen.

Einfaches Affiliate Plugin für das Flat File CMS Typemill schreiben

Ein einfaches Affiliate und CTA Plugin für das Flat File CMS Typemill, mit Hilfe der so genannten Shortcodes.

Unabhängige Affiliate FlatFile DB für Ihren Blog oder CMS

Mit diesem Beitrag erstellen Sie (oder als Download) eine unabhängige Affiliate Datenbank, die Sie in jedem CMS, jeder Webseite oder jedem Blog nutzen können.

Mit diesem Affiliate-Plugin können Sie viel Geld verdienen

Mit diesem praktischen Affiliate-Plugin für das Bludit CMS verwandeln Sie Ihre Webseite in eine einfache Geldmaschine

YAML Syntax in Pico CMS in der Theme Config auslesen

Die YAML Syntax anhand einer Liste erläutert, die beispielsweise Affiliate oder CTA Links aufnimmt und die vom Twig-Template ausgelesen werden können.