Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Sociale media zijn niet meer weg te denken uit ons dagelijks leven en vormen een geweldig platform voor bedrijven om hun klanten te bereiken. Door sociale deelknoppen aan uw React-app toe te voegen, kunt u uw bereik en zichtbaarheid op sociale mediaplatforms vergroten. In dit artikel leer je hoe je eenvoudig social share-knoppen kunt toevoegen in je React-app.

Social Share-knoppen toevoegen aan uw React-app

Voordat u aan de slag gaat, moet u een basiskennis hebben van React en hoe u dat moet doen stel een React-app in. Ook dient u een account te hebben op het social media platform(en) waarvoor u deelknoppen wilt toevoegen.

Installeren van de react-share-module

Er zijn verschillende opties beschikbaar voor het toevoegen van sociale deelknoppen aan uw React-app. Een optie is het gebruik van de reageren-delen module, een lichtgewicht en gebruiksvriendelijke bibliotheek voor het toevoegen van knoppen voor sociaal delen aan uw app. Om de te installeren

instagram viewer
reageren-delen module, moet u de volgende opdracht uitvoeren:

npm installeren Reageer-deel

Een Share to Facebook-knop maken

Zodra je de reageren-delen module geïnstalleerd, kunt u beginnen met het toevoegen van sociale deelknoppen aan uw app. Om dit te doen, moet u de vereiste componenten importeren uit het reageren-delen moduul. Om bijvoorbeeld een deel op Facebook-knop toe te voegen, moet u de volgende code gebruiken:

importeren {FacebookShareButton} van'reageer-deel';

U kunt dan gebruik maken van de Facebook Share-knop component in uw code om de knop Delen op Facebook aan uw app toe te voegen.

importeren Reageer van'Reageer';
importeren {FacebookShareButton, FacebookIcon} van'reageer-deel';
const App= () => {
opbrengst (
<div>
 url={' https://www.example.com'}
 citaat={'Dummy tekst!'}
 hashtag="#muo"
 >
<Facebook-pictogrammaat={32}ronde />
Facebook Share-knop>
div>
 );
};
exporterenstandaard App;

Hieronder ziet u de uitvoer met de knop Delen op Facebook:

In deze code moet je eerst de benodigde componenten uit het reageren-delen moduul. Maak daarna een functionele component met de naam app die de Facebook-deelknop bevat. De Facebook Share-knop component wordt gebruikt om de deelknop en de Facebook-pictogram component wordt gebruikt om het Facebook-logo op de knop weer te geven.

De Facebook Share-knoponderdeel heeft verschillende rekwisieten die kan worden gebruikt om de deelknop aan te passen. In dit voorbeeld hebben we de opgegeven url, citaat, En hashtag rekwisieten.

Ten slotte moet u het app onderdeel, zodat het op andere plaatsen van onze app kan worden gebruikt. Wanneer op de knop Delen op Facebook wordt geklikt, wordt een vooraf ingevuld dialoogvenster voor delen geopend met de opgegeven url, citaat, En hashtag.

Naast Facebook, de reageren-delen module biedt ook componenten voor het toevoegen van sociale deelknoppen voor verschillende andere platforms, waaronder Instagram, Twitter, LinkedIn en meer.

Als u een social share-knop voor een ander platform wilt toevoegen, moet u de vereiste componenten importeren uit de reageren-delen moduul. Om bijvoorbeeld een Twitter-deelknop toe te voegen, moet u eerst het volgende importeren:

importeren { TwitterShareButton, TwitterIcon } van'reageer-deel';

U kunt dan gebruik maken van de TwitterShare-knop En TwitterIcon componenten in uw code om de knop Delen op Twitter aan uw app toe te voegen.

 url={' https://www.example.com'}
 citaat={'Dummy tekst!'}
 hashtag="#muo"
>
<TwitterIconmaat={32}ronde />
TwitterShare-knop>

Hieronder ziet u de uitvoer met de knoppen Delen op Facebook en Delen op Twitter:

Wanneer u op de Twitter-deelknop klikt, wordt een vooraf ingevuld deelvenster geopend met de opgegeven URL en citaat.

De knoppen aanpassen

De componenten van de knop voor sociaal delen hebben verschillende rekwisieten die u kunt gebruiken om de knop aan te passen. Enkele van de beschikbare rekwisieten zijn:

  • url: de URL die op Facebook moet worden gedeeld
  • citaat: de quote die op Facebook wordt gedeeld
  • hashtag: de hashtag die moet worden toegevoegd aan het gedeelde bericht op Facebook

U vindt een volledige lijst met beschikbare social share-knoppen en rekwisieten in de reageren-delen officiële documentatie.

Krijg meer paginaweergaven met social share-knoppen

Door sociale deelknoppen aan uw React-app toe te voegen, kunt u uw bereik en zichtbaarheid op sociale mediaplatforms vergroten. Door het voor gebruikers gemakkelijk te maken om uw inhoud te delen, kunt u mogelijk een groter publiek bereiken en meer verkeer naar uw app leiden. Bovendien kunnen sociale deelknoppen ook helpen de geloofwaardigheid en autoriteit van uw merk te vergroten, aangezien aandelen kunnen fungeren als aanbevelingen voor uw app.