Comment installer ShareThis' Tools sur ReactJS

Pour que les outils ShareThis fonctionnent sur vos applications/sites ReactJs, veuillez suivre les étapes ci-dessous pour installer nos boutons de partage, boutons de suivi et/ou boutons de réaction. Remarque importante, vous pouvez en savoir plus sur les outils de ShareThis Website, Ici.

Note : Le module ReactJS pour les boutons ShareThis est disponible dans notre Dépôt Git ou NPMjs. Vous pouvez installer la bibliothèque dans votre application ReactJS, en utilisant cette commande :

npm install --save sharethis-reactjs

  1. Si vous n'avez pas encore de projet en cours, vous pouvez créer une nouvelle application react ici : https://reactjs.org/docs/create-a-new-react-app.html
  2. Exécutez le code suivant dans le terminal :
npx create-react-app 
cd 
npm start
  1. En haut de votre fichier de composant, ajoutez l'outil ShareThis que vous souhaitez utiliser dans votre projet. Nous soutenons ce qui suit :
    • Boutons InlineReactionButtons
    • Boutons InlineShareButtons
    • Boutons StickyShareButtons
    • Boutons InlineFollowButtons

  2. Ajoutez le composant à l'endroit où vous voulez que l'outil ShareThis apparaisse.
    import {InlineReactionButtons} from 'sharethis-reactjs';
    import {InlineShareButtons} from 'sharethis-reactjs';
    import {StickyShareButtons} from 'sharethis-reactjs';
    import {InlineFollowButtons} from 'sharethis-reactjs';

  3. Chaque outil possède un ensemble d'attributs de configuration qui peuvent être utilisés pour personnaliser vos boutons. Voir ci-dessous pour des exemples :

Note

Le nombre de partages est lié à l'URL. Si aucune URL n'est fournie dans les attributs de configuration, l'URL où se trouvent les boutons sera utilisée. N'oubliez pas de personnaliser ou de supprimer l'URL dans l'exemple ci-dessous.

Boutons de partage en ligne

Boutons de partage flottant

Boutons de suivi en ligne

Boutons de réaction en ligne

Une fois que vous avez terminé de personnaliser la configuration de votre bouton, ajoutez votre (vos) réseau(x) préféré(s). Vous trouverez ci-dessous les options de réseau parmi lesquelles vous pouvez choisir :

Réseaux de partage

Suivre les réseaux

Boutons de réaction