Pourquoi coder soi-même les boutons de partage sur WordPress ?

Les plugins WordPress de partage social sont nombreux, puissants, mais souvent trop lourds pour ce qu’ils apportent réellement. Entre le JavaScript chargé à outrance, les appels externes non maîtrisés et les objectifs marketing dissimulés, il est temps de reprendre le contrôle.

Les problèmes posés par les plugins de partage :

1. Performance dégradée
   Beaucoup de plugins injectent des scripts JavaScript sur toutes les pages, même celles qui n’en ont pas besoin. Cela ralentit le site, augmente le Time to First Byte et pénalise le SEO.
2. Appels externes multiples
   Ces extensions chargent souvent des ressources tierces (Facebook, Twitter/X, etc.) ce qui augmente le temps de chargement et peut poser des problèmes de vie privée (RGPD).
3. Modèle économique opaque
   Derrière des fonctionnalités gratuites se cachent souvent des objectifs commerciaux : collectes de données, publicités, ou options payantes inutiles.

La solution : intégrer manuellement les boutons de partage

Un simple bout de HTML et un peu de CSS (chunk) dans une fonction ou un plugin personnalisé suffisent pour créer des boutons propres, rapides et 100 % contrôlés. Voici un exemple simple :

// Ajout les icones de partage social sur les articles
function sps_ajouter_partage_social($content)
{
  if (is_single() && in_the_loop() && is_main_query()) {
    $reseaux_sociaux = [
      [
        'nom' => 'Suivre',
        'url' => 'mailto:?subject=' . rawurlencode(get_the_title()) . '&body=' . rawurlencode(get_permalink()),
        'icone' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 2-8 5-8-5h16zm-8 7-8-5v10h16V8l-8 5z"/></svg>',
        'couleur' => '#EA4335'
      ],
      [
        'nom' => 'Partager',
        'url' => 'https://www.facebook.com/sharer/sharer.php?u=' . rawurlencode(get_permalink()),
        'icone' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.126v-3.622h3.126v-2.672c0-3.1 1.893-4.788 4.656-4.788 1.325 0 2.464.099 2.795.143v3.239h-1.917c-1.504 0-1.794.715-1.794 1.762v2.316h3.588l-.467 3.622h-3.121v9.294h6.112c.731 0 1.324-.593 1.324-1.324v-21.351c0-.732-.593-1.325-1.324-1.325z"/></svg>',
        'couleur' => '#1877F2'
      ],
      [
        'nom' => 'X (Twitter)',
        'url' => 'https://twitter.com/intent/tweet?url=' . rawurlencode(get_permalink()) . '&text=' . rawurlencode(get_the_title()),
        'icone' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 24 24"><path d="M17.53 2.47h3.2l-7.03 8.01 8.2 11.05h-6.44l-5.06-6.61-5.8 6.61H2.47l7.5-8.54L1.47 2.47h6.57l4.68 6.12zm-1.12 16.91h1.76L6.81 4.62H5.02z"/></svg>',
        'couleur' => '#000000'
      ],
      [
        'nom' => 'WhatsApp',
        'url' => 'https://api.whatsapp.com/send?text=' . rawurlencode(get_the_title() . ' ' . get_permalink()),
        'icone' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#ffffff" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.198.297-.767.967-.94 1.164-.173.198-.347.223-.644.075-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.148-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.372-.01-.571-.01-.198 0-.52.075-.792.372-.273.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.214 3.074.149.198 2.1 3.2 5.077 4.366.711.306 1.264.489 1.698.625.713.227 1.362.195 1.874.118.572-.085 1.758-.718 2.006-1.413.248-.695.248-1.29.173-1.413-.075-.124-.272-.198-.57-.347z"/><path d="M12.004 2.003A9.997 9.997 0 0 0 2 12c0 1.769.463 3.504 1.343 5.036L2 22l5.062-1.324A9.995 9.995 0 1 0 12.004 2.003zm0 18.182c-1.662 0-3.292-.437-4.701-1.267l-.335-.197-3.004.786.8-2.934-.217-.342A8.183 8.183 0 1 1 20.186 12c0 4.522-3.668 8.185-8.182 8.185z"/></svg>',
        'couleur' => '#25D366'
      ],
      [
        'nom' => 'Enregistrer',
        'url' => 'https://www.linkedin.com/shareArticle?mini=true&url=' . rawurlencode(get_permalink()),
        'icone' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M22.23 0h-20.46c-.98 0-1.77.79-1.77 1.77v20.46c0 .98.79 1.77 1.77 1.77h20.46c.98 0 1.77-.79 1.77-1.77v-20.46c0-.98-.79-1.77-1.77-1.77zm-14.23 20.16h-3.07v-9.96h3.07v9.96zm-1.53-11.31c-.99 0-1.79-.81-1.79-1.8s.8-1.8 1.79-1.8c.99 0 1.8.81 1.8 1.8s-.81 1.8-1.8 1.8zm13.53 11.31h-3.07v-5.41c0-1.29-.03-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85v5.51h-3.07v-9.96h2.95v1.36h.04c.41-.78 1.41-1.6 2.91-1.6 3.11 0 3.68 2.05 3.68 4.72v5.48z"/></svg>',
        'couleur' => '#0A66C2'
      ]
    ];

    $partage_social = '<div class="social-share-buttons" style="display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0; justify-content: center;">';

    foreach ($reseaux_sociaux as $reseau) {
      $partage_social .= sprintf(
        '<a href="%s" target="_blank" rel="noopener noreferrer" style="%s">%s<span style="margin-left: 8px; font-weight: 500;">%s</span></a>',
        esc_url($reseau['url']),
        'background: ' . $reseau['couleur'] . '; display: inline-flex; align-items: center; padding: 12px 18px; border-radius: 8px; transition: transform 0.2s; color: white; text-decoration: none;',
        $reseau['icone'],
        esc_html($reseau['nom'])
      );
    }

    $partage_social .= '</div>';

    return $content . $partage_social;
  }
  return $content;
}
add_filter('the_content', 'sps_ajouter_partage_social');

Avantages de cette méthode :

• Léger et rapide : aucun JS externe.
• Personnalisable à souhait (couleurs, icônes, comportement).
• Aucun tracking tiers, conformité RGPD garantie.
• Pas de surcharge de base de données ni mise à jour fréquente.

Quand on peut coder simplement, pourquoi charger son site avec un plugin lourd ? Pour des besoins aussi simples que le partage social, mieux vaut privilégier la performance, la sécurité et le contrôle. En plus, vous améliorez l’expérience utilisateur tout en gardant une belle cohérence visuelle.

Exemple concret mis en place sur le site du SPS syndicat des agents de sécurité

Voir en direct sur le site SPS WordPress + Divi

Un autre exemple concret avec Oxygen Builder mis en place sur Amazigh24.com

J’utilise un composant personnalisé dans Oxygen Builder, qui intègre lui-même un bloc de code. Un cas a été particulièrement révélateur en ce qui concerne le changement de l’icône de Twitter, désormais renommé X. L’ancienne icône restait affichée, même après modification, en raison du cache ou d’un rendu non mis à jour.

Il n’existait pas alors de méthode directe dans Oxygen pour remplacer une icône sociale par un SVG personnalisé, sauf à passer par un contournement comme le Link Wrapper. De plus, le code HTML généré automatiquement peut ne pas respecter les bonnes pratiques ou standards souhaités.

Un Link Wrapper (ou « enveloppe de lien ») est un élément structurel utilisé dans des constructeurs visuels comme Oxygen Builder ou Elementor, qui permet de transformer tout un bloc ou groupe d’éléments en lien cliquable.

<a href="https://x.com/votreprofil"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Suivez-nous sur X (anciennement Twitter)"
   style="display: inline-flex; align-items: center; text-decoration: none;">
  
  <img src="/wp-content/uploads/icone-x.svg"
       alt="Icône X"
       width="24"
       height="24"
       style="margin-right: 0.5em;" />

  <span style="font-weight: 600; color: #000;">Suivez-nous</span>

</a>

Exemple d’un Link Wrapper fonctionnel.

Face à ces limites, j’ai donc rapidement développé ma propre solution sur mesure, garantissant un affichage correct, un SVG à jour, et un code conforme et optimisé.

<!-- Partage sur WhatsApp -->
<div class="social-share-btn">
  <a href="whatsapp://send?text=<?php echo urlencode(get_the_title() . ': ' . get_permalink()); ?>" target="_blank" rel="nofollow" aria-label="Partager sur WhatsApp">
      <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.4em" viewBox="0 0 448 512"><path fill="black" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222c0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222c0-59.3-25.2-115-67.1-157m-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4l-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2c0-101.7 82.8-184.5 184.6-184.5c49.3 0 95.6 19.2 130.4 54.1c34.8 34.9 56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6m101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18c-5.1-1.9-8.8-2.8-12.5 2.8c-3.7 5.6-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4c-32.6-16.3-54-29.1-75.5-66c-5.7-9.8 5.7-9.1 16.3-30.3c1.8-3.7.9-6.9-.5-9.7c-1.4-2.8-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5c-3.2-.2-6.9-.2-10.6-.2c-3.7 0-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3c0 27.3 19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8c35.2 15.2 49 16.5 66.6 13.9c10.7-1.6 32.8-13.4 37.4-26.4c4.6-13 4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6"/></svg></a>
</div>

<!-- Partage sur Twitter X -->
<div class="social-share-btn">
  <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow" aria-label="Partager sur Twitter">
    <svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 512 512"><path fill="black" d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg></a>
</div>

<!-- Partage sur Facebook -->
<div class="social-share-btn">
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" rel="nofollow" aria-label="Partager sur Facebook">
        <svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 512 512"><path fill="black" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256c0 120 82.7 220.8 194.2 248.5V334.2h-52.8V256h52.8v-33.7c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287v175.9C413.8 494.8 512 386.9 512 256"/></svg></a>
</div>

<!-- Partage sur Pinterest -->
<div class="social-share-btn">
    <a href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink()); ?>&media=<?php echo urlencode(get_the_post_thumbnail_url()); ?>&description=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow" aria-label="Partager sur Pinterest">
       <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1.4em" viewBox="0 0 384 512"><path fill="black" d="M204 6.5C101.4 6.5 0 74.9 0 185.6C0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4c0-9.3-23.7-29.1-23.7-67.8c0-80.4 61.2-137.4 140.4-137.4c68.1 0 118.5 38.7 118.5 109.8c0 53.1-21.3 152.7-90.3 152.7c-24.9 0-46.2-18-46.2-43.8c0-37.8 26.4-74.4 26.4-113.4c0-66.2-93.9-54.2-93.9 25.8c0 16.8 2.1 35.4 9.6 50.7c-13.8 59.4-42 147.9-42 209.1c0 18.9 2.7 37.5 4.5 56.4c3.4 3.8 1.7 3.4 6.9 1.5c50.4-69 48.6-82.5 71.4-172.8c12.3 23.4 44.1 36 69.3 36c106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5"/></svg></a>
</div>     

<!-- Partage sur Reddit -->
<div class="social-share-btn">
    <a href="https://www.reddit.com/submit?url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>" target="_blank" rel="nofollow" aria-label="Partager sur Reddit">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 512 512"><path fill="black" d="M373 138.6c-25.2 0-46.3-17.5-51.9-41c-30.6 4.3-54.2 30.7-54.2 62.4v.2c47.4 1.8 90.6 15.1 124.9 36.3c12.6-9.7 28.4-15.5 45.5-15.5c41.3 0 74.7 33.4 74.7 74.7c0 29.8-17.4 55.5-42.7 67.5c-2.4 86.8-97 156.6-213.2 156.6S45.5 410.1 43 323.4c-25.4-11.9-43-37.7-43-67.7C0 214.4 33.4 181 74.7 181c17.2 0 33 5.8 45.7 15.6c34-21.1 76.8-34.4 123.7-36.4v-.3c0-44.3 33.7-80.9 76.8-85.5C325.8 50.2 347.2 32 373 32c29.4 0 53.3 23.9 53.3 53.3s-23.9 53.3-53.3 53.3M157.5 255.3c-20.9 0-38.9 20.8-40.2 47.9s17.1 38.1 38 38.1s36.6-9.8 37.8-36.9s-14.7-49.1-35.7-49.1zM395 303.1c-1.2-27.1-19.2-47.9-40.2-47.9s-36.9 22-35.7 49.1c1.2 27.1 16.9 36.9 37.8 36.9s39.3-11 38-38.1zm-60.1 70.8c1.5-3.6-1-7.7-4.9-8.1c-23-2.3-47.9-3.6-73.8-3.6s-50.8 1.3-73.8 3.6c-3.9.4-6.4 4.5-4.9 8.1c12.9 30.8 43.3 52.4 78.7 52.4s65.8-21.6 78.7-52.4"/></svg></a>
</div>

<!-- Partage par email -->
<div class="social-share-btn">
<a href="mailto:?subject=<?php echo urlencode(get_the_title()); ?>&body=<?php echo urlencode(get_permalink()); ?>" aria-label="Partager par email">
<svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 512 512"><path fill="black" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4l217.6 163.2c11.4 8.5 27 8.5 38.4 0l217.6-163.2c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48zM0 176v208c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V176L294.4 339.2a63.9 63.9 0 0 1-76.8 0z"/></svg></a>
</div>

Comparaison de deux plugins de partage populaire

Les plugins de partage social pour WordPress peuvent sembler pratiques, mais ils ont souvent un impact significatif sur les performances de votre site. Des outils comme WP Hive permettent d’analyser ces plugins en détail pour évaluer leur consommation de ressources.

Prenons l’exemple de deux plugins bien connus : WordPress Share Buttons et Social Share.

WordPress Share Buttons

• Taille du plugin : Environ 179 Ko
• Utilisation moyenne de la mémoire : -0,42 Ko (moins que 99 % des plugins)
• Impact sur le temps de chargement des pages : Augmentation moyenne de 0,03 seconde
• Scripts externes : Charge des ressources de réseaux sociaux tels que Facebook et Twitter
• Fonctionnalités supplémentaires : Affichage du nombre de partages, personnalisation des boutons

Social Share

• Taille du plugin : Environ 179 Ko
• Utilisation moyenne de la mémoire : 0,12 Ko (moins que 99 % des plugins)
• Impact sur le temps de chargement des pages : Augmentation moyenne de 0,04 seconde
• Scripts externes : Charge des ressources de réseaux sociaux tels que Facebook et Twitter
• Fonctionnalités supplémentaires : Widget pour la barre latérale avec boutons de partage simples

Comparatif sur WPHive

Bien que ces plugins offrent des fonctionnalités utiles, ils présentent plusieurs inconvénients :

• Chargement de scripts externes : Ils intègrent souvent des scripts de réseaux sociaux qui peuvent ralentir le site.
• Impact sur la performance : Même une augmentation de 0,03 à 0,04 seconde peut affecter l’expérience utilisateur et le référencement.
• Collecte de données : Certains plugins peuvent suivre les interactions des utilisateurs, posant des questions de confidentialité.
• Surcharge de fonctionnalités : Des options supplémentaires non nécessaires peuvent alourdir le site.

WP Hive est un outil précieux pour évaluer l’impact des plugins sur votre site. Il fournit des informations détaillées sur :

• Utilisation de la mémoire
• Impact sur la vitesse de chargement
• Compatibilité avec les versions de PHP et de WordPress
• Problèmes de sécurité potentiels

Avant d’installer un plugin, consultez WP Hive pour prendre une décision éclairée.

Le Full site editing et des plugins de gestion de bloc viennent aussi à la rescousse

Avec l’arrivée du Full Site Editing (FSE) et des plugins avancés de gestion de blocs comme Spectra, Kadence Blocks, Stackable, ou Ottar, WordPress permet désormais d’intégrer des blocs Gutenberg réactifs et prêts à l’emploi dans une logique « clé en main ». Ces solutions permettent de construire des interfaces élégantes sans écrire une ligne de code, tout en respectant les standards modernes.

Mais pour aller plus loin, il est aussi possible de créer ses propres blocs Gutenberg en utilisant React, le cœur technologique de l’éditeur moderne de WordPress. Cela permet de :

• Créer des composants sur mesure, ultra légers.
• Intégrer des fonctions dynamiques ou des champs personnalisés.
• Garder une cohérence graphique totale avec le thème.
• Éviter la dépendance à des plugins tiers.

Cette approche hybride — utiliser des blocs existants pour aller vite, mais savoir intervenir sur mesure quand nécessaire — est une compétence-clé pour devenir un expert WordPress moderne.

Exemple d’intégration pour Dictionnaire-numerique.fr : bloc Social share de Greenshift

En conclusion

Bien que les plugins de partage social offrent des fonctionnalités prêtes à l’emploi, ils peuvent compromettre la performance, la confidentialité et même la cohérence technique de votre site. Envisager de coder vos propres boutons de partage, c’est reprendre le contrôle sur le code, gagner en vitesse de chargement, et en indépendance vis-à-vis des mises à jour ou des freemiums.

Les personnes non techniques ne réalisent pas toujours l’impact d’utiliser jQuery plutôt que du Vanilla JS, ou d’ajouter un plugin qui injecte des scripts sur toutes les pages, même inutiles. Mais ce sont précisément toutes ces petites différences cumulées qui font de vous un véritable expert WordPress. Quelqu’un capable d’identifier, de comprendre et d’intervenir avec précision là où beaucoup ne voient qu’un détail.

C’est exactement ce que j’enseigne dans ma formation « Gérer votre site WordPress », qui revient en profondeur sur des centaines de micro-optimisations concrètes, simples à mettre en œuvre mais à fort impact. Le but : faire de vous une personne autonome, capable de maintenir un site WordPress rapide, sécurisé et professionnel, sans plugin superflu.