Des smileys aux emojis 🚀

13 avril 2025

Des smileys aux emojis 🚀

Avant les emojis, il y avait les smileys. Ces petites images animaient nos discussions en ligne aux débuts d’Internet. Sur mon forum, j’utilisais les smileys classiques comme :) pour un sourire, :P pour tirer la langue, ou encore :lol: pour une franche rigolade, et le forum remplaçait automatiquement ces combinaisons de caractères par des images.

Mais cette technologie a pris des rides, et les emojis sont devenus le standard universel : 🙏, 😂, 🔥… Contrairement aux smileys, ces pictogrammes sont reconnus nativement par tous les navigateurs et appareils modernes. Alors j'ai pris sur moi de moderniser ce bon vieux forum !

Smileys vs Emojis : petite leçon d’histoire numérique

Pour bien comprendre la différence :

Smileys (années 90-2000) : des images qui remplacent du texte, comme :) transformé en
Emojis (2010+) : des caractères Unicode standardisés comme 🙂 qui s’affichent directement sur tous les appareils modernes

Avant la modification, mon forum remplaçait la plupart des emojis par des points d'interrogation : ? ? ? ? ☺️ ? ? ?
Pas très engageant… Les anciens forums comme phpBB n’avaient pas été conçus à l’origine pour gérer les emojis, car ils n'existaient tout simplement pas.

Comme je tiens à mon indépendance numérique, je préfère faire évoluer mon forum et ne pas migrer vers des plateformes propriétaires comme Discord. J’ai donc mis la main à la pâte. Et si vous êtes aussi dans mon cas, vous allez voir : ce n'est pas si compliqué.

Étape 1 : Préparer la base de données

⚠️ Conseil crucial : avant toute manipulation, faire une sauvegarde complète de votre base de données ⚠️

Les emojis utilisent l’encodage UTF-8 MB4, capable de gérer 4 octets par caractère (contre 3 pour le simple UTF-8). Une simple requête SQL permet de convertir la table des messages pour qu’elle accepte ces caractères :

ALTER TABLE phpbb_posts CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

👉 Cette commande permet aux emojis copiés-collés dans la base d’être correctement affichés dans les posts du forum.

Mais… problème : les emojis saisis directement via l’interface du forum continuaient à se transformer en points d’interrogation ? dans la base.

En fouillant dans le code source du forum, j’ai découvert la responsable : la fonction strip_bad_multibyte_chars qui supprimait les caractères à 4 octets – donc les emojis – pour éviter les bugs sur les anciennes bases de données non compatibles.


function strip_bad_multibyte_chars($str) {

  $result = '';

  $length = strlen($str);

  for ($i = 0; $i < $length; $i++) {

    $ord = ord($str[$i]);

    if ($ord >= 240 && $ord <= 244) {

      $result .= '?'; // <============= le fameux point d'intérogation

      $i += 3;

    } else {

      $result .= $str[$i];

    }

  }

  return $result;

}

💡 Il m’a suffi de désactiver cette fonction pour que les emojis puissent enfin être enregistrés et affichés correctement.

Étape 2 : Convertir les anciens smileys en emojis

Il fallait maintenant remplacer les smileys par leurs équivalents emojis dans les anciens messages du forum. Pour ça, j’ai commencé par établir une correspondance entre les smileys que j’avais dessinés en pixels il y a plus de vingt ans, et leurs homologues modernes :

Code	Smileys	Emoji
:)		🙂
:\|		😐
:(		🙁
D		😁
:o		😮
;)		😉
:/		🫤
:p		😛
:lol:		😆
:mad:		😠
:rolleyes:		🙄
:cool:		😎

Puis j’ai écrit un petit script PHP pour parcourir tous les messages et remplacer les codes texte par les emojis correspondants :


// Initialisation du framework du forum

define('PUN_ROOT', dirname(__FILE__).'/');

require PUN_ROOT.'include/common.php';


// Table de correspondance smiley → emoji

$smileyMap = [

  ':lol:'      => '😀',

  ':mad:'      => '😠',

  ':rolleyes:' => '🙄',

  ':cool:'     => '😎',

  ':)'         => '🙂',

  // ... (tous les autres smileys)

];


// Début de la transaction SQL pour sécurité

$db->query('START TRANSACTION') or error('Transaction failed', __FILE__, __LINE__, $db->error());


// Récupère tous les messages du forum

$result = $db->query('SELECT id, message FROM '.$db->prefix.'posts') or error('Fetch failed', __FILE__, __LINE__, $db->error());


$updated = 0; // Compteur de modifications


// Traitement message par message

while ($post = $db->fetch_assoc($result)) {

  $original = $post['message'];

  $updatedMessage = str_replace(

    array_keys($smileyMap), 

    array_values($smileyMap), 

    $original

  );


  // Ne met à jour que si modification détectée

  if ($updatedMessage !== $original) {

    $db->query('UPDATE '.$db->prefix.'posts SET message=''

      .$db->escape($updatedMessage).'' WHERE id='.$post['id']) or error('Update failed', __FILE__, __LINE__, $db->error());

    $updated++;

  }

}


// Validation finale

$db->query('COMMIT') or error('Commit failed', __FILE__, __LINE__, $db->error());


echo "Succès : $updated messages mis à jour 🎉";

Petit coup de stress après avoir lancé ce script, parce que tous les :/ ont été remplacés par 🫤, cassant tous les liens internet présents dans les posts du forum, ainsi que les images.

Par exemple https://www.txori.com devenait https🫤/www.txori.com

Heureusement, j’avais fait ma sauvegarde. La solution : ajouter un espace devant les codes à remplacer dans le tableau $smileyMap. Par exemple, ' :/' au lieu de ':/' pour éviter les faux positifs dans les URLs.

Étape 3 : Nettoyer le code historique

Après la conversion :

Les anciens messages affichent désormais des emojis flambant neufs.
Les nouveaux messages, eux, tentaient encore de convertir :) en vieux smileys.

J’ai donc supprimé le système de reconnaissance des chaînes de caractères représentant les smileys, pour ne garder que les emojis natifs.

Étape 4 : Ajouter un sélecteur moderne

Pour finir, j’ai intégré un Emoji Picker dans la barre d’édition du forum, comme pour le sélecteur de couleur. Au lieu de développer moi-même un outil aussi complexe, je me suis tourné vers une bibliothèque toute prête : emoji-picker-element, par Nolan Lawson.

Voici comment l'intégrer :


<!-- Charger la librairie -->

<script type="module" src="//cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>



<!-- Insérer le sélecteur -->

<emoji-picker></emoji-picker>



<!-- Ajouter un handler JS -->

<script>

    document.querySelector('emoji-picker')

        .addEventListener('emoji-click', event => {

            insertEmoji(event.detail.unicode);

        });

</script>

Conclusion

Mes petits smileys pixelisés auront tenu vingt ans, mais il était temps de leur rendre leur liberté et d’accueillir dignement leurs descendants. Et tout cela, sans dépendre d’une discordante plateforme qui fait son beurre sur les données de ses utilisateurs, alors qu'ils se croient à l'abri sur des "serveurs privés" 💩✨