Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

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

instagram viewer

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

npm installer réagir-partager

Création d'un bouton Partager sur Facebook

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

importer {FacebookShareButton} depuis'réagir-partager';

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

importer Réagir depuis'réagir';
importer { FacebookShareButton, FacebookIcon } depuis'réagir-partager';
constante Application = () => {
retour (
<div>
 URL={' https://www.example.com'}
 devis={'Faux texte!'}
 hashtag ="#muo"
 >
<Icône Facebooktaille={32}rond />
Bouton de partage Facebook>
div>
 );
};
exporterdéfaut application ;

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 réagir-partager module. Après cela, créez un composant fonctionnel appelé Application qui contient le bouton de partage Facebook. Le Bouton de partage Facebook composant est utilisé pour créer le bouton de partage et le Icône Facebook Le composant est utilisé pour afficher le logo Facebook sur le bouton.

Le Bouton de partage Facebookle composant a plusieurs accessoires qui peut être utilisé pour personnaliser le bouton de partage. Dans cet exemple, nous avons spécifié le URL, citation, et hashtag accessoires.

Enfin, vous devez exporter le Application composant, 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 les informations spécifiées. URL, citation, et hashtag.

En plus de Facebook, le réagir-partager Le module 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 réagir-partager module. Par exemple, pour ajouter un bouton de partage Twitter, vous devez d'abord importer les éléments suivants :

importer { TwitterShareButton, TwitterIcon } depuis'réagir-partager';

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

 URL={' https://www.example.com'}
 devis={'Faux texte!'}
 hashtag ="#muo"
>
<TwitterIcônetaille={32}rond />
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
  • citation: 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 le réagir-partager documents officiels.

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.