
"TR : "Eh bien, à mon humble avis..."
En termes d'optimisation, le meilleur plugin est celui qui n'est pas utilisé.
Cela ne veut pas dire qu'il n'existe pas de bons plugins, légers et fonctionnels, qui peuvent être utilisés pour ajouter ces boutons de partage de médias sociaux à WordPress. Parfois, il n'y a pas d'alternative. Cependant, si vous recherchez quelque chose de simple et de vraiment léger, sans fioritures, compteurs, scripts ou requêtes externes d'aucune sorte, la meilleure option est d'utiliser un peu de code et de CSS.
Après avoir effectué un test A/B sur plusieurs des articles les plus visités pendant trois mois, j'ai remarqué que les rectangulaires sont plus utilisés que les primitives rondes.


Le code original était basé sur celui de WPLogout, pour le template GeneratePress, et il peut encore être débogué et amélioré car il s'agit d'un correctif de cette version (qui montrait les boutons ronds), mais il fonctionne pour n'importe quel template.
Comme vous pouvez le constater, une classe CSS est créée pour chaque bouton, de sorte qu'il est très facile d'ajouter ou de supprimer des boutons, d'en modifier la taille et la couleur, de les réorganiser, etc.
Le plus compliqué est parfois de trouver la structure de l'URL de partage de certains réseaux, bien qu'il y ait des astuces pour cela aussi, et de s'approprier le HTML des icônes SVG s'il n'existe pas.
Je laisse ici le code de mes boutons. Ils sont rectangulaires et s'adaptent à la largeur de n'importe quel écran.
Pour les ajouter, il suffit de placer le code à l'endroit où vous souhaitez les afficher :
/* CODE SHARE BUTTONS WITHOUT PLUGIN ADDED WITH GENERATEPRESS ELEMENT */
<?php
$botonesURL = urlencode(get_the_permalink());
$botonesTitle = urlencode(get_the_title());
$botonesImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="botones-compartir-wrapper">
<a class="botones-compartir-sharing botones-compartir-email" href="mailto:?subject=<?php echo wp_title(''); ?>&body=<?php echo $botonesURL; ?>" target="_blank" rel="nofollow" aria-label="Mail" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Enviar por e-mail</title> <!-- Title within SVG -->
<path d="M12 12.713l-11.985-9.713h23.971l-11.986 9.713zm-5.425-1.822l-6.575-5.329v12.501l6.575-7.172zm10.85 0l6.575 7.172v-12.501l-6.575 5.329zm-1.557 1.261l-3.868 3.135-3.868-3.135-8.11 8.848h23.956l-8.11-8.848z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $botonesURL; ?>&media=<?php echo $botonesImage; ?>&description=<?php echo $wplogoutTitle; ?>" target="_blank" rel="nofollow" aria-label="Pinterest" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Send to Pinterest</title> <!-- Title within SVG -->
<path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-telegram" href="https://t.me/share/url?url=<?php echo $botonesURL;?>&text=<?php echo $botonesTitle;?>" target="_blank" rel="nofollow"><svg width="17px" height="17px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421; " aria-label="Telegram" focusable="false">
<title>Send to Telegram</title> <!-- Title within SVG -->
<path id="telegram-1" d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $botonesTitle; echo " "; echo $botonesURL;?>" target="_blank" rel="nofollow" aria-label="Whatsapp" focusable="false"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Share in Whatsapp</title> <!-- Title within SVG -->
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.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.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-reddit" href="https://reddit.com/submit?url=<?php echo $botonesURL;?>&title=<?php echo $botonesTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" aria-label="Reddit" focusable="false">
<title>Send to Reddit</title> <!-- Title within SVG -->
<path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-meneame" href="https://meneame.net/submit?url=<?php echo $botonesURL;?>&title=<?php echo $botonesTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0.162 0.907 15.873 14.384" xml:space="preserve" width="18" height="18" aria-label="Send to Menéame" focusable="false">
<title>Share in Menéame</title> <!-- Title within SVG -->
<path d="M8.228 7.64a3.096 3.096 0 0 1 -1.029 0.401 3.924 3.924 0 0 1 -1.563 0.01c-0.449 -0.086 -0.818 -0.329 -1.114 -0.666 -0.59 -0.669 -1.014 -1.427 -1.14 -2.325 -0.172 -1.229 0.259 -2.226 1.202 -3.009 0.677 -0.561 1.481 -0.833 2.335 -0.985 1.34 -0.239 2.606 0.023 3.833 0.554 0.63 0.272 1.238 0.595 1.887 0.82 0.144 0.05 0.288 0.094 0.439 0.117a0.723 0.723 0 0 0 0.676 -0.256c0.235 -0.266 0.318 -0.583 0.316 -0.93 0.067 -0.004 0.079 0.047 0.101 0.086 0.199 0.368 0.142 0.966 -0.128 1.276 -0.284 0.326 -0.661 0.384 -1.063 0.337a4.134 4.134 0 0 1 -1.306 -0.384c-0.781 -0.373 -1.575 -0.716 -2.424 -0.909a5.782 5.782 0 0 0 -3.149 0.144C4.599 2.421 3.809 3.913 4.218 5.446c0.237 0.885 0.733 1.581 1.51 2.072 0.336 0.214 0.707 0.28 1.097 0.275 0.395 -0.006 0.781 -0.083 1.166 -0.156 0.068 -0.012 0.132 -0.028 0.236 0.003z"/><path d="M9.809 15.176c-0.071 -0.024 -0.207 0.057 -0.229 -0.044 -0.021 -0.099 0.12 -0.131 0.201 -0.166 0.499 -0.207 1.001 -0.405 1.499 -0.612 0.311 -0.13 0.612 -0.274 0.891 -0.465 0.095 -0.065 0.183 -0.14 0.261 -0.227a0.408 0.408 0 0 0 0.081 -0.464c-0.379 -0.95 -0.802 -1.881 -1.134 -2.849 -0.267 -0.781 -0.48 -1.571 -0.536 -2.402 -0.067 -0.98 0.272 -1.742 1.118 -2.264 0.399 -0.248 0.826 -0.433 1.254 -0.617 0.53 -0.229 1.053 -0.464 1.518 -0.818 0.695 -0.53 0.923 -1.241 0.863 -2.08a7.078 7.078 0 0 0 -0.176 -1.116c-0.01 -0.042 -0.067 -0.104 0.008 -0.136 0.068 -0.029 0.104 0.023 0.133 0.077 0.227 0.411 0.403 0.838 0.458 1.31 0.107 0.909 -0.292 1.602 -0.92 2.203 -0.401 0.383 -0.895 0.62 -1.381 0.867 -0.439 0.223 -0.893 0.421 -1.306 0.692 -0.45 0.295 -0.824 0.654 -0.95 1.203 -0.101 0.447 -0.02 0.889 0.071 1.327 0.198 0.962 0.588 1.859 0.972 2.754 0.199 0.462 0.411 0.92 0.569 1.398 0.255 0.771 0.042 1.365 -0.644 1.798 -0.494 0.311 -1.047 0.447 -1.614 0.538 -0.329 0.055 -0.663 0.073 -1.007 0.094zM3.167 5.929c-0.013 0.081 -0.059 0.141 -0.101 0.203 -0.733 1.048 -1.362 2.151 -1.837 3.342 -0.33 0.83 -0.41 1.677 -0.191 2.543 0.271 1.073 0.984 1.733 1.989 2.122 0.729 0.282 1.49 0.418 2.262 0.508 1.073 0.126 2.148 0.212 3.224 0.316 0.104 0.01 0.206 0.039 0.306 0.067 0.049 0.013 0.112 0.032 0.105 0.099 -0.008 0.077 -0.079 0.053 -0.126 0.057 -0.695 0.057 -1.391 0.087 -2.09 0.099 -0.982 0.014 -1.967 0.021 -2.936 -0.141 -1.573 -0.266 -2.793 -1.048 -3.384 -2.594 -0.318 -0.831 -0.279 -1.696 -0.023 -2.538 0.384 -1.264 0.964 -2.424 1.907 -3.373 0.245 -0.247 0.52 -0.457 0.789 -0.674 0.027 -0.019 0.051 -0.053 0.104 -0.035z"/><path d="M5.852 11.68c1.113 -0.183 2.223 -0.282 3.342 -0.149 0.533 0.065 0.634 0.174 0.646 0.711a8.118 8.118 0 0 1 -0.34 2.501 1.264 1.264 0 0 1 -0.175 0.385c-0.034 0.045 -0.069 0.104 -0.14 0.079 -0.06 -0.021 -0.052 -0.085 -0.055 -0.136 -0.016 -0.363 0.044 -0.723 0.077 -1.082 0.049 -0.517 0.134 -1.03 0.087 -1.552 -0.014 -0.166 -0.091 -0.266 -0.239 -0.337 -0.434 -0.207 -0.899 -0.275 -1.369 -0.322 -0.575 -0.057 -1.154 -0.05 -1.729 -0.085 -0.035 -0.002 -0.069 -0.01 -0.106 -0.014z"/></svg></a>
<a class="botones-compartir-sharing botones-compartir-mastodon" href="https://mastodon.social/share?text=<?php echo $botonesTitle; echo " "; echo $botonesURL;?>" target="_blank" rel="nofollow" aria-label="Mastodon" focusable="false"><title>Compártelo en Mastodon</title><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" class="bi bi-mastodon" viewBox="0 0 16 16">
<title>Share in Mastodon</title> <!-- Title within SVG -->
<path d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a4 4 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522q0-1.288.66-2.046c.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764q.662.757.661 2.046z"/>
</svg></a>
<a class="botones-compartir-sharing botones-compartir-bluesky"
href="https://bsky.app/intent/compose?text=<?php echo $botonesTitle; echo " "; echo $botonesURL;?>"
target="_blank"
rel="nofollow"
aria-label="Bluesky"
focusable="false">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
<title>Share in Bluesky</title> <!-- Title within SVG -->
<path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565C.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479c.815 2.736 3.713 3.66 6.383 3.364q.204-.03.415-.056q-.207.033-.415.056c-3.912.58-7.387 2.005-2.83 7.078c5.013 5.19 6.87-1.113 7.823-4.308c.953 3.195 2.05 9.271 7.733 4.308c4.267-4.308 1.172-6.498-2.74-7.078a9 9 0 0 1-.415-.056q.21.026.415.056c2.67.297 5.568-.628 6.383-3.364c.246-.828.624-5.79.624-6.478c0-.69-.139-1.861-.902-2.206c-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8"/>
</svg>
</a>
</div>
Ensuite, vous ajoutez le CSS dans le style.css de votre modèle(ou thème enfant) et c'est tout.
/* CSS SHARE BUTTONS WITHOUT PLUGIN */
.botones-compartir-wrapper {
margin: 10px 0;
font-size: 0;
display: flex;
flex-wrap: nowrap; /* Evita que los botones se envuelvan a la siguiente línea */
justify-content: flex-start; /* Alinea los botones a la izquierda */
align-items: center; /* Centra verticalmente los botones */
width: 100%; /* Ocupa todo el ancho disponible */
overflow-x: auto; /* Permite desplazamiento horizontal en pantallas pequeñas */
}
.botones-compartir-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
display: inline-block;
vertical-align: middle;
margin: 3px 0;
white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}
.botones-compartir-sharing {
font-size: 17px;
margin: 0;
padding: 8px 12px;
display: inline-block;
border-radius: 0 !important;
border: none;
line-height: 1;
transition: all 0.3s ease;
flex: 1; /* Causes the buttons to expand to fill the available space. */
min-width: fit-content; /* Ensure that the button is not smaller than its content. */
text-align: center; /* Centres the content of the button */
}
@media only screen and (max-width: 600px) {
.botones-compartir-sharing {
font-size: 14px;
padding: 6px 10px;
}
}
.botones-compartir-sharing svg {
position: relative;
top: 0.10em;
display: inline-block;
width: 1em;
height: 1em;
fill: #fff; /* White colour for icons (as in the first code) */
}
/* Removing rounded edges and previous colour styles */
.botones-compartir-sharing:first-of-type,
.botones-compartir-sharing:last-of-type {
border-radius: 0 !important;
}
/* Original background colours */
.botones-compartir-facebook { background-color: rgba(59, 89, 152, 1); }
.botones-compartir-email { background-color: rgba(19,20,24 ,1); }
.botones-compartir-twitter { background-color: rgba(0, 0, 0, 1); }
.botones-compartir-pinterest { background-color: rgba(189, 8, 28, 1); }
.botones-compartir-whatsapp { background-color: rgba(37, 211, 102, 1); }
.botones-compartir-telegram { background-color: rgba(0,136,204 ,1); }
.botones-compartir-reddit { background-color: rgba(255, 87, 0, 1); }
.botones-compartir-meneame { background-color: rgba(227, 86, 20 ,1); }
.botones-compartir-mastodon { background-color: rgba(6, 21, 255 ,1); }
.botones-compartir-bluesky { background-color: rgba(0, 133, 255 ,1); }
/* Original hover states */
.botones-compartir-facebook:hover { background-color: rgba(59, 89, 152, .8); }
.botones-compartir-email:hover { background-color: rgba(19,20,24 ,.8); }
.botones-compartir-twitter:hover { background-color: rgba(0, 0, 0, .7); }
.botones-compartir-pinterest:hover { background-color: rgba(189, 8, 28, .8); }
.botones-compartir-whatsapp:hover { background-color: rgba(37, 211, 102, .8); }
.botones-compartir-telegram:hover { background-color: rgba(0,136,204 ,.8); }
.botones-compartir-reddit:hover { background-color: rgba(255, 87, 0, .8); }
.botones-compartir-meneame:hover { background-color: rgba(227, 86, 20, .8); }
.botones-compartir-mastodon:hover { background-color: rgba(6, 25, 255, .8); }
.botones-compartir-bluesky:hover { background-color: rgba(0, 133, 255, .8); }
/* Delete !important from fills */
.botones-compartir-meneame,
.botones-compartir-mastodon,
.botones-compartir-bluesky {
fill: #fff !important; /* Ensure that the icons are white */
}
Si vous êtes de ceux qui préfèrent utiliser un plugin et ne pas se compliquer la vie ou si vous avez besoin de beaucoup plus de fonctionnalités, le plus complet parmi les plugins payants est"Easy Social Share Buttons for WordPress". Il coûte moins de 15 dollars. Il s'agit d'un paiement unique, sans abonnement annuel et avec des mises à jour permanentes. Vous pouvez activer uniquement les fonctions dont vous avez besoin et vous pouvez ajouter de nouveaux réseaux manuellement.
L'autre option, beaucoup plus limitée et plus simple, car elle ne permet pas d' ajouter de nouveaux réseaux, est Novashare, des créateurs de Perfmatters. Il coûte 19,95 $ par an et est le plugin le plus léger (moins de 4 KB sur le front-end).
*Aucun de ces liens n'est affilié ou sponsorisé. Ces deux plugins ont été testés et/ou utilisés à l'époque.
Pendant un certain temps, j'ai testé un logiciel gratuit très léger : Scriptless Social Sharing, mais il n'a pas été mis à jour depuis plus d'un an et son utilisation est déconseillée.