Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Društveni mediji postali su sastavni dio našeg svakodnevnog života i izvrsna su platforma za tvrtke da dopru do svojih kupaca. Dodavanje gumba za dijeljenje na društvenim mrežama u vašu aplikaciju React može vam pomoći da povećate svoj doseg i vidljivost na platformama društvenih medija. U ovom ćete članku naučiti kako jednostavno dodati gumbe za dijeljenje na društvenim mrežama u svoju aplikaciju React.

Dodavanje gumba za društveno dijeljenje vašoj aplikaciji React

Prije nego počnete, morat ćete imati osnovno razumijevanje Reacta i kako to učiniti postaviti React aplikaciju. Također biste trebali imati račun na platformi(ama) društvenih medija za koje želite dodati gumbe za dijeljenje.

Instaliranje modula react-share

Postoji nekoliko dostupnih opcija za dodavanje gumba za dijeljenje na društvenim mrežama u vašu aplikaciju React. Jedna od opcija je korištenje

instagram viewer
reagirati-dijeliti modul, koji je lagana biblioteka jednostavna za korištenje za dodavanje gumba za dijeljenje na društvenim mrežama u vašu aplikaciju. Za instaliranje reagirati-dijeliti modul, trebate pokrenuti sljedeću naredbu:

npm instalirati reagirati-udio

Stvaranje gumba za dijeljenje na Facebooku

Nakon što dobijete reagirati-dijeliti instaliran modul, možete početi dodavati gumbe za dijeljenje na društvenim mrežama u svoju aplikaciju. Da biste to učinili, morat ćete uvesti potrebne komponente iz reagirati-dijeliti modul. Na primjer, da biste dodali gumb za dijeljenje na Facebooku, trebate upotrijebiti sljedeći kod:

uvoz {FacebookShareButton} iz'reagiraj-dijeli';

Zatim možete koristiti FacebookShareButton komponentu u svom kodu za dodavanje gumba za dijeljenje na Facebooku u vašu aplikaciju.

uvoz Reagirati iz'reagirati';
uvoz {FacebookShareButton, FacebookIcon} iz'reagiraj-dijeli';
konst Aplikacija = () => {
povratak (
<div>
 url={' https://www.example.com'}
 citat={'Lažna poruka!'}
 hashtag="#muo"
 >
<Facebook ikonaveličina={32}krug />
FacebookShareButton>
div>
 );
};
izvozzadano aplikacija;

Ispod je izlaz koji prikazuje gumb za dijeljenje na Facebooku:

U ovom kodu prvo morate uvesti potrebne komponente iz reagirati-dijeliti modul. Nakon toga izradite funkcionalnu komponentu tzv aplikacija koji sadrži Facebook gumb za dijeljenje. The FacebookShareButton komponenta se koristi za stvaranje gumba za dijeljenje i Facebook ikona komponenta se koristi za prikaz Facebook logotipa na gumbu.

The FacebookShareButtonkomponenta ima nekoliko rekvizita koji se može koristiti za prilagodbu gumba za dijeljenje. U ovom primjeru specificirali smo url, citat, i hashtag rekviziti.

Konačno, trebate izvesti aplikacija komponentu, tako da se može koristiti na drugim mjestima naše aplikacije. Kada se klikne gumb za dijeljenje na Facebooku, otvorit će se unaprijed ispunjen dijaloški okvir za dijeljenje s navedenim url, citat, i hashtag.

Osim Facebooka, reagirati-dijeliti modul također pruža komponente za dodavanje gumba za društveno dijeljenje za nekoliko drugih platformi, uključujući Instagram, Twitter, LinkedIn i druge.

Da biste dodali gumb za društveno dijeljenje za drugu platformu, morat ćete uvesti potrebne komponente iz reagirati-dijeliti modul. Na primjer, da biste dodali Twitter gumb za dijeljenje, prvo morate uvesti sljedeće:

uvoz { TwitterShareButton, TwitterIcon } iz'reagiraj-dijeli';

Zatim možete koristiti TwitterShareButton i Ikona Twittera komponente u svom kodu kako biste svojoj aplikaciji dodali gumb za dijeljenje na Twitteru.

 url={' https://www.example.com'}
 citat={'Lažna poruka!'}
 hashtag="#muo"
>
<Ikona Twitteraveličina={32}krug />
TwitterShareButton>

Ispod je izlaz koji prikazuje gumbe za dijeljenje na Facebooku i dijeljenje na Twitteru:

Kada kliknete gumb za dijeljenje na Twitteru, otvorit će se unaprijed ispunjen dijaloški okvir za dijeljenje s navedenim URL-om i citatom.

Prilagodba gumba

Komponente gumba za dijeljenje na društvenim mrežama imaju nekoliko dodataka koje možete koristiti za prilagodbu gumba. Neki od dostupnih rekvizita uključuju:

  • url: URL za dijeljenje na Facebooku
  • citat: citat koji će se podijeliti na Facebooku
  • hashtag: hashtag koji će se dodati dijeljenoj objavi na Facebooku

Potpuni popis dostupnih gumba i rekvizita za dijeljenje na društvenim mrežama možete pronaći u reagirati-dijeliti službena dokumentacija.

Ostvarite više pregleda stranica pomoću gumba za dijeljenje na društvenim mrežama

Dodavanje gumba za dijeljenje na društvenim mrežama u vašu aplikaciju React može vam pomoći da povećate svoj doseg i vidljivost na platformama društvenih medija. Olakšavajući korisnicima dijeljenje vašeg sadržaja, potencijalno možete dosegnuti veću publiku i privući više prometa na svoju aplikaciju. Osim toga, gumbi za dijeljenje na društvenim mrežama također mogu pomoći u povećanju vjerodostojnosti i autoriteta vašeg brenda, jer dijeljenja mogu djelovati kao preporuke za vašu aplikaciju.