Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Sociala medier har blivit en integrerad del av vårt dagliga liv och är en bra plattform för företag att nå ut till sina kunder. Att lägga till sociala delningsknappar i din React-app kan hjälpa dig att öka din räckvidd och synlighet på sociala medieplattformar. I den här artikeln får du lära dig hur du enkelt kan lägga till sociala delningsknappar i din React-app.

Lägga till sociala delningsknappar i din React-app

Innan du börjar måste du ha en grundläggande förståelse för React och hur man gör konfigurera en React-app. Du bör också ha ett konto på de sociala medieplattformarna som du vill lägga till delningsknappar för.

Installation av react-share-modulen

Det finns flera tillgängliga alternativ för att lägga till sociala delningsknappar i din React-app. Ett alternativ är att använda reagera-dela modul, som är ett lätt och lättanvänt bibliotek för att lägga till sociala delningsknappar i din app. För att installera

instagram viewer
reagera-dela modul måste du köra följande kommando:

npm Installera reagera-dela med sig

Skapa en Dela till Facebook-knapp

När du väl har reagera-dela modulen installerad kan du börja lägga till sociala delningsknappar i din app. För att göra detta måste du importera de nödvändiga komponenterna från reagera-dela modul. Till exempel, för att lägga till en delningsknapp på Facebook, måste du använda följande kod:

importera { FacebookShareButton } från'reagera-dela';

Du kan sedan använda FacebookShare Button komponenten i din kod för att lägga till knappen Dela till Facebook i din app.

importera Reagera från'reagera';
importera { FacebookShareButton, FacebookIcon } från'reagera-dela';
konst App = () => {
lämna tillbaka (
<div>
 url={' https://www.example.com'}
 citat={"Dummy text!"}
 hashtag="#muo"
 >
<Facebookikonstorlek={32}runda />
FacebookShare Button>
div>
 );
};
exporterastandard App;

Nedan är utgången som visar knappen Dela till Facebook:

I den här koden måste du först importera de nödvändiga komponenterna från reagera-dela modul. Efter det skapar du en funktionell komponent som heter App som innehåller Facebook-delningsknappen. De FacebookShare Button komponenten används för att skapa delningsknappen och Facebookikon komponenten används för att visa Facebook-logotypen på knappen.

De FacebookShare Buttonkomponenten har flera rekvisita som kan användas för att anpassa dela-knappen. I det här exemplet har vi specificerat url, Citat, och hashtag rekvisita.

Slutligen måste du exportera App komponent, så att den kan användas på andra platser i vår app. När du klickar på knappen dela till Facebook öppnas en förifylld delningsdialog med den angivna url, Citat, och hashtag.

Förutom Facebook, den reagera-dela Modulen tillhandahåller också komponenter för att lägga till sociala delningsknappar för flera andra plattformar, inklusive Instagram, Twitter, LinkedIn och mer.

För att lägga till en social delningsknapp för en annan plattform måste du importera de nödvändiga komponenterna från reagera-dela modul. Till exempel, för att lägga till en Twitter-delningsknapp måste du först importera följande:

importera { TwitterShareButton, TwitterIcon } från'reagera-dela';

Du kan sedan använda TwitterShare Button och TwitterIcon komponenter i din kod för att lägga till knappen Dela till Twitter i din app.

 url={' https://www.example.com'}
 citat={"Dummy text!"}
 hashtag="#muo"
>
<TwitterIconstorlek={32}runda />
TwitterShare Button>

Nedan visas utgången som visar knapparna för delning till Facebook och dela till Twitter:

När du klickar på Twitter-delningsknappen öppnas en förifylld delningsdialog med angiven URL och citat.

Anpassa knapparna

Komponenterna för sociala delningsknappar har flera rekvisita som du kan använda för att anpassa knappen. Några av de tillgängliga rekvisita inkluderar:

  • url: webbadressen som ska delas på Facebook
  • Citat: citatet som ska delas på Facebook
  • hashtag: hashtaggen som ska läggas till det delade inlägget på Facebook

Du kan hitta en fullständig lista över tillgängliga sociala delningsknappar och rekvisita i reagera-dela officiell dokumentation.

Få fler sidvisningar med sociala delningsknappar

Att lägga till sociala delningsknappar i din React-app kan hjälpa dig att öka din räckvidd och synlighet på sociala medieplattformar. Genom att göra det enkelt för användare att dela ditt innehåll kan du potentiellt nå en större publik och leda mer trafik till din app. Dessutom kan sociala delningsknappar också hjälpa till att öka ditt varumärkes trovärdighet och auktoritet, eftersom aktier kan fungera som rekommendationer för din app.