Comment installer ShareThis' Tools sur Webflow

Remarque: si vous disposez d'un plan Webflow gratuit, les outils ShareThis ne fonctionneront malheureusement pas sur votre site Web, car la fonction de code personnalisé est verrouillée. 

In order for ShareThis tools to work on your Webflow website, follow the steps below to add your unique ShareThis code to the <head> section of your website: 

Ajout des outils ShareThis dans toutes les pages

  1. Connectez-vous ou  S'inscrire sur la plateforme ShareThis .
  2. Sélectionnez l'outil ShareThis que vous souhaitez utiliser et activez-le en cliquant sur le bouton Activer l'outil.
  3. Ensuite, personnalisez les boutons en sélectionnant votre réseaux sociaux, la taille, la forme, ainsi que des extras tels que le nombre minimum d'actions que vous souhaitez avoir avant de montrer les comptes.
  4. Sélectionnez le bouton Activer le code dans le coin supérieur droit. Dans la fenêtre pop-up, cliquez sur le bouton Copier le code.
  5. Connectez-vous au site Web de Webflow.
  6. Dans votre tableau de bord des projets, sélectionnez l'icône à trois points du projet sur lequel vous voulez placer vos boutons, puis cliquez sur Paramètres.
  7. Dans la section Paramètres du projet, allez à la section Code personnalisé.
  8. Collez le code unique de ShareThis que vous avez copié à l'étape 4 et cliquez sur Publier.

Ajout des outils ShareThis dans des pages spécifiques

  1. Connectez-vous ou  S'inscrire sur la plateforme ShareThis .
  2. Sélectionnez l'outil ShareThis que vous souhaitez utiliser et activez-le en cliquant sur le bouton Activer l'outil.
  3. Ensuite, personnalisez les boutons en sélectionnant votre réseaux sociaux, la taille, la forme, ainsi que des extras tels que le nombre minimum d'actions que vous souhaitez avoir avant de montrer les comptes.
  4. Sélectionnez le bouton Activer le code dans le coin supérieur droit. Dans la fenêtre pop-up, cliquez sur le bouton Copier le code.
  5. Connectez-vous à votre site Webflow.
  6. Ouvrez votre site Web en mode conception, sélectionnez Pages dans la barre latérale gauche, puis sélectionnez Modifier les paramètres de la page sur laquelle vous souhaitez placer vos boutons.
  7. Dans la section Paramètres de la page, faites défiler la page jusqu'à la section Code personnalisé.
  8. Collez le code unique ShareThis que vous avez copié à l'étape 4 et cliquez sur Publier.

Ajout d'outils en ligne ShareThis

Les outils en ligne nécessitent un bout de code supplémentaire pour fonctionner sur votre site. Si vous souhaitez installer nos outils Boutons de partage en ligne, Follow Buttons, Reaction Buttons ou Social Feed sur votre site Web, vous devrez ajouter un code de placement là où vous souhaitez que l'outil apparaisse.

  1. Dans votre plate-forme ShareThis , sélectionnez l'outil ShareThis que vous souhaitez utiliser et copiez le code de placement. Selon l'outil que vous installez, le code devrait ressembler à ceci :
  2. Dans le mode de conception de votre site Webflow, allez sur la page où vous voulez que vos boutons apparaissent.
  3. Dans la barre latérale gauche, sélectionnez Ajouter et recherchez l'option Intégrer, puis faites-la glisser à l'endroit où vous souhaitez que les boutons apparaissent.
  4. Dans la nouvelle fenêtre HTML Embed Code Editor, collez le code unique ShareThis que vous avez copié à l'étape 1.
  5. Cliquez sur Enregistrer et fermer.
  6. Cliquez sur Publier.

Notes:

  • Il se peut que les outils ShareThis n'apparaissent pas sur le backend de votre site web. Vous devrez donc vous rendre sur votre site web publié pour les visualiser.
  • Webflow a tendance à intégrer les boutons dans des conteneurs Flex, ce qui pourrait limiter l'affichage de certains contenus, notamment le dernier bouton.
    Une façon de résoudre ce problème sans modifier l'affichage du conteneur parent de flex à inline-block est de définir une valeur fixe pour la largeur des boutons.

    Pour ce faire, cliquez sur les boutons eux-mêmes et dans l'éditeur de flux Web, définissez leur largeur à une valeur plus grande que celle qu'elle est actuellement (si cela ne se produit que sur les écrans mobiles, vous appliquez le même principe, mais changez le alignement de l'écran en haut de l'éditeur de flux Web pour écrans mobiles/tablettes) :
Le champ de la largeur des boutons est fixé à 180 sur le Webflow Editor, les autres valeurs ne sont pas modifiées.