Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Sociālie mediji ir kļuvuši par mūsu ikdienas dzīves neatņemamu sastāvdaļu un ir lieliska platforma uzņēmumiem, lai uzrunātu savus klientus. Sociālās kopīgošanas pogu pievienošana savai React lietotnei var palīdzēt palielināt sasniedzamību un redzamību sociālo mediju platformās. Šajā rakstā uzzināsit, kā savā React lietotnē varat viegli pievienot sociālās kopīgošanas pogas.

Sociālās kopīgošanas pogu pievienošana savai React lietotnei

Pirms sākat darbu, jums ir jāsaņem pamatzināšanas par React un to, kā to darīt iestatiet React lietotni. Jums vajadzētu arī izveidot kontu sociālo mediju platformā (-ās), kurai vēlaties pievienot kopīgošanas pogas.

React-share moduļa instalēšana

Ir pieejamas vairākas iespējas, lai savai React lietotnei pievienotu sociālās kopīgošanas pogas. Viena iespēja ir izmantot reaģēt-dalīties modulis, kas ir viegla un ērti lietojama bibliotēka sociālās kopīgošanas pogu pievienošanai jūsu lietotnei. Lai instalētu

instagram viewer
reaģēt-dalīties moduli, jums ir jāpalaiž šāda komanda:

npm uzstādīt reaģēt -dalīties

Pogas Share to Facebook izveide

Kad jums ir reaģēt-dalīties modulis, varat sākt pievienot savai lietotnei sociālās kopīgošanas pogas. Lai to izdarītu, jums būs jāimportē nepieciešamie komponenti no reaģēt-dalīties modulis. Piemēram, lai pievienotu kopīgošanas pogai Facebook, jums ir jāizmanto šāds kods:

imports { FacebookShare Button } no'reaģēt-dalīties';

Pēc tam varat izmantot Facebook ShareButton komponentu savā kodā, lai savai lietotnei pievienotu kopīgošanas pogu Facebook.

imports Reaģēt no'reaģēt';
imports { FacebookShareButton, FacebookIcon } no'reaģēt-dalīties';
konst Lietotne = () => {
atgriezties (
<div>
 url={' https://www.example.com'}
 citāts={"Manekens teksts!"}
 hashtag="#muo"
 >
<Facebook ikonaIzmērs={32}raunds />
Facebook ShareButton>
div>
 );
};
eksportētnoklusējuma Lietotne;

Zemāk ir izvade, kurā tiek parādīta poga kopīgot pakalpojumā Facebook:

Šajā kodā vispirms ir jāimportē nepieciešamie komponenti no reaģēt-dalīties modulis. Pēc tam izveidojiet funkcionālu komponentu ar nosaukumu App kurā ir Facebook kopīgošanas poga. The Facebook ShareButton komponents tiek izmantots, lai izveidotu kopīgošanas pogu un Facebook ikona komponents tiek izmantots, lai parādītu Facebook logotipu uz pogas.

The Facebook ShareButtonkomponentam ir vairāki rekvizīti ko var izmantot, lai pielāgotu kopīgošanas pogu. Šajā piemērā mēs esam norādījuši url, citāts, un hashtag rekvizīti.

Visbeidzot, jums ir jāeksportē App komponentu, lai to varētu izmantot citās mūsu lietotnes vietās. Noklikšķinot uz pogas Kopīgot pakalpojumā Facebook, tiks atvērts iepriekš aizpildīts kopīgošanas dialoglodziņš ar norādīto url, citāts, un hashtag.

Papildus Facebook, reaģēt-dalīties modulis nodrošina arī komponentus sociālās kopīgošanas pogu pievienošanai vairākām citām platformām, tostarp Instagram, Twitter, LinkedIn un citām platformām.

Lai pievienotu sociālo kopīgošanas pogu citai platformai, jums būs jāimportē nepieciešamie komponenti no vietnes reaģēt-dalīties modulis. Piemēram, lai pievienotu Twitter kopīgošanas pogu, vispirms ir jāimportē:

imports { TwitterShareButton, TwitterIcon } no'reaģēt-dalīties';

Pēc tam varat izmantot TwitterShareButton un TwitterIkona komponentus savā kodā, lai savai lietotnei pievienotu kopīgošanas pogu pakalpojumā Twitter.

 url={' https://www.example.com'}
 citāts={"Manekens teksts!"}
 hashtag="#muo"
>
<TwitterIkonaIzmērs={32}raunds />
TwitterShareButton>

Tālāk ir parādīta izvade, kas parāda kopīgošanas Facebook un kopīgošanas pakalpojumā Twitter pogas:

Noklikšķinot uz Twitter kopīgošanas pogas, tiks atvērts iepriekš aizpildīts kopīgošanas dialoglodziņš ar norādīto URL un citātu.

Pogu pielāgošana

Sociālās kopīgošanas pogas komponentiem ir vairāki rekvizīti, kurus varat izmantot, lai pielāgotu pogu. Daži no pieejamajiem rekvizītiem ietver:

  • url: URL, kas tiks kopīgots pakalpojumā Facebook
  • citāts: citāts, kas tiks kopīgots Facebook
  • hashtag: mirkļbirka, kas jāpievieno koplietotajai ziņai pakalpojumā Facebook

Pilnu pieejamo sociālo kopīgošanas pogu un rekvizītu sarakstu varat atrast vietnē reaģēt-dalīties oficiālā dokumentācija.

Iegūstiet vairāk lapu skatījumu, izmantojot sociālās kopīgošanas pogas

Sociālās kopīgošanas pogu pievienošana savai React lietotnei var palīdzēt palielināt sasniedzamību un redzamību sociālo mediju platformās. Ļaujot lietotājiem ērti kopīgot jūsu saturu, jūs varat sasniegt lielāku auditoriju un piesaistīt savai lietotnei vairāk trafika. Turklāt sociālo tīklu kopīgošanas pogas var arī palīdzēt palielināt jūsu zīmola uzticamību un autoritāti, jo kopīgošana var darboties kā ieteikumi jūsu lietotnei.