Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Sosiale medier har blitt en integrert del av hverdagen vår og er en flott plattform for bedrifter å nå ut til kundene sine. Å legge til sosiale delingsknapper i React-appen din kan hjelpe deg med å øke rekkevidden og synligheten på sosiale medieplattformer. I denne artikkelen lærer du hvordan du enkelt kan legge til sosiale deleknapper i React-appen din.

Legge til sosiale delingsknapper i React-appen din

Før du begynner, må du ha en grunnleggende forståelse av React og hvordan sette opp en React-app. Du bør også ha en konto på de sosiale medieplattformene som du vil legge til deleknapper for.

Installere react-share-modulen

Det er flere tilgjengelige alternativer for å legge til sosiale deleknapper i React-appen din. Et alternativ er å bruke reagere-del modul, som er et lett og brukervennlig bibliotek for å legge til sosiale deleknapper i appen din. For å installere reagere-del modul, må du kjøre følgende kommando:

instagram viewer 
npm installere reagere-dele

Opprette en Del til Facebook-knapp

Når du har reagere-del modul installert, kan du begynne å legge til sosiale deleknapper i appen din. For å gjøre dette, må du importere de nødvendige komponentene fra reagere-del modul. For å legge til en del på Facebook-knapp, må du for eksempel bruke følgende kode:

import { FacebookShare Button } fra'reager-del';

Du kan da bruke FacebookShare-knapp komponenten i koden din for å legge til del til Facebook-knappen i appen din.

import Reagere fra'reagere';
import { FacebookShare Button, FacebookIcon } fra'reager-del';
konst App = () => {
komme tilbake (
<div>
 url={' https://www.example.com'}
 sitat={"Dummy tekst!"}
 hashtag="#muo"
 >
<Facebook-ikonstørrelse={32}rund />
FacebookShare-knapp>
div>
 );
};
eksportmisligholde App;

Nedenfor er utgangen som viser del til Facebook-knappen:

I denne koden må du først importere de nødvendige komponentene fra reagere-del modul. Etter det, lag en funksjonell komponent kalt App som inneholder Facebook-deleknappen. De FacebookShare-knapp komponenten brukes til å lage deleknappen og Facebook-ikon komponenten brukes til å vise Facebook-logoen på knappen.

De FacebookShare-knappkomponenten har flere rekvisitter som kan brukes til å tilpasse deleknappen. I dette eksemplet har vi spesifisert url, sitat, og emneknagg Rekvisitter.

Til slutt må du eksportere App komponent, slik at den kan brukes andre steder i appen vår. Når du klikker på del til Facebook-knappen, vil den åpne en forhåndsutfylt delingsdialog med den spesifiserte url, sitat, og emneknagg.

I tillegg til Facebook er reagere-del Modulen gir også komponenter for å legge til sosiale delingsknapper for flere andre plattformer, inkludert Instagram, Twitter, LinkedIn og mer.

For å legge til en sosial deleknapp for en annen plattform, må du importere de nødvendige komponentene fra reagere-del modul. For eksempel, for å legge til en Twitter-deleknapp, må du først importere følgende:

import { TwitterShareButton, TwitterIcon } fra'reager-del';

Du kan da bruke TwitterShare Button og TwitterIcon komponenter i koden din for å legge til del til Twitter-knappen i appen din.

 url={' https://www.example.com'}
 sitat={"Dummy tekst!"}
 hashtag="#muo"
>
<TwitterIconstørrelse={32}rund />
TwitterShare Button>

Nedenfor er utgangen som viser deling til Facebook og deling til Twitter-knapper:

Når du klikker på Twitter-deleknappen, vil den åpne en forhåndsutfylt delingsdialog med den angitte URL-en og sitatet.

Tilpasse knappene

Komponentene for sosiale deleknapper har flere rekvisitter som du kan bruke til å tilpasse knappen. Noen av de tilgjengelige rekvisittene inkluderer:

  • url: URL-en som skal deles på Facebook
  • sitat: sitatet som skal deles på Facebook
  • emneknagg: hashtaggen som skal legges til det delte innlegget på Facebook

Du kan finne en fullstendig liste over tilgjengelige sosiale deleknapper og rekvisitter i reagere-del offisiell dokumentasjon.

Få flere sidevisninger med sosiale deleknapper

Å legge til sosiale delingsknapper i React-appen din kan hjelpe deg med å øke rekkevidden og synligheten på sosiale medieplattformer. Ved å gjøre det enkelt for brukere å dele innholdet ditt, kan du potensielt nå ut til et større publikum og lede mer trafikk til appen din. I tillegg kan sosiale delingsknapper også bidra til å øke troverdigheten og autoriteten til merkevaren din, siden delinger kan fungere som anbefalinger for appen din.