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. Log in or sign up to the ShareThis Plate-forme.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to Webflow’s website. On your Projects Dashboard, select the three dots icon from the project you want your buttons on, and click Settings.
  5. Dans la section Paramètres du projet, allez à la section Code personnalisé.
  6. Paste the unique ShareThis code that you copied from step 3 and click Publish.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

Ajout des outils ShareThis dans des pages spécifiques

  1. Log in or sign up to the ShareThis Plate-forme.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to your Webflow website. Open your website in design mode, select Pages from the left sidebar, then select Edit Page Settings from the specific page you want your buttons to be on.
  5. Dans la section Paramètres de la page, faites défiler la page jusqu'à la section Code personnalisé.
  6. Collez le code unique ShareThis que vous avez copié à l'étape 4 et cliquez sur Publier.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

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.