1 extension de partage social sans script qui ne ralentit pas le site

Aujourd’hui, j’ai envie de vous présenter l’extension de partage social sans script Scriptless Social Sharing, une extension légère et respectueuse du RGPD. 😉

Pourquoi ?

Eh bien, tout simplement pour que vous puissiez optimiser la performance de votre site.

Vous avez déjà installé un plugin pour afficher des boutons de partage social ? Qu’à cela ne tienne, testez la performance de votre site et vérifiez si elle ne nuit pas à la vitesse de chargement de vos pages.

Si c’est le cas, c’est qu’il s’agit certainement d’une de ces extensions offrant toutes sortes de fonctionnalités et de gadgets inutiles (multiples styles, compteurs…).

En bref, le style d’extension qui :

• Comporte des scripts
• Envoie des requêtes externes pour les compteurs de partage
• Charge son code sur toutes vos pages, même sur celles où elle n’est pas utilisée.

Ne prenez pas le risque d’être mal classé par Google à cause de boutons de partage sociaux qui nuisent à la performance de votre site !

Découvrez Scriptless Social Sharing, un plugin de partage social sans script qui ne ralentira pas votre site.

Scriptless Social Sharing l’extension de partage social sans script

Scriptless Social Sharing est une extension WordPress gratuite développée par Robin Cornett. Elle totalise une note de 5 étoiles sur WordPress.org.

Comme son nom l’indique, cette extension ne charge aucun JavaScript, juste un peu de CSS. De plus, son gros avantage est qu’elle ne fait aucune requête externe vers les réseaux sociaux.

Contrairement aux autres extensions de partage social proposant des gadgets, ici, la développeuse a préféré miser sur la simplicité et les performances. Vous ne trouverez donc pas d’animations, ni de compteurs.

En bref, Scriptless Social Sharing n’ajoute rien d’autre que des boutons avec des liens de partage.

Alors, faisons un petit tour d’horizon de ce qu’elle offre.

Premièrement, outre le partage par email, WhatsApp, Pocket, Telegram ou SMS, Scriptless Social Sharing permet des partages vers les réseaux sociaux suivants :

• X (ex Twitter)
• Facebook
• Pinterest
• LinkedIn
• Reddit
• Hatena

Deuxièmement, elle permet d’utiliser par défaut des icônes SVG à la place des Font Awesome. Ça, c’est top pour les performances de votre site, car les icônes SVG se chargent beaucoup plus rapidement.

Troisièmement, les boutons de partage sont conformes aux règles d’accessibilité. En effet, même si vous choisissez les styles de bouton “Icônes uniquement”, les noms font toujours partie des boutons, ils sont juste masqués de manière accessible.

Quatrièmement, les développeurs n’auront pas de mal à personnaliser l’extension via des filtres.

Cinquièmement, elle est respectueuse de la vie privée et donc conforme au RGPD puisqu’elle ne fait aucune requête externe.

Enfin, le plus important, elle est très légère et ne ralentit pas le site. Voici la preuve par l’image de la performance d’une page sans et avec Scriptless Social Sharing. 🎯

Installation de Scriptless Social Sharing

L’installation de cette extension de partage social sans script est extrêmement simple.

Comme pour toutes les autres extensions, allez dans Extensions/Ajouter. Puis, tapez le mot-clé Scriptless Social Sharing, installez et activez l’extension.

Ensuite, accédez à la page des paramètres de l’extension sous Réglages/Scriptless Social Sharing.

C’est à cet endroit que vous pouvez ajuster les types de contenu devant disposer de boutons de partage, les boutons à ajouter et les styles de l’extension.

Il est à noter que, comme pour la plupart des extensions WordPress, les paramètres sont en anglais. Mais, rassurez-vous, il n’y en a pas beaucoup et je vais tout vous expliquer.

Paramétrage de l’extension de partage social sans script

Dès l’activation, certains paramètres sont déjà remplis. À vous de les modifier à votre convenance.

Paramètres des icônes (Icon Settings)

Pour le style des icônes (Button Icons/Style), vous avez le choix entre les icônes SVG, les polices Web Font Awesome ou bien la possibilité d’ajouter des icônes personnalisées. Je vous conseille d’opter pour les icônes SVG afin d’augmenter les performances de votre site.

Ensuite, pour l’apparence des boutons de partage (Button Output), vous pouvez opter pour l’affichage de l’icône seule, de l’icône avec le texte masqué pour les mobiles, de l’icône avec le texte toujours visible ou bien du texte uniquement.

Voici à quoi ressemblent les boutons de partage sociaux suivant l’option choisie en mode pleine largeur et avec les styles de l’extension :

Réglage du style (Style Settings)

Style de l’extension (Plugin Styles) : choisissez les styles que vous souhaitez activer ou désactiver.

• Charger la feuille de style principale (Load the main stylesheet) : cochez cette case si vous souhaitez conserver les couleurs originelles des réseaux sociaux et la mise en page telle que définie par l’extension. Si vous décochez la case, les boutons reprendront le style des boutons défini dans votre thème.
• Charger les icônes Font Awesome (Load Font Awesome) : ne cochez pas la case si vous utilisez les icônes SVG. 😉

Style du conteneur pour les boutons (Button Container CSS) : vous avez le choix entre flexbox et table pour styliser les éléments.

Largeur du conteneur des boutons (Button Container Width) : si vous choisissez pleine largeur (Full Width), les boutons rempliront la largeur de la page Web. Par contre, si vous optez pour auto, l’alignement des boutons se fera à gauche.

Rembourrage des boutons (Button Padding) : par défaut, le rembourrage est de 12 pixels, à vous de voir si vous souhaitez le réduire ou l’augmenter.

Paramètres des boutons (Button Settings)

Titre (Heading) : ce paramètre sert à ajouter un titre au-dessus des boutons de partage sociaux. Si vous n’en voulez pas, laissez l’information vide. Sinon pensez à modifier le texte pré-renseigné “Share this post:” par ce que vous voulez.

Boutons (Boutons) : cochez les réseaux sociaux pour lesquels vous souhaitez ajouter un bouton de partage et éventuellement le partage par WhatsApp, Pocket, Telegram, email ou par SMS.

Ordre des boutons (Button Order) : organisez l’ordre des boutons par glisser/déposer ou en utilisant les numéros indiqués.

Paramètres d’emplacement des boutons (Button Location Settings)

Types de contenu (Content types) : ici, choisissez les types de contenu devant disposer de boutons de partage : articles ou pages.

​💡 Il est à noter que si vous avez des extensions spécifiques telles qu’Elementor ou autres, alors d’autres choix s’ajouteront.

Puis, pour chaque type de contenu, indiquez leur emplacement automatique : avant et/ou après le contenu ou bien, optez pour un placement manuel (Before Content/After Content, Manual Placement).

Si vous ne souhaitez pas afficher les boutons automatiquement, alors laissez toutes les options décochées.

Si vous optez pour le placement manuel (Manuel Placement), vous pourrez intégrer les boutons de partage n’importe où dans votre page via un code court (shortcode) :

[scriptless]

Il est à noter que ce code court est personnalisable, par exemple pour supprimer le titre, utilisez le code court suivant :

[scriptless heading=""]

Ce code permet aussi d’indiquer un titre personnalisé en ajoutant le texte voulu entre “”.

Voici un autre exemple de code court qui vous permettra de n’afficher que certains boutons, ici email et Facebook (pensez à les séparer par des virgules et ne mettez aucun espace) :

[scriptless buttons="email,facebook"]

💡​Vous pouvez aussi intégrer les boutons de partage social via un bloc Gutenberg.

Paramètres des réseaux sociaux et général (Social Network/General Settings)

Ici, ajustez quelques paramètres complémentaires comme :

• Le nom d’utilisateur X (ex Twitter) (Twitter Handle) sans inclure le @
• Le titre pour le partage par email (Email Subject)
• Le texte qui accompagnera le lien vers la publication dans le corps de l’email (Email Content)

Enfin, sous General Settings, vous pouvez désactiver le bloc Gutenberg de Scriptless Social Sharing si vous ne l’utilisez pas (Disable Block).

Affichage des images lors du partage d’une publication

Partager un lien, c’est bien, mais partager un lien avec une image explicite, c’est mieux ! 😉

Il est à noter que Scriptess Social Sharing n’ajoute pas de balise meta Open Graph. Elle suppose que vous utilisez une extension SEO qui les gère comme Yoast SEO.

Pour Facebook et LinkedIn par exemple, les images proviennent donc de la balise meta Open Graph existante dans votre code source.

Pour Pinterest qui fonctionne différemment pour le partage, il faut absolument une image et pas seulement un lien.

Alors, afin de faire apparaître le bouton, l’extension inspecte trois emplacements pour trouver une image :

• L’image Pinterest personnalisée
• L’image en avant de la publication
• La première image de la publication

Si l’extension ne trouve rien, plutôt que de mettre en place un bouton qui ne fonctionnera pas, aucun bouton de partage Pinterest ne sera généré pour la publication.

Je vous conseille donc de renseigner l’image Pinterest personnalisée dans l’encart dédié de l’extension si le bouton n’apparait pas.

Cette image pourra également être utile si vous souhaitez utiliser une image spécifique pour le partage Pinterest à la place de l’image en avant.

Pour ajouter cette image Pinterest personnalisée, rendez-vous dans la barre latérale de l’éditeur de publication, tout en bas. Là, vous trouverez un encart intitulé Scriptless Social Sharing. Cliquez alors sur le bouton “Select Pinterest Image” et choisissez l’image voulue.

Vous pouvez également au même endroit renseigner une description personnalisée pour Pinterest (custom Pinterest Description).

Désactivation des boutons de partage social sans script dans Gutenberg

Via l’éditeur de publication, il est possible de désactiver les boutons de partage pour une publication ou une page spécifique.

Il suffit de cocher “Don’t show sharing buttons for this post” qui se trouve juste en dessous de la description personnalisée pour Pinterest et le tour est joué.

D’autre part, si vous ne comptez pas vous servir des options de Scriptless Social Sharing dans Gutenberg, sachez que vous pouvez complètement les masquer. Il suffit pour cela de déselectionner “Scriptless Social Sharing” dans préférences / panneaux / additionnel de l’éditeur de publication (anciennement options de l’écran).

Bonus pour l’accessibilité de Scriptless Social Sharing

Bon, Scriptless Social Sharing a un petit défaut que j’ai pu relever : le titre au dessus des boutons est par défaut en h3.

Du coup, lorsque les boutons sont mis avant l’article, il peut provoquer une erreur d’accessibilité.

Si cela vous arrive, vous pouvez remédier au problème en changeant le titre h3 en paragraphe. Pour ce faire, incluez ce code dans le fichier functions.php de votre thème enfant :

add_filter( 'scriptlesssocialsharing_heading_element', 'rgc_change_scriptless_heading' );
/**
 * Change the heading element to a <p> tag instead of <h3>
 *
 * @return string
 */
function rgc_change_scriptless_heading() {
	return 'p';
}

💡 Vous pouvez éventuellement utiliser div ou span à la place de p. 😉​

Bonus pour styliser les boutons de Scriptless Social Sharing

Vous souhaitez personnaliser le design des boutons de Scriptless Social Sharing ?

C’est simple, il suffit d’une pincée de CSS.

Voici un exemple de personnalisation :

Pour arriver à cela, dans les paramètres de l’extension, choisissez “Icon Only” et laissez “Load the main stylesheet?” coché. Ensuite, dans Style Settings/header, renseignez le titre que vous voulez voir apparaître. Pour ma part, j’ai indiqué: “Partagez 😉”.

Après, ajoutez le code CSS ci-dessous en passant par Personnaliser/CSS additionnel :

/* couleur des boutons et des icônes et espace entre */
.scriptlesssocialsharing__buttons a.button {
    background-color: #cf2e87 !important; */
    color: #ffffff;
    border-radius: 100px;
    margin-right: 1px;
    margin-left: 1px;
}
/* boutons centrés */
.scriptlesssocialsharing__buttons {
    justify-content: center;
}
/* couleur des boutons et des icônes au survol */
.scriptlesssocialsharing__buttons a.button:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}
/* texte centré */
.scriptlesssocialsharing {
    text-align: center;
}

Ce n’est qu’un exemple de code, à vous de l’ajuster selon l’effet que vous désirez. 😉

L’avantage d’une extension de partage social sans script

L’optimisation performance des sites créés avec WordPress est une de mes prestations. Alors, évidemment, j’essaie d’éradiquer tout ce qui prend du temps à charger.

Et franchement, les extensions de partage social sont de véritables plaies. Pourtant, je peux vous assurer que j’en ai testé une multitude.

Bref, si votre préoccupation première est la vitesse de votre site, alors changez votre extension et n’affichez plus les compteurs de partage.

Faites comme moi, utilisez Script Social Sharing, l’extension de partage social sans script.

Installez-la, faites un test de performance et dites-moi ce que vous en pensez. 😉