Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Sosiaalisesta mediasta on tullut olennainen osa jokapäiväistä elämäämme ja se on loistava alusta yrityksille tavoittaa asiakkaitaan. Sosiaalisen median jakopainikkeiden lisääminen React-sovellukseesi voi auttaa sinua lisäämään tavoittavuuttasi ja näkyvyyttäsi sosiaalisen median alustoilla. Tässä artikkelissa opit, kuinka voit helposti lisätä sosiaalisen jakamisen painikkeita React-sovellukseesi.

Social Share -painikkeiden lisääminen React-sovellukseesi

Ennen kuin aloitat, sinulla on oltava perusymmärrys Reactista ja sen toiminnasta määritä React-sovellus. Sinulla tulee olla myös tili sosiaalisen median alustoilla, joille haluat lisätä jakopainikkeita.

React-share -moduulin asentaminen

On olemassa useita vaihtoehtoja sosiaalisen jakamispainikkeiden lisäämiseen React-sovellukseesi. Yksi vaihtoehto on käyttää reagoi-jaa moduuli, joka on kevyt ja helppokäyttöinen kirjasto, jolla voit lisätä sosiaalisen median jakopainikkeita sovellukseesi. Asentaaksesi

instagram viewer
reagoi-jaa moduuli, sinun on suoritettava seuraava komento:

npm Asentaa reagoi-Jaa

Jaa Facebookiin -painikkeen luominen

Kun sinulla on reagoi-jaa moduuli asennettuna, voit aloittaa sosiaalisen jakamispainikkeiden lisäämisen sovellukseesi. Tätä varten sinun on tuotava tarvittavat komponentit tiedostosta reagoi-jaa moduuli. Jos haluat esimerkiksi lisätä jaon Facebookiin, sinun on käytettävä seuraavaa koodia:

tuonti { FacebookShareButton } alkaen"reagoi-jaa";

Voit sitten käyttää FacebookShare-painike komponentti koodiisi lisätäksesi Jaa Facebookiin -painikkeen sovellukseesi.

tuonti Reagoi alkaen'reagoi';
tuonti { FacebookShareButton, FacebookIcon } alkaen"reagoi-jaa";
konst Sovellus = () => {
palata (
<div>
 url={' https://www.example.com'}
 lainaus={"Tyhmää tekstiä!"}
 hashtag="#muo"
 >
<Facebook-kuvakekoko={32}pyöristää />
FacebookShare-painike>
div>
 );
};
viedäoletuksena Sovellus;

Alla on tulos, joka näyttää Jaa Facebookiin -painikkeen:

Tässä koodissa sinun on ensin tuotava tarvittavat komponentit tiedostosta reagoi-jaa moduuli. Luo sen jälkeen toiminnallinen komponentti nimeltä Sovellus joka sisältää Facebookin jakamispainikkeen. The FacebookShare-painike komponenttia käytetään jakamispainikkeen luomiseen ja Facebook-kuvake komponenttia käytetään Facebook-logon näyttämiseen painikkeessa.

The FacebookShare-painikekomponentilla on useita rekvisiitta jota voidaan käyttää jakamispainikkeen mukauttamiseen. Tässä esimerkissä olemme määrittäneet url, lainata, ja Hashtag rekvisiitta.

Lopuksi sinun on vietävä Sovellus komponenttia, jotta sitä voidaan käyttää sovelluksemme muissa paikoissa. Kun Jaa Facebookiin -painiketta napsautetaan, se avaa esitäytetyn jakoikkunan, jossa on määritetyt tiedot url, lainata, ja Hashtag.

Facebookin lisäksi mm reagoi-jaa Moduuli tarjoaa myös komponentteja sosiaalisten jakopainikkeiden lisäämiseen useille muille alustoille, mukaan lukien Instagram, Twitter, LinkedIn ja monet muut.

Jos haluat lisätä some-painikkeen toiselle alustalle, sinun on tuotava tarvittavat komponentit reagoi-jaa moduuli. Jos esimerkiksi haluat lisätä Twitter-jakopainikkeen, sinun on ensin tuotava seuraavat:

tuonti { TwitterShareButton, TwitterIcon } alkaen"reagoi-jaa";

Voit sitten käyttää TwitterShareButton ja Twitter-kuvake koodissasi olevat komponentit lisätäksesi jako Twitteriin -painikkeen sovellukseesi.

 url={' https://www.example.com'}
 lainaus={"Tyhmää tekstiä!"}
 hashtag="#muo"
>
<Twitter-kuvakekoko={32}pyöristää />
TwitterShareButton>

Alla on tulos, joka näyttää jakamisen Facebookiin ja Jaa Twitteriin -painikkeet:

Kun napsautat Twitterin jakamispainiketta, se avaa esitäytetyn jakoikkunan, jossa on määritetty URL-osoite ja lainaus.

Painikkeiden mukauttaminen

Social share -painikkeen osissa on useita rekvisiitta, joita voit käyttää painikkeen mukauttamiseen. Joitakin saatavilla olevia rekvisiitta on:

  • url: Facebookissa jaettava URL-osoite
  • lainata: lainaus jaetaan Facebookissa
  • Hashtag: hashtag, joka lisätään jaettuun Facebook-julkaisuun

Löydät täydellisen luettelon saatavilla olevista sosiaalisen median jakamispainikkeista ja rekvisiittauksista reagoi-jaa virallinen dokumentaatio.

Hanki lisää näyttökertoja sosiaalisen median jakopainikkeilla

Sosiaalisen median jakopainikkeiden lisääminen React-sovellukseesi voi auttaa sinua lisäämään tavoittavuuttasi ja näkyvyyttäsi sosiaalisen median alustoilla. Tekemällä sisältösi jakamisen käyttäjien on helppoa, voit mahdollisesti tavoittaa suuremman yleisön ja ohjata lisää liikennettä sovellukseesi. Lisäksi sosiaalisen median jakamispainikkeet voivat myös auttaa lisäämään brändisi uskottavuutta ja arvovaltaa, sillä jakaminen voi toimia suosituksina sovelluksellesi.