Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Soziale Medien sind zu einem festen Bestandteil unseres täglichen Lebens geworden und eine großartige Plattform für Unternehmen, um ihre Kunden zu erreichen. Das Hinzufügen von Social-Share-Buttons zu Ihrer React-App kann Ihnen helfen, Ihre Reichweite und Sichtbarkeit auf Social-Media-Plattformen zu erhöhen. In diesem Artikel erfährst du, wie du ganz einfach Social-Share-Buttons in deiner React-App hinzufügen kannst.

Hinzufügen von Schaltflächen zum Teilen in sozialen Netzwerken zu Ihrer React-App

Bevor Sie beginnen, müssen Sie ein grundlegendes Verständnis von React und der Vorgehensweise haben Richten Sie eine React-App ein. Sie sollten auch ein Konto auf der/den Social-Media-Plattform(en) haben, für die Sie Share-Buttons hinzufügen möchten.

Installieren des React-Share-Moduls

Es stehen mehrere Optionen zum Hinzufügen von Schaltflächen zum Teilen in sozialen Netzwerken zu Ihrer React-App zur Verfügung. Eine Möglichkeit ist die Verwendung von

Reagieren-Teilen -Modul, eine leichtgewichtige und benutzerfreundliche Bibliothek zum Hinzufügen von Social-Share-Buttons zu Ihrer App. Zur Installation der Reagieren-Teilen Modul müssen Sie den folgenden Befehl ausführen:

npm Installieren reagieren-Aktie

Erstellen einer „Auf Facebook teilen“-Schaltfläche

Sobald Sie die haben Reagieren-Teilen Wenn das Modul installiert ist, können Sie damit beginnen, Social-Share-Buttons zu Ihrer App hinzuzufügen. Dazu müssen Sie die erforderlichen Komponenten aus der importieren Reagieren-Teilen Modul. Um beispielsweise eine Schaltfläche zum Teilen auf Facebook hinzuzufügen, müssen Sie den folgenden Code verwenden:

importieren {FacebookShareButton} aus'reagieren teilen';

Sie können dann die verwenden FacebookShareButton Komponente in Ihrem Code, um die Schaltfläche „Auf Facebook teilen“ zu Ihrer App hinzuzufügen.

importieren Reagieren aus'reagieren';
importieren { FacebookShareButton, FacebookIcon } aus'reagieren teilen';
konst Anwendung = () => {
zurückkehren (
<div>
 url={' https://www.example.com'}
 Zitat={'Dummer Text!'}
 Hashtag="#muo"
 >
<FacebookIconGröße={32}runden />
FacebookShareButton>
div>
 );
};
ExportStandard Anwendung;

Unten ist die Ausgabe, die die Schaltfläche „Auf Facebook teilen“ anzeigt:

In diesen Code müssen Sie zunächst die benötigten Komponenten aus der importieren Reagieren-Teilen Modul. Erstellen Sie danach eine funktionale Komponente namens App die den Facebook-Share-Button enthält. Der FacebookShareButton Komponente wird verwendet, um die Share-Schaltfläche und die zu erstellen FacebookIcon Komponente wird verwendet, um das Facebook-Logo auf der Schaltfläche darzustellen.

Der FacebookShareButtonKomponente hat mehrere Requisiten die verwendet werden können, um den Teilen-Button anzupassen. In diesem Beispiel haben wir die angegeben URL, zitieren, Und Hashtag Requisiten.

Schließlich müssen Sie die exportieren App Komponente, damit sie an anderen Stellen unserer App verwendet werden kann. Wenn auf die Schaltfläche „Auf Facebook teilen“ geklickt wird, öffnet sich ein vorausgefüllter Freigabedialog mit den angegebenen URL, zitieren, Und Hashtag.

Neben Facebook ist die Reagieren-Teilen Das Modul bietet auch Komponenten zum Hinzufügen von Social-Share-Buttons für mehrere andere Plattformen, darunter Instagram, Twitter, LinkedIn und mehr.

Um eine Social-Share-Schaltfläche für eine andere Plattform hinzuzufügen, müssen Sie die erforderlichen Komponenten aus importieren Reagieren-Teilen Modul. Um beispielsweise einen Twitter-Teilen-Button hinzuzufügen, müssen Sie zunächst Folgendes importieren:

importieren { TwitterShareButton, TwitterIcon } aus'reagieren teilen';

Sie können dann die verwenden TwitterShareButton Und TwitterIcon Komponenten in Ihrem Code, um die Schaltfläche „Auf Twitter teilen“ zu Ihrer App hinzuzufügen.

 url={' https://www.example.com'}
 Zitat={'Dummer Text!'}
 Hashtag="#muo"
>
<TwitterIconGröße={32}runden />
TwitterShareButton>

Unten ist die Ausgabe, die die Schaltflächen „Auf Facebook teilen“ und „Auf Twitter teilen“ anzeigt:

Wenn Sie auf die Twitter-Freigabeschaltfläche klicken, wird ein vorausgefüllter Freigabedialog mit der angegebenen URL und dem Zitat geöffnet.

Anpassen der Schaltflächen

Die Social-Share-Button-Komponenten verfügen über mehrere Requisiten, mit denen Sie den Button anpassen können. Einige der verfügbaren Requisiten sind:

  • URL: die URL, die auf Facebook geteilt werden soll
  • zitieren: das Zitat auf Facebook geteilt werden
  • Hashtag: das Hashtag, das dem geteilten Beitrag auf Facebook hinzugefügt werden soll

Eine vollständige Liste der verfügbaren Social-Share-Buttons und Requisiten finden Sie in der Reagieren-Teilen amtliche Dokumentation.

Erhalten Sie mehr Seitenaufrufe mit Social Share-Buttons

Das Hinzufügen von Social-Share-Buttons zu Ihrer React-App kann Ihnen helfen, Ihre Reichweite und Sichtbarkeit auf Social-Media-Plattformen zu erhöhen. Indem Sie es den Benutzern erleichtern, Ihre Inhalte zu teilen, können Sie möglicherweise ein größeres Publikum erreichen und mehr Zugriffe auf Ihre App lenken. Darüber hinaus können Social Share-Buttons auch dazu beitragen, die Glaubwürdigkeit und Autorität Ihrer Marke zu erhöhen, da Shares als Empfehlungen für Ihre App dienen können.