Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Rețelele sociale au devenit o parte integrantă a vieții noastre de zi cu zi și reprezintă o platformă excelentă pentru ca companiile să ajungă la clienții lor. Adăugarea butoanelor de distribuire socială în aplicația dvs. React vă poate ajuta să vă creșteți acoperirea și vizibilitatea pe platformele de social media. În acest articol, veți afla cum puteți adăuga cu ușurință butoane de distribuire socială în aplicația dvs. React.

Adăugarea butoanelor de distribuire socială în aplicația dvs. React

Înainte de a începe, va trebui să aveți o înțelegere de bază despre React și cum să faceți acest lucru configurați o aplicație React. De asemenea, ar trebui să aveți un cont pe platforma (platformele) de socializare pentru care doriți să adăugați butoane de partajare.

Instalarea modulului react-share

Există mai multe opțiuni disponibile pentru adăugarea butoanelor de distribuire socială în aplicația dvs. React. O opțiune este să utilizați

instagram viewer
reacționează-distribuie modul, care este o bibliotecă ușoară și ușor de utilizat pentru adăugarea butoanelor de distribuire socială în aplicația dvs. Pentru a instala reacționează-distribuie modul, trebuie să rulați următoarea comandă:

npm instalare reacţiona-acțiune

Crearea unui buton de distribuire pe Facebook

Odată ce ai reacționează-distribuie instalat, puteți începe să adăugați butoane de distribuire socială în aplicația dvs. Pentru a face acest lucru, va trebui să importați componentele necesare din reacționează-distribuie modul. De exemplu, pentru a adăuga o distribuire la butonul Facebook, trebuie să utilizați următorul cod:

import { FacebookShareButton } din„react-share”;

Apoi puteți utiliza FacebookShareButton componentă din codul dvs. pentru a adăuga butonul de distribuire la Facebook la aplicația dvs.

import Reacţiona din'reacţiona';
import { FacebookShareButton, FacebookIcon } din„react-share”;
const Aplicație = () => {
întoarcere (
<div>
 url={' https://www.example.com'}
 citat={— Text fals!}
 hashtag="#muo"
 >
<Pictograma Facebookmărimea={32}rundă />
FacebookShareButton>
div>
 );
};
exportMod implicit Aplicație;

Mai jos este rezultatul care afișează butonul de distribuire pe Facebook:

În acest cod, mai întâi trebuie să importați componentele necesare din reacționează-distribuie modul. După aceea, creați o componentă funcțională numită App care conține butonul de partajare pe Facebook. The FacebookShareButton componenta este folosită pentru a crea butonul de partajare și Pictograma Facebook componenta este utilizată pentru a afișa logo-ul Facebook pe buton.

The FacebookShareButtoncomponenta are mai multe elemente de recuzită care poate fi folosit pentru a personaliza butonul de partajare. În acest exemplu, am specificat url, citat, și hashtag recuzită.

În cele din urmă, trebuie să exportați App componentă, astfel încât să poată fi utilizată în alte locuri ale aplicației noastre. Când se face clic pe butonul de distribuire pe Facebook, se va deschide un dialog de partajare pre-completat cu datele specificate url, citat, și hashtag.

Pe lângă Facebook, reacționează-distribuie Modulul oferă, de asemenea, componente pentru adăugarea butoanelor de distribuire socială pentru mai multe alte platforme, inclusiv Instagram, Twitter, LinkedIn și multe altele.

Pentru a adăuga un buton de distribuire socială pentru o altă platformă, va trebui să importați componentele necesare din reacționează-distribuie modul. De exemplu, pentru a adăuga un buton de partajare Twitter, mai întâi trebuie să importați următoarele:

import { TwitterShareButton, TwitterIcon } din„react-share”;

Apoi puteți utiliza TwitterShareButton și Pictogramă Twitter componentele din codul dvs. pentru a adăuga butonul de distribuire pe Twitter la aplicația dvs.

 url={' https://www.example.com'}
 citat={— Text fals!}
 hashtag="#muo"
>
<Pictogramă Twittermărimea={32}rundă />
TwitterShareButton>

Mai jos este rezultatul care afișează butoanele de distribuire pe Facebook și partajare pe Twitter:

Când faceți clic pe butonul de partajare Twitter, se va deschide un dialog de distribuire pre-completat cu adresa URL și citarea specificate.

Personalizarea butoanelor

Componentele butonului de distribuire socială au mai multe elemente de recuzită pe care le puteți folosi pentru a personaliza butonul. Unele dintre elementele de recuzită disponibile includ:

  • url: URL-ul care urmează să fie distribuit pe Facebook
  • citat: citatul să fie distribuit pe Facebook
  • hashtag: hashtagul să fie adăugat la postarea partajată pe Facebook

Puteți găsi o listă completă a butoanelor și elementelor de recuzită disponibile pentru distribuirea socială în reacționează-distribuie documentație oficială.

Obțineți mai multe vizualizări de pagină cu butoanele de distribuire socială

Adăugarea butoanelor de distribuire socială în aplicația dvs. React vă poate ajuta să vă creșteți acoperirea și vizibilitatea pe platformele de social media. Făcându-le mai ușor pentru utilizatori să partajeze conținutul dvs., puteți ajunge la un public mai larg și puteți genera mai mult trafic către aplicația dvs. În plus, butoanele de distribuire socială pot ajuta, de asemenea, la creșterea credibilității și a autorității mărcii dvs., deoarece acțiunile pot acționa ca recomandări pentru aplicația dvs.