Like It

Like It – einen Like-Button selber bauen

tl;dr: Manchmal will man seine Zustimmung oder Anerkennung zu einem gelungenen Artikel oder Bild ausdrücken, nicht immer mit einem Kommentar – ein einfaches Like reicht aus. Wenn man ohnehin mit Elementor Pro und Dynamic Content for Elementor arbeitet benötigt man keine weitere Software um Likes für seine Seiten, Beiträge oder Custom Posts zu sammeln

Voraussetzungen

Seine Zustimmung zu hinterlassen sollte einfach umzusetzen sein, ohne mühsame Registrierung, zusätzlichem Plugin oder eigener Programmierung. Mit folgenden Voraussetzungen läßt sich das einfach umsetzen (sehr oft hat an diese Tools ohnehin bereits im Einsatz):

Like it! [36]

Ein Button mit dynamischer Beschriftung, wieviele Personen bereits diesen Button geklickt haben.

Zählfeld anlegen

Zuerst benötigt man einen Platz, der für jeden Beitrag, jede Seite oder auch jeden Custom Post die Anzahl der Likes speichert. Das kann man mit den WordPress eigenen Individuellen Feldern machen, hier wird aber - weil es bei Projekten sehr oft ohnehin schon installiert wurde  - Advanced Custom Fields verwendet. Die kostenlose Version ist hier völlig ausreichend. 

Unter 

Dashboard > ACF > Feldgruppen

wird eine Gruppe (zB: Likefelder) angelegt und darin ein Feld "likeit" als numerisches Feld. Bei den Einstellungen darunter wird definiert, dass diese Feldgruppe bei Beiträgen (=Voreinstellung) angezeigt wird. Damit können zu jedem Post Likes eingesammelt werden. 

ACF Likefelder
Mit ACF wird eine Feldgruppe angelegt mit einem numerischen Feld. Die Feldgruppe wird bei Beiträgen und Seiten angezeigt.

Features in Dynamic Content aktivieren

Als nächstes werden die notwendigen Features in Dynamic Content aktiviert:

Dashboard > Dynamic Content > Features > Extensions

Man benötigt:

  • Save for Elementor Pro Form
  • Message Generator for Elementor Pro Form

Letzters ist nicht unbedingt notwendig, damit lassen sich aber von "Keine" bis "Template" Feedbacks für den Klick konfigurieren.

dynamic features
Man benötigt 2 Features von Dynamic Content für die Umsetzung des Like-Buttons

Formular (Button) erstellen

Um jetzt einen Like-Button zu erstellen wird ein Formular verwendet - man verwendet einfach den Absende-Button als Bedienelement:

  1. Formular Widget droppen
  2. 2 der 3 Standard-Felder entfernen
  3. Den Typ des letzten (einzigen) Feldes auf versteckt setzen.
  4. Feldnamen auf "likeit" setzen (=gleich wie der ACF-Feldnamen).
  5. Erweitert konfigurieren: Standardwert auf Shortcode setzen, id auf likeit. Den Shortcode [likeit] eintragen.
  6. Absenden Schaltfläche konfigurieren: Dynamisches Attribut ACF-Feld/likeit wählen (damit wird die Anzahl der Likes angezeigt). In  Erweitert > Danach " Likes. Und du?" eintragen.
    Icon auswählen, Farben, Abstände, Rahmen etc gestalten.
Formular Config Likeit
Der Standardwert wird auf Shortcode [likeit] gesetzt. Die Absenden-Schaltfläche dynamisch mit dem Wert des ACF-Feldes beschriftet.
  1. Aktionen nach dem Versenden konfigurieren: Save und Message Generator auswählen.
aktionen
2 Aktionen nach dem Versenden werden konfiguriert: Save und Message Generator
  1. Save konfigurieren: 
    Save Field as Post
    Redirect to: führt zu einem Reload der Seite
    Update existent data: sonst würde ein neuer Post angelegt werden
    ID to update: leer lassen, damit die aktuelle ID verwendet wird
    Form fields to save as meta: likeit (=ACF-Name) eintragen
    Voreintrag zu Post Title und Post Content löschen! Sicher ist sicher.
  2. Message Generator: Wer das konfiguriert, kann die hässliche default-Meldung des Elementor-Formulars ersetzen. (Thanks for submitting this form). Man kann das Feld leer lassen, mit eigenem Rich-Text füllen oder sogar ein Sub-Template zur Anzeige gestalten. 
Save Likeit
Die Optionen im Save-Dialog sind genau einzutragen

Shortcode erstellen

Als letztes benötigt man noch den Shortcode der das versteckte Formularfeld mit dem um 1 erhöhten Inhalt des als Formular-Standard-Wert ausgibt. 

Man definiert eine Funktion (Zeile 1-4) die den Wert des ACF-Feldes ausliest und um 1 erhöht (Zeile 2) und diesen zurückgibt (Zeile 3).

In Zeile 5 wird der Shortcode der WordPress-Installation bekannt gegeben.

function likeit(){
	$like = get_field('likeit')+1;
    return($like);
 }
add_shortcode( 'likeit', 'likeit' );

Definiert wird das im

Dashboard > Snippets >  Add new Snippet  | Functions PHP

Der Weg über den selbst definierten Shortcode sprengt zwar die hier sonst übliche Grenze (möglichst kein Code), doch ich habe keine Lösung gefunden, die sich nur im Frontend umsetzen lässt. So kompliziert ist das auch nicht. 
Anmerkung: Das elementoreigene CustomCode Feature lässt keinen PHP Code zu, daher das Plugin Code Snippets.

Snippet erstellen
Mittels Code Snippet wird der Shortcode definiert

Fazit

Das war's auch schon. Man kann das Formular als Globales Widget Speichern oder in einem Seiten/Beitragstemplate verwenden. Natürlich lässt sich mit dem selben Ansatz auch eine Sternewertung vornehmen oder auch eine Like/Dislike Funktion umsetzen.

Etwas unschön ist der Reload der gesamten Seite nach dem Klick, wer hier eine einfach umzusetzende AJAX-Lösung hat möge diese bitte in den Kommentaren posten!

Veröffentlicht am: 23. November 2023
Letztes Update am: 15. August 2026

Hinterlasse den ersten Kommentar