Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Sociální média se staly nedílnou součástí našeho každodenního života a jsou skvělou platformou pro firmy, jak oslovit své zákazníky. Přidání tlačítek pro sdílení na sociálních sítích do vaší aplikace React vám může pomoci zvýšit váš dosah a viditelnost na platformách sociálních médií. V tomto článku se dozvíte, jak můžete do aplikace React snadno přidat tlačítka pro sdílení na sociálních sítích.

Přidání tlačítek pro sdílení na sociálních sítích do aplikace React

Než začnete, musíte mít základní znalosti o Reactu a jak na to nastavit aplikaci React. Měli byste mít také účet na platformě (platformách) sociálních médií, pro které chcete přidat tlačítka pro sdílení.

Instalace modulu reagovat sdílení

Existuje několik možností, jak přidat tlačítka pro sdílení na sociálních sítích do vaší aplikace React. Jednou z možností je použít reagovat-sdílet

instagram viewer
modul, což je lehká a snadno použitelná knihovna pro přidávání tlačítek pro sdílení na sociálních sítích do vaší aplikace. Chcete-li nainstalovat reagovat-sdílet modulu, musíte spustit následující příkaz:

npm Nainstalujte reagovat-podíl

Vytvoření tlačítka sdílení na Facebooku

Jakmile budete mít reagovat-sdílet nainstalovaný modul, můžete do své aplikace začít přidávat tlačítka pro sdílení na sociálních sítích. Chcete-li to provést, budete muset importovat požadované součásti z reagovat-sdílet modul. Chcete-li například přidat sdílení na tlačítko Facebook, musíte použít následující kód:

import { FacebookShareButton } z'reagovat-sdílet';

Poté můžete použít FacebookShareButton komponentu ve vašem kódu pro přidání tlačítka sdílení na Facebooku do vaší aplikace.

import Reagovat z'reagovat';
import { FacebookShareButton, FacebookIcon } z'reagovat-sdílet';
konst Aplikace = () => {
vrátit se (
<div>
 url={' https://www.example.com'}
 citát={"Divný text!"}
 hashtag="#muo"
 >
<Ikona Facebookuvelikost={32}kolo />
FacebookShareButton>
div>
 );
};
vývoznívýchozí Aplikace;

Níže je výstup zobrazující tlačítko sdílení na Facebooku:

V tomto kódu musíte nejprve importovat požadované komponenty z reagovat-sdílet modul. Poté vytvořte funkční komponentu tzv Aplikace který obsahuje tlačítko pro sdílení na Facebooku. The FacebookShareButton komponenta se používá k vytvoření tlačítka sdílení a Ikona Facebooku komponenta slouží k zobrazení loga Facebooku na tlačítku.

The FacebookShareButtonkomponenta má několik rekvizit které lze použít k přizpůsobení tlačítka sdílení. V tomto příkladu jsme specifikovali url, citát, a hashtag rekvizity.

Nakonec musíte exportovat Aplikace komponentu, aby ji bylo možné použít na jiných místech naší aplikace. Po kliknutí na tlačítko sdílení na Facebooku se otevře předvyplněný dialog sdílení se zadanými údaji url, citát, a hashtag.

Kromě Facebooku, reagovat-sdílet modul také poskytuje komponenty pro přidávání tlačítek pro sdílení na sociálních sítích pro několik dalších platforem, včetně Instagramu, Twitteru, LinkedInu a dalších.

Chcete-li přidat tlačítko sociálního sdílení pro jinou platformu, budete muset importovat požadované součásti z reagovat-sdílet modul. Chcete-li například přidat tlačítko sdílení na Twitteru, musíte nejprve importovat následující:

import { TwitterShareButton, TwitterIcon } z'reagovat-sdílet';

Poté můžete použít TwitterShareButton a Ikona Twitteru komponenty ve vašem kódu a přidejte do aplikace tlačítko sdílení na Twitteru.

 url={' https://www.example.com'}
 citát={"Divný text!"}
 hashtag="#muo"
>
<Ikona Twitteruvelikost={32}kolo />
TwitterShareButton>

Níže je výstup zobrazující tlačítka sdílení na Facebooku a sdílení na Twitteru:

Když kliknete na tlačítko sdílení na Twitteru, otevře se předvyplněné dialogové okno sdílení se zadanou adresou URL a citací.

Přizpůsobení tlačítek

Komponenty tlačítka pro sdílení na sociálních sítích mají několik rekvizit, které můžete použít k přizpůsobení tlačítka. Některé z dostupných rekvizit zahrnují:

  • url: adresu URL, kterou chcete sdílet na Facebooku
  • citát: citát ke sdílení na Facebooku
  • hashtag: hashtag, který se přidá ke sdílenému příspěvku na Facebooku

Úplný seznam dostupných tlačítek a rekvizit pro sdílení na sociálních sítích naleznete v reagovat-sdílet oficiální dokumentace.

Získejte více zobrazení stránek pomocí tlačítek pro sdílení na sociálních sítích

Přidání tlačítek pro sdílení na sociálních sítích do vaší aplikace React vám může pomoci zvýšit váš dosah a viditelnost na platformách sociálních médií. Usnadníte-li uživatelům sdílení vašeho obsahu, můžete potenciálně oslovit větší publikum a zvýšit návštěvnost své aplikace. Tlačítka pro sdílení na sociálních sítích mohou navíc pomoci zvýšit důvěryhodnost a autoritu vaší značky, protože sdílení může sloužit jako doporučení pro vaši aplikaci.