I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

I social media sono diventati parte integrante della nostra vita quotidiana e sono un'ottima piattaforma per le aziende per raggiungere i propri clienti. L'aggiunta di pulsanti di condivisione social alla tua app React può aiutarti ad aumentare la tua portata e visibilità sulle piattaforme dei social media. In questo articolo imparerai come aggiungere facilmente pulsanti di condivisione social nella tua app React.

Aggiunta di pulsanti di condivisione social alla tua app React

Prima di iniziare, devi avere una conoscenza di base di React e come farlo configurare un'app React. Dovresti anche avere un account sulla piattaforma o sulle piattaforme di social media per cui desideri aggiungere pulsanti di condivisione.

Installazione del modulo react-share

Sono disponibili diverse opzioni per aggiungere pulsanti di condivisione social alla tua app React. Un'opzione è usare il

instagram viewer
reagire-condividere module, che è una libreria leggera e facile da usare per aggiungere pulsanti di condivisione social alla tua app. Per installare il reagire-condividere modulo, è necessario eseguire il seguente comando:

npm installare reagire-condividere

Creazione di un pulsante Condividi su Facebook

Una volta che hai il reagire-condividere modulo installato, puoi iniziare ad aggiungere pulsanti di condivisione social alla tua app. Per fare ciò, dovrai importare i componenti richiesti dal file reagire-condividere modulo. Ad esempio, per aggiungere una condivisione al pulsante Facebook, è necessario utilizzare il seguente codice:

importare { Pulsante Condividi Facebook } da'reagisci-condividi';

È quindi possibile utilizzare il Pulsante Condividi Facebook componente nel tuo codice per aggiungere il pulsante Condividi su Facebook alla tua app.

importare Reagire da'reagire';
importare { Pulsante Condividi Facebook, Icona Facebook } da'reagisci-condividi';
cost Applicazione = () => {
ritorno (
<div>
 URL={' https://www.example.com'}
 citazione={"Testo fittizio!"}
 hashtag="#muo"
 >
<Icona Facebookmisurare={32}girare />
Pulsante Condividi Facebook>
div>
 );
};
esportarepredefinito Applicazione;

Di seguito è riportato l'output che mostra il pulsante Condividi su Facebook:

In questo codice, devi prima importare i componenti richiesti dal file reagire-condividere modulo. Successivamente, crea un componente funzionale chiamato App che contiene il pulsante di condivisione di Facebook. IL Pulsante Condividi Facebook componente viene utilizzato per creare il pulsante di condivisione e il Icona Facebook componente viene utilizzato per visualizzare il logo di Facebook sul pulsante.

IL Pulsante Condividi Facebookcomponente ha diversi oggetti di scena che può essere utilizzato per personalizzare il pulsante di condivisione. In questo esempio, abbiamo specificato il URL, citazione, E hashtag oggetti di scena.

Infine, devi esportare il file App componente, in modo che possa essere utilizzato in altri punti della nostra app. Quando si fa clic sul pulsante Condividi su Facebook, si aprirà una finestra di dialogo di condivisione precompilata con l'elemento specificato URL, citazione, E hashtag.

Oltre a Facebook, il reagire-condividere Il modulo fornisce anche componenti per l'aggiunta di pulsanti di condivisione social per diverse altre piattaforme, tra cui Instagram, Twitter, LinkedIn e altro.

Per aggiungere un pulsante di condivisione social per una piattaforma diversa, dovrai importare i componenti richiesti dal file reagire-condividere modulo. Ad esempio, per aggiungere un pulsante di condivisione di Twitter, devi prima importare quanto segue:

importare {TwitterShareButton, TwitterIcon} da'reagisci-condividi';

È quindi possibile utilizzare il Pulsante di condivisione di Twitter E Icona di Twitter componenti nel tuo codice per aggiungere il pulsante Condividi su Twitter alla tua app.

 URL={' https://www.example.com'}
 citazione={"Testo fittizio!"}
 hashtag="#muo"
>
<Icona di Twittermisurare={32}girare />
Pulsante di condivisione di Twitter>

Di seguito è riportato l'output che mostra i pulsanti Condividi su Facebook e Condividi su Twitter:

Quando fai clic sul pulsante di condivisione di Twitter, si aprirà una finestra di dialogo di condivisione precompilata con l'URL e la citazione specificati.

Personalizzazione dei pulsanti

I componenti del pulsante di condivisione social hanno diversi oggetti di scena che puoi utilizzare per personalizzare il pulsante. Alcuni degli oggetti di scena disponibili includono:

  • URL: l'URL da condividere su Facebook
  • citazione: la citazione da condividere su Facebook
  • hashtag: l'hashtag da aggiungere al post condiviso su Facebook

Puoi trovare un elenco completo dei pulsanti e degli oggetti di condivisione social disponibili nel file reagire-condividere documentazione ufficiale.

Ottieni più visualizzazioni di pagina con i pulsanti di condivisione social

L'aggiunta di pulsanti di condivisione social alla tua app React può aiutarti ad aumentare la tua portata e visibilità sulle piattaforme dei social media. Semplificando la condivisione dei tuoi contenuti da parte degli utenti, puoi potenzialmente raggiungere un pubblico più ampio e indirizzare più traffico verso la tua app. Inoltre, i pulsanti di condivisione sui social possono anche contribuire ad aumentare la credibilità e l'autorità del tuo marchio, poiché le condivisioni possono fungere da consigli per la tua app.