Comment ajouter des boutons de partage social à votre application React

Les médias sociaux font désormais partie intégrante de notre vie quotidienne et constituent une excellente plateforme pour les entreprises pour atteindre leurs clients. L’ajout de boutons de partage social à votre application React peut vous aider à augmenter votre portée et votre visibilité sur les plateformes de médias sociaux. Dans cet article, vous apprendrez comment vous pouvez facilement ajouter des boutons de partage social dans votre application React.

Ajouter des boutons de partage social à votre application React

Avant de commencer, vous devez avoir une compréhension de base de React et savoir comment configurer une application React. Vous devez également avoir un compte sur la ou les plateformes de médias sociaux pour lesquelles vous souhaitez ajouter des boutons de partage.

Installation du module de réaction-partage

Plusieurs options sont disponibles pour ajouter des boutons de partage social à votre application React. Une option consiste à utiliser le module react-share , qui est une bibliothèque légère et facile à utiliser pour ajouter des boutons de partage social à votre application. Pour installer le module react-share , vous devez exécuter la commande suivante :

npm install react-share

Création d’un bouton Partager sur Facebook

Une fois que vous avez installé le module react-share , vous pouvez commencer à ajouter des boutons de partage social à votre application. Pour ce faire, vous devrez importer les composants requis à partir du module react-share . Par exemple, pour ajouter un bouton de partage sur Facebook, vous devez utiliser le code suivant :

import { FacebookShareButton } from 'react-share';

Vous pouvez ensuite utiliser le composant FacebookShareButton dans votre code pour ajouter le bouton Partager sur Facebook à votre application.

import React from 'react';
import { FacebookShareButton, FacebookIcon } from 'react-share';


const App = () => {
  return (
    <div>
      <FacebookShareButton
        url={'https://www.example.com'}
        quote={'Dummy text!'}
        hashtag="#muo"
      >
        <FacebookIcon size={32} round />
      </FacebookShareButton>
    </div>
  );
};

export default App;

Vous trouverez ci-dessous la sortie affichant le bouton Partager sur Facebook :

Dans ce code, vous devez d’abord importer les composants requis à partir du module react-share . Après cela, créez un composant fonctionnel appelé App qui contient le bouton de partage Facebook. Le composant FacebookShareButton est utilisé pour créer le bouton de partage et le composant FacebookIcon est utilisé pour afficher le logo Facebook sur le bouton.

Le composant FacebookShareButton a plusieurs accessoires qui peuvent être utilisés pour personnaliser le bouton de partage. Dans cet exemple, nous avons spécifié les accessoires url , quote et hashtag .

Enfin, vous devez exporter le composant App , afin qu’il puisse être utilisé à d’autres endroits de notre application. Lorsque vous cliquez sur le bouton Partager sur Facebook, une boîte de dialogue de partage pré-remplie s’ouvre avec l’ URL , la citation et le hashtag spécifiés .

Création de boutons de partage social pour d’autres plateformes de médias sociaux

En plus de Facebook, le module react-share fournit également des composants permettant d’ajouter des boutons de partage social pour plusieurs autres plates-formes, notamment Instagram, Twitter, LinkedIn, etc.

Pour ajouter un bouton de partage social pour une plate-forme différente, vous devrez importer les composants requis à partir du module react-share . Par exemple, pour ajouter un bouton de partage Twitter, vous devez d’abord importer les éléments suivants :

import { TwitterShareButton, TwitterIcon } from 'react-share';

Vous pouvez ensuite utiliser les composants TwitterShareButton et TwitterIcon dans votre code pour ajouter le bouton Partager sur Twitter à votre application.

<TwitterShareButton
  url={'https://www.example.com'}
  quote={'Dummy text!'}
  hashtag="#muo"
>
  <TwitterIcon size={32} round />
</TwitterShareButton>

Vous trouverez ci-dessous la sortie affichant les boutons de partage sur Facebook et de partage sur Twitter :

Lorsque vous cliquez sur le bouton de partage Twitter, une boîte de dialogue de partage pré-remplie s’ouvre avec l’URL et la citation spécifiées.

Personnaliser les boutons

Les composants du bouton de partage social ont plusieurs accessoires que vous pouvez utiliser pour personnaliser le bouton. Certains des accessoires disponibles incluent :

• url : l’URL à partager sur Facebook
• quote : la citation à partager sur Facebook
• hashtag : le hashtag à ajouter à la publication partagée sur Facebook

Vous pouvez trouver une liste complète des boutons et accessoires de partage social disponibles dans la documentation officielle de react-share .

Obtenez plus de pages vues avec les boutons de partage social

L’ajout de boutons de partage social à votre application React peut vous aider à augmenter votre portée et votre visibilité sur les plateformes de médias sociaux. En permettant aux utilisateurs de partager facilement votre contenu, vous pouvez potentiellement atteindre un public plus large et générer plus de trafic vers votre application. De plus, les boutons de partage social peuvent également aider à accroître la crédibilité et l’autorité de votre marque, car les partages peuvent servir de recommandations pour votre application.