Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Družbeni mediji so postali sestavni del našega vsakdana in so odlična platforma za podjetja, da dosežejo svoje stranke. Če v aplikacijo React dodate gumbe za skupno rabo v družabnih omrežjih, lahko povečate svoj doseg in vidnost na platformah družbenih medijev. V tem članku boste izvedeli, kako lahko preprosto dodate gumbe za skupno rabo v družabnih omrežjih v svoji aplikaciji React.

Dodajanje gumbov za skupno rabo v družabnih omrežjih vaši aplikaciji React

Preden začnete, boste morali imeti osnovno razumevanje Reacta in kako nastavite aplikacijo React. Imeti morate tudi račun na platformah družbenih medijev, za katere želite dodati gumbe za skupno rabo.

Namestitev modula react-share

Na voljo je več možnosti za dodajanje gumbov za skupno rabo v družabnih omrežjih v vašo aplikacijo React. Ena od možnosti je uporaba reagirati-deliti modul, ki je lahka in za uporabo preprosta knjižnica za dodajanje gumbov za skupno rabo v vaši aplikaciji. Za namestitev

instagram viewer
reagirati-deliti modul, morate zagnati naslednji ukaz:

npm namestite reagirati-deliti

Ustvarjanje gumba za skupno rabo na Facebooku

Ko enkrat imate reagirati-deliti Če je modul nameščen, lahko svoji aplikaciji začnete dodajati gumbe za skupno rabo v družabnih omrežjih. Če želite to narediti, boste morali uvoziti potrebne komponente iz reagirati-deliti modul. Če želite na primer dodati gumb za skupno rabo na Facebooku, morate uporabiti naslednjo kodo:

uvoz { FacebookShareButton } od'react-share';

Nato lahko uporabite FacebookShareButton komponento v vaši kodi, da v aplikacijo dodate gumb za skupno rabo na Facebooku.

uvoz Reagiraj od'reagirati';
uvoz {FacebookShareButton, FacebookIcon} od'react-share';
konst Aplikacija = () => {
vrnitev (
<div>
 url={' https://www.example.com'}
 citat={'Navidezno besedilo!'}
 hashtag="#muo"
 >
<ikona Facebookvelikost={32}krog />
FacebookShareButton>
div>
 );
};
izvozprivzeto aplikacija;

Spodaj je izhod, ki prikazuje gumb za skupno rabo s Facebookom:

V tej kodi morate najprej uvoziti zahtevane komponente iz reagirati-deliti modul. Po tem ustvarite funkcionalno komponento, imenovano aplikacija ki vsebuje gumb za skupno rabo na Facebooku. The FacebookShareButton komponenta se uporablja za ustvarjanje gumba za skupno rabo in ikona Facebook komponenta se uporablja za prikaz logotipa Facebook na gumbu.

The FacebookShareButtonkomponenta ima več rekvizitov ki ga lahko uporabite za prilagajanje gumba za skupno rabo. V tem primeru smo določili url, kvota, in lojtra rekviziti.

Končno morate izvoziti aplikacija komponento, tako da jo je mogoče uporabiti na drugih mestih naše aplikacije. Ko kliknete gumb za skupno rabo s Facebookom, se odpre vnaprej izpolnjeno pogovorno okno za skupno rabo z navedenim url, kvota, in lojtra.

Poleg Facebooka je reagirati-deliti modul ponuja tudi komponente za dodajanje gumbov za skupno rabo v družabnih omrežjih za več drugih platform, vključno z Instagramom, Twitterjem, LinkedInom in drugimi.

Če želite dodati gumb za skupno rabo v družabnih omrežjih za drugo platformo, boste morali uvoziti zahtevane komponente iz reagirati-deliti modul. Na primer, če želite dodati gumb za skupno rabo na Twitterju, morate najprej uvoziti naslednje:

uvoz { TwitterShareButton, TwitterIcon } od'react-share';

Nato lahko uporabite TwitterShareButton in TwitterIcon komponente v vaši kodi, da v aplikacijo dodate gumb za skupno rabo s Twitterjem.

 url={' https://www.example.com'}
 citat={'Navidezno besedilo!'}
 hashtag="#muo"
>
<TwitterIconvelikost={32}krog />
TwitterShareButton>

Spodaj je izhod, ki prikazuje gumba za skupno rabo s Facebookom in za skupno rabo s Twitterjem:

Ko kliknete gumb za skupno rabo na Twitterju, se odpre vnaprej izpolnjeno pogovorno okno za skupno rabo z navedenim URL-jem in citatom.

Prilagajanje gumbov

Komponente gumba za skupno rabo v družabnih omrežjih imajo več pripomočkov, s katerimi lahko prilagodite gumb. Nekateri razpoložljivi rekviziti vključujejo:

  • url: URL, ki ga želite deliti na Facebooku
  • kvota: citat, ki ga delite na Facebooku
  • lojtra: hashtag, ki bo dodan v skupno objavo na Facebooku

Celoten seznam razpoložljivih gumbov in pripomočkov za skupno rabo v družabnih omrežjih najdete v reagirati-deliti uradna dokumentacija.

Pridobite več ogledov strani z gumbi za skupno rabo v družabnih omrežjih

Če v aplikacijo React dodate gumbe za skupno rabo v družabnih omrežjih, lahko povečate svoj doseg in vidnost na platformah družbenih medijev. Če uporabnikom olajšate skupno rabo vaše vsebine, lahko potencialno dosežete večje občinstvo in pritegnete več prometa v svojo aplikacijo. Poleg tega lahko gumbi za skupno rabo v družabnih omrežjih pomagajo povečati verodostojnost in avtoriteto vaše blagovne znamke, saj lahko skupne rabe delujejo kot priporočila za vašo aplikacijo.