Smiley-Auswahl im Gästebuch-Formular hinzufügen

Die Smiley-Auswahl im Gästebuch-Formular hinzufügen heißt, dass Sie Ihren Besuchern eine kleine Leiste mit anklickbaren Gesichtern direkt über dem Nachrichtenfeld geben. Ein Klick genügt, und das passende Kürzel landet automatisch im Eingabefeld. Niemand muss mehr Doppelpunkt und Klammer von Hand tippen oder raten, welcher Code zu welchem Gesicht gehört. Das Ergebnis: Einträge wirken freundlicher und persönlicher, und auch ungeübte Gäste finden den richtigen Smiley sofort.

Dieser Artikel zeigt Ihnen Schritt für Schritt, wie Sie Smileys im Gästebuch-Script nachrüsten, wo genau die Auswahl-Leiste in das Formular gehört und mit welchem kurzen Stück HTML und JavaScript der Klick funktioniert. Vorweg: Das Gästebuch-Script wandelt Kürzel von sich aus nicht in Grafiken um, diesen Teil ergänzen Sie selbst. Große Vorkenntnisse brauchen Sie dafür nicht.

Was eine Smiley-Auswahl im Gästebuch-Formular ist

Bevor es an den Einbau geht, lohnt ein kurzer Blick auf die beiden Bestandteile, die zusammenspielen müssen.

Ein Smiley (auch Emoticon genannt) liegt im Gästebuch in zwei Formen vor. Einmal als reines Textkürzel aus Zeichen wie :-), das im Nachrichtenfeld steht, und einmal als kleine Grafik, die ein Script beim Anzeigen daraus machen kann. Das Gästebuch-Script tut das von Haus aus nicht. Die Auswahl-Leiste ist nichts anderes als eine Reihe dieser Grafiken, angeordnet als anklickbare Schaltflächen. Der Besucher sieht das Bild, klickt darauf, und im Hintergrund schreibt JavaScript das zugehörige Kürzel in das Textfeld. Beim Speichern wandert der Eintrag samt Kürzel in die Datenbank, beim Ausgeben ersetzt eine von Ihnen ergänzte Zeile in gaestebuch.php das Kürzel wieder durch die Grafik. Der Gast muss von diesem Hin und Her nichts mitbekommen.

Welche Kürzel sich für das Gästebuch-Script eignen

Damit ein Kürzel zuverlässig in eine Grafik umgewandelt wird, muss es exakt der Schreibweise entsprechen, die Ihre Ersetzung kennt. Das Gästebuch-Script erkennt von sich aus gar keine Kürzel, ein getipptes :-) bleibt Text. Für die Nachrüstung eignen sich die klassischen ASCII-Emoticons aus Augen, optionaler Nase und Mund wie :-) oder ;-), weil das Script sie beim Speichern unverändert lässt. Halten Sie sich daher durchgehend an die ASCII-Variante, sowohl in der Auswahl-Leiste als auch in eigenen Hinweistexten.

Die folgende Tabelle zeigt eine alltagstaugliche Grundauswahl. Diese fünf bis sechs Symbole decken die häufigsten Stimmungen ab, ohne die Leiste zu überladen.

Welche Kürzel umgewandelt werden, legen Sie selbst fest, und zwar in der Ersetzungsliste, die Sie in gaestebuch.php ergänzen. Erweitern Sie die Auswahl ruhig erst dann, wenn Sie merken, welche Symbole Ihre Besucher tatsächlich nutzen.

Wo die Auswahl-Leiste in das Formular gehört

Damit die Gäste die Smileys auch finden, kommt die Leiste an eine gut sichtbare Stelle.

Eingebaut wird sie im Formular-Template des Gästebuchs, üblicherweise direkt oberhalb des Nachrichtenfeldes (dem <textarea>). So sieht der Besucher die Symbole genau dann, wenn er ohnehin gerade tippt. Die Umwandlung von Kürzel in Grafik müssen Sie zusätzlich ergänzen, denn das Gästebuch-Script gibt die Nachricht unverändert aus. Dafür genügt eine str_replace-Zeile in gaestebuch.php. Dazu kommen die sichtbare Leiste und das kleine Skript, das den Klick an das Textfeld weitergibt.

Das Codebeispiel: anklickbarer Smiley plus JavaScript

Im Kern brauchen Sie zwei Zutaten: pro Smiley ein Bild mit einem onclick-Aufruf und eine kleine Funktion, die das Kürzel an den vorhandenen Text anhängt. Das folgende Beispiel hängt das gewählte Kürzel ans Ende des Nachrichtenfeldes an und setzt anschließend den Cursor wieder hinein.

<!-- Auswahl-Leiste, oberhalb des <textarea> einfügen -->
<div class="smiley-leiste">Smiley anklicken, um ihn einzufügen:
  <img src="smilies/smile.gif"  alt=":-)" onclick="smiley(':-)')">
  <img src="smilies/wink.gif"   alt=";-)" onclick="smiley(';-)')">
  <img src="smilies/sad.gif"    alt=":-(" onclick="smiley(':-(')">
</div>
 
<script>
function smiley(code) {
  var feld = document.getElementById('message');
  feld.value += ' ' + code + ' ';
  feld.focus();
}
</script>

Wichtig ist, dass die id im JavaScript (message) mit der id des Textfeldes übereinstimmt. In tpl/template.tpl steht <textarea name="message" id="message" ...>. Den Bildordner (smilies/) passen Sie an den Pfad an, unter dem die Grafiken auf Ihrem Server liegen. Das Leerzeichen vor und nach dem Kürzel sorgt dafür, dass der Code nicht mit dem davor getippten Wort verklebt und sauber erkannt wird.

Worauf Sie beim Einrichten achten sollten

Ein paar Kleinigkeiten entscheiden darüber, ob die Smileys später sauber erscheinen oder als kryptischer Text stehen bleiben.

• Exakte Kürzel: Schreiben Sie das Kürzel genau so wie in Ihrer Ersetzungsliste in gaestebuch.php, ein zusätzliches Zeichen genügt, und die Umwandlung schlägt fehl.
• Passende Bildgröße: Halten Sie die Grafiken klein, etwa 16 bis 20 Pixel, damit sie in den Textfluss passen.
• Klare Beschriftung: Ein kurzer Hinweis über der Leiste hilft unsicheren Besuchern.
• Mobile Ansicht prüfen: Testen Sie auf dem Handy, ob die Symbole groß genug zum Antippen sind.

Senden Sie nach dem Einbau einen eigenen Testeintrag mit mehreren Smileys ab und schalten Sie ihn im Admin-Bereich frei. Erscheinen alle als Grafik, ist alles richtig verdrahtet.

Häufige Fehler und ihre Lösung

Tauchen Probleme auf, liegt es fast immer an einer von zwei Ursachen. Beide sind schnell behoben.

Das Kürzel bleibt als Text stehen. Dann fehlt die Ersetzung in gaestebuch.php, oder die Schreibweise passt nicht zu Ihrer Ersetzungsliste. Prüfen Sie auf vertauschte Zeichen und überflüssige Leerzeichen mitten im Kürzel (also : -) statt :-)). Vergleichen Sie das Kürzel im onclick Buchstabe für Buchstabe mit Ihrer Ersetzungsliste in gaestebuch.php.

Statt des Smileys erscheint ein leeres Bild-Symbol. Hier stimmt der Pfad im src nicht. Öffnen Sie die Bildadresse einmal direkt im Browser und korrigieren Sie Ordnernamen und Dateiendung, bis die Grafik geladen wird.

Häufige Fragen

Muss ich die Smiley-Umwandlung selbst programmieren?

Ja, aber nur wenig. Das Gästebuch-Script ersetzt von sich aus nichts. Ergänzen Sie in gaestebuch.php bei der Ausgabe der Nachricht ein str_replace, das die Kürzel durch die Grafiken ersetzt.

Kann ich eigene Smiley-Grafiken verwenden?

Ja. Legen Sie Ihre Bilder in einen eigenen Ordner, etwa smilies/, achten Sie auf eine kleine Pixelgröße und tragen Sie das jeweilige Kürzel in Ihre Ersetzungsliste in gaestebuch.php ein.

Worin liegt der Unterschied zwischen Smileys und BBCode?

Smileys ersetzen ein Kürzel durch ein Bild, BBCode steuert die Formatierung wie Fett oder Kursiv. Beides arbeitet aber nach demselben Prinzip aus Kürzel und Umwandlung. Mehr dazu lesen Sie unter Smileys im Gästebuch einfügen, BBCode im Gästebuch nutzen und Text im Gästebuch fett und kursiv formatieren.

Verwandte Themen

Diese Beiträge führen das Thema weiter und helfen Ihnen beim nächsten Schritt:

• Smileys im Gästebuch einfügen
• BBCode im Gästebuch nutzen
• Text im Gästebuch fett und kursiv formatieren
• Avatar oder Profilbild im Gästebuch anzeigen
• Gästebuch mit CSS gestalten
• Links im Gästebuch erlauben oder sperren

Dieser Beitrag wurde von der Redaktion von gaestebuch-script.de erstellt und zuletzt im Juni 2026 fachlich überprüft.