Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Sotsiaalmeediast on saanud meie igapäevaelu lahutamatu osa ja see on suurepärane platvorm ettevõtetele oma klientideni jõudmiseks. Sotsiaalsete jagamisnuppude lisamine oma Reacti rakendusse võib aidata teil suurendada oma ulatust ja nähtavust sotsiaalmeedia platvormidel. Sellest artiklist saate teada, kuidas saate oma Reacti rakendusse hõlpsasti sotsiaalse jagamise nuppe lisada.

Sotsiaalsete jagamisnuppude lisamine oma Reacti rakendusse

Enne alustamist peate omama põhiteadmisi Reactist ja selle toimimisest seadistage rakendus React. Samuti peaks teil olema konto sotsiaalmeedia platvormil (platvormidel), millele soovite jagamisnuppe lisada.

React-share mooduli installimine

Sotsiaalsete jagamisnuppude lisamiseks oma Reacti rakendusse on mitu võimalust. Üks võimalus on kasutada reageeri-jaga moodul, mis on kerge ja hõlpsasti kasutatav raamatukogu teie rakendusele sotsiaalsete jagamisnuppude lisamiseks. Et installida

instagram viewer
reageeri-jaga moodulis peate käivitama järgmise käsu:

npm installida reageerima-jagada

Facebookis jagamise nupu loomine

Kui teil on reageeri-jaga moodul installitud, saate hakata oma rakendusele sotsiaalsete jagamisnuppe lisama. Selleks peate importima vajalikud komponendid saidist reageeri-jaga moodul. Näiteks Facebooki jagamise nupu lisamiseks peate kasutama järgmist koodi:

importida { FacebookShareButton } alates'reageeri-jaga';

Seejärel saate kasutada Facebooki jagamise nupp koodis, et lisada oma rakendusele Facebookis jagamise nupp.

importida Reageerige alates'reageeri';
importida { FacebookShareButton, FacebookIcon } alates'reageeri-jaga';
konst Rakendus = () => {
tagasi (
<div>
 url={' https://www.example.com'}
 tsitaat={"Nimelik tekst!"}
 hashtag="#muo"
 >
<Facebooki ikoonsuurus={32}ümmargune />
Facebooki jagamise nupp>
div>
 );
};
eksportidavaikimisi Rakendus;

Allpool on väljund, mis kuvab Facebooki jagamise nupu:

Selles koodis peate esmalt importima vajalikud komponendid reageeri-jaga moodul. Pärast seda looge funktsionaalne komponent nimega Rakendus mis sisaldab Facebooki jagamisnuppu. The Facebooki jagamise nupp komponenti kasutatakse jagamisnupu loomiseks ja Facebooki ikoon komponenti kasutatakse Facebooki logo kuvamiseks nupul.

The Facebooki jagamise nuppkomponendil on mitmeid rekvisiite mida saab kasutada jagamisnupu kohandamiseks. Selles näites oleme täpsustanud url, tsitaatja hashtag rekvisiidid.

Lõpuks peate eksportima Rakendus komponent, et seda saaks kasutada meie rakenduse muudes kohtades. Kui klõpsate Facebookis jagamise nupul, avaneb eeltäidetud jagamise dialoog, mis sisaldab määratud teavet url, tsitaatja hashtag.

Lisaks Facebookile on reageeri-jaga moodul pakub ka komponente sotsiaalsete jagamisnuppude lisamiseks mitmetele teistele platvormidele, sealhulgas Instagram, Twitter, LinkedIn ja palju muud.

Sotsiaalse jagamisnupu lisamiseks mõnele muule platvormile peate importima vajalikud komponendid saidilt reageeri-jaga moodul. Näiteks Twitteri jagamisnupu lisamiseks peate esmalt importima järgmise:

importida { TwitterShareButton, TwitterIcon } alates'reageeri-jaga';

Seejärel saate kasutada TwitterJagamisnupp ja Twitteri ikoon koodi komponente, et lisada oma rakendusele Twitteris jagamise nupp.

 url={' https://www.example.com'}
 tsitaat={"Nimelik tekst!"}
 hashtag="#muo"
>
<Twitteri ikoonsuurus={32}ümmargune />
TwitterJagamisnupp>

Allpool on väljund, mis kuvab Facebookis jagamise ja Twitteris jagamise nupud:

Kui klõpsate Twitteri jagamisnupul, avaneb eeltäidetud jagamisdialoog määratud URL-i ja hinnapakkumisega.

Nuppude kohandamine

Sotsiaalse jagamisnupu komponentidel on mitu rekvisiiti, mida saate nupu kohandamiseks kasutada. Mõned saadaolevad rekvisiidid hõlmavad järgmist:

  • url: Facebookis jagatav URL
  • tsitaat: tsitaat, mida jagatakse Facebookis
  • hashtag: hashtag, mis lisatakse Facebookis jagatud postitusele

Saadaolevate sotsiaalsete jagamisnuppude ja rekvisiitide täieliku loendi leiate veebisaidilt reageeri-jaga ametlik dokumentatsioon.

Saate sotsiaalsete jagamisnuppudega rohkem lehevaatamisi

Sotsiaalsete jagamisnuppude lisamine oma Reacti rakendusse võib aidata teil suurendada oma ulatust ja nähtavust sotsiaalmeedia platvormidel. Muutes kasutajatele teie sisu jagamise lihtsaks, võite jõuda suurema vaatajaskonnani ja juhtida oma rakendusele rohkem liiklust. Lisaks võivad suhtlusvõrgustike jagamisnupud aidata suurendada teie brändi usaldusväärsust ja autoriteeti, kuna jagamised võivad olla teie rakenduse soovitused.