Ajouter des boutons de partage social à Webflow avec ShareThis et Tag Manager

Pour cet article, vous aurez besoin de Google Tag Manager installé sur votre site ou votre projet Webflow. Vous pouvez trouver le tutoriel pour Webflow ici, et si vous hésitez encore à vous lancer, voici pourquoi nous utilisons Google Tag Manager dans Webflow. Il vous faudra aussi un compte ShareThis que vous pouvez créer gratuitement ici. Nous allons le configurer pour les articles de blog de notre projet Webflow, mais cela fonctionne pour n'importe quelle page de votre site, ou pour les pages produits d'une boutique en ligne, et ce n'est pas réservé à Webflow : tant que Tag Manager est installé, vous êtes prêt. Nous publierons plus tard un article plus approfondi sur l'installation de boutons de partage à partir des champs dynamiques des collections CMS de Webflow et des extraits de partage social natifs, mais cette méthode est rapide et sans douleur, alors profitez-en.

Étape 1 : configurer ShareThis et Tag Manager

Commencez par ajouter le domaine que vous allez utiliser.

Cliquez sur Activate Code et copiez le snippet.

Rendez-vous dans votre conteneur Tag Manager et créez une nouvelle balise (Tag). Donnez-lui un nom, sélectionnez Custom HTML et collez le snippet.

Tag Manager

Pour le déclencheur (Trigger), sélectionnez All Pages. Nous allons utiliser le déclencheur Fully Loaded. Il lance la balise une fois que tout est chargé sur la page, ce qui offre une meilleure expérience utilisateur et améliore vos résultats PageSpeed pour Google. Vous trouverez ici un article expliquant comment le configurer si cette voie vous tente, mais All Pages convient très bien si cela ne vous préoccupe pas.

Maintenant, enregistrez la balise (Save), cliquez sur Submit puis publiez le conteneur (Publish).

Retournez dans ShareThis et cliquez sur Activate.

Si un avertissement indique que le code n'est pas dans le head, ignorez-le et continuez.

Allez dans l'Apps Directory.

Nous allons ajouter des boutons de partage Sticky Share, mais vous pouvez choisir ce que vous voulez.

Cliquez sur Enable tool, et s'il y a un avertissement, ignorez-le aussi.

Choisissez vos réseaux sociaux, l'alignement et tout ce que vous voulez personnaliser, puis cliquez sur update.

Laissez quelques minutes à ShareThis pour faire son travail et vous devriez voir apparaître vos boutons de partage :

Tout cela est bien joli, mais vous allez me dire : vous aviez parlé de mon blog, et maintenant les boutons sont partout sur mon site.

Étape 2 : choisir les pages où afficher les boutons de partage

Faisons en sorte qu'ils n'apparaissent que sur les pages d'articles de blog.

Ouvrez Tag Manager. Si vous n'avez pas opté pour le déclencheur Fully Loaded, suivez l'étape 2A ; si vous l'utilisez, suivez l'étape 2B.

Étape 2A : créer un déclencheur pour les articles de blog

Ouvrez la balise, retirez le déclencheur en cliquant sur le signe moins et créez-en un nouveau.

Donnez un nom au déclencheur et sélectionnez Page View comme type de déclencheur.

Avant de continuer, examinez la structure des URL de vos articles. Chez nous, les articles se trouvent dans la collection CMS Post et tous leurs slugs commencent par /post/, car c'est le « dossier » de la collection du blog.

<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity

Cela nous simplifie la vie : tous les articles contiennent /post/ et nous pouvons donc créer un déclencheur sur cette base. Vous utiliserez simplement la structure qui est la vôtre.

Dans le déclencheur, sélectionnez donc Some Page Views, puis Page URL dans la liste déroulante, puis Contains, puis la partie du slug de votre blog que vous utilisez, pour nous /post/

Assurez-vous que le nouveau déclencheur est bien sélectionné et que l'ancien est retiré. Enregistrez, cliquez sur Submit, publiez, et c'est terminé. Mais que se passe-t-il exactement ?

Eh bien, chaque fois que Tag Manager voit un événement de page vue, il ne cherche que Some Pages, c'est-à-dire des pages dont la Page URL Contains /post/ ou ce que vous avez utilisé. Si vous souhaitez le charger aussi sur d'autres pages, comme nous le faisons sur nos pages de portfolio, il suffit de créer d'autres déclencheurs pour ces pages et de les ajouter à la balise.

Vous aurez maintenant des boutons de partage alimentés par les balises OG de votre site.

Étape 2B : créer un déclencheur Fully Loaded sur certaines pages

Si vous avez choisi le déclencheur Fully Loaded, voici ce qu'il faut faire.

Regardez la structure des URL de vos articles. Chez nous, les articles se trouvent dans la collection CMS Post et tous leurs slugs commencent par /post/, car c'est notre dossier de blog.

<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity

Cela nous simplifie la vie : tous les articles contiennent /post/ et nous pouvons donc créer un déclencheur sur cette base. Vous utiliserez simplement la structure qui est la vôtre.

Cliquez sur le déclencheur Fully Loaded, puis faites-en une copie.

Nommez votre déclencheur, sélectionnez Some Custom Events, puis Page URL dans la liste déroulante, puis Contains, et renseignez la partie de l'URL que vous utilisez, /post/ pour nous.

Enregistrez le déclencheur, retirez l'ancien, ajoutez votre nouveau déclencheur Blog, puis Save, Submit et Publish.

Et voilà, c'est terminé. Mais que se passe-t-il exactement ? Chaque fois que votre nouveau déclencheur Fully Loaded pour le blog se lance, Tag Manager guette l'événement personnalisé, mais uniquement sur les pages dont l'URL Contains /post/ dans notre cas. Et en bonus, il attend que tout le reste soit chargé avant de s'exécuter ! Si vous souhaitez le charger aussi sur d'autres pages, comme nous le faisons sur nos pages de portfolio, il suffit de créer d'autres déclencheurs pour ces pages et de les ajouter à la balise.

Vous aurez maintenant des boutons de partage alimentés par les balises OG de votre site.

Si vous préférez charger vos balises via Cloudflare Zaraz plutôt que Tag Manager, nous en avons parlé dans notre guide Zaraz, et l'installation de Microsoft Clarity via Tag Manager suit le même schéma Custom HTML.

Questions fréquentes

Comment ajouter des boutons de partage social à Webflow ?

Ajoutez votre domaine à un compte ShareThis gratuit, copiez le snippet de suivi dans une balise Custom HTML de Google Tag Manager, déclenchez-la sur All Pages (ou avec un déclencheur Fully Loaded), puis activez un outil de boutons de partage, comme Sticky Share Buttons, dans ShareThis. Patientez quelques minutes et les boutons apparaissent sur votre site.

Faut-il du code personnalisé dans Webflow pour ajouter un bouton de partage Facebook ?

Pas pour ShareThis lui-même. Une fois Google Tag Manager installé sur votre site (cette installation unique est le seul code qui va dans Webflow), le snippet ShareThis se trouve dans Tag Manager, il n'y a donc rien de plus à coller dans les réglages de code personnalisé de Webflow. Les boutons utilisent les balises OG de votre page pour le titre, la description et l'image lorsque quelqu'un partage.

Comment afficher les boutons de partage uniquement sur les articles de blog ?

Créez un déclencheur qui ne se lance que lorsque la Page URL contient votre dossier de blog, soit /post/ chez nous, et associez-le à la balise ShareThis. L'étape 2 ci-dessus détaille les deux versions, Page View et Fully Loaded.

ShareThis va-t-il ralentir mon site ?

Tout script supplémentaire a un coût, mais lancer la balise avec un déclencheur Fully Loaded signifie qu'elle ne s'exécute qu'après le chargement de tout le reste de la page, ce qui la tient à l'écart de vos résultats PageSpeed.

Des questions ? Écrivez-nous dans les commentaires et découvrez d'autres tutoriels ici.