Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Sociálne médiá sa stali neoddeliteľnou súčasťou nášho každodenného života a sú skvelou platformou pre firmy, ako osloviť svojich zákazníkov. Pridanie tlačidiel zdieľania na sociálnych sieťach do aplikácie React vám môže pomôcť zvýšiť dosah a viditeľnosť na platformách sociálnych médií. V tomto článku sa dozviete, ako môžete jednoducho pridať tlačidlá zdieľania na sociálnych sieťach do aplikácie React.

Pridanie tlačidiel zdieľania na sociálnych sieťach do aplikácie React

Skôr ako začnete, musíte mať základné znalosti o React a ako na to nastaviť aplikáciu React. Mali by ste mať aj účet na platforme sociálnych médií, pre ktoré chcete pridať tlačidlá zdieľania.

Inštalácia modulu reakčného zdieľania

Existuje niekoľko možností, ako pridať tlačidlá zdieľania na sociálnych sieťach do aplikácie React. Jednou z možností je použiť reagovať-zdieľať modul, čo je ľahká a ľahko použiteľná knižnica na pridávanie tlačidiel zdieľania na sociálnych sieťach do vašej aplikácie. Ak chcete nainštalovať

instagram viewer
reagovať-zdieľať modul, musíte spustiť nasledujúci príkaz:

npm Inštalácia reagovať-zdieľam

Vytvorenie tlačidla zdieľania na Facebooku

Akonáhle budete mať reagovať-zdieľať nainštalovaný modul, môžete do svojej aplikácie začať pridávať tlačidlá zdieľania na sociálnych sieťach. Ak to chcete urobiť, budete musieť importovať požadované komponenty z reagovať-zdieľať modul. Ak chcete napríklad pridať zdieľanie na tlačidlo Facebook, musíte použiť nasledujúci kód:

importovať { FacebookShareButton } od'react-share';

Potom môžete použiť FacebookShareButton vo vašom kóde na pridanie tlačidla zdieľania na Facebooku do vašej aplikácie.

importovať Reagovať od'reagovať';
importovať { FacebookShareButton, FacebookIcon } od'react-share';
konšt Aplikácia = () => {
vrátiť (
<div>
 url={' https://www.example.com'}
 citát={"Nepravý text!"}
 hashtag="#muo"
 >
<Ikona Facebookuveľkosť={32}okrúhly />
FacebookShareButton>
div>
 );
};
exportpredvolená App;

Nižšie je uvedený výstup zobrazujúci tlačidlo zdieľania na Facebooku:

V tomto kóde musíte najprv importovať požadované komponenty z reagovať-zdieľať modul. Potom vytvorte funkčný komponent tzv App ktorý obsahuje tlačidlo zdieľania na Facebooku. The FacebookShareButton komponent sa používa na vytvorenie tlačidla zdieľania a Ikona Facebooku komponent slúži na zobrazenie loga Facebooku na tlačidle.

The FacebookShareButtonkomponent má niekoľko rekvizít ktoré možno použiť na prispôsobenie tlačidla zdieľania. V tomto príklade sme špecifikovali url, citovať, a mriežka rekvizity.

Nakoniec musíte exportovať App komponent, aby sa dal použiť na iných miestach našej aplikácie. Po kliknutí na tlačidlo zdieľania na Facebooku sa otvorí predvyplnené dialógové okno zdieľania so zadanými údajmi url, citovať, a mriežka.

Okrem Facebooku, reagovať-zdieľať modul tiež poskytuje komponenty na pridávanie tlačidiel zdieľania na sociálnych sieťach pre niekoľko ďalších platforiem vrátane Instagramu, Twitteru, LinkedInu a ďalších.

Ak chcete pridať tlačidlo zdieľania na sociálnej sieti pre inú platformu, budete musieť importovať požadované komponenty z reagovať-zdieľať modul. Ak chcete napríklad pridať tlačidlo zdieľania na Twitteri, musíte najprv importovať nasledujúce položky:

importovať { TwitterShareButton, TwitterIcon } od'react-share';

Potom môžete použiť TwitterShareButton a Ikona Twitteru komponenty vo vašom kóde na pridanie tlačidla zdieľania na Twitteri do vašej aplikácie.

 url={' https://www.example.com'}
 citát={"Nepravý text!"}
 hashtag="#muo"
>
<Ikona Twitteruveľkosť={32}okrúhly />
TwitterShareButton>

Nižšie je uvedený výstup zobrazujúci tlačidlá zdieľania na Facebooku a zdieľania na Twitteri:

Keď kliknete na tlačidlo zdieľania na Twitteri, otvorí sa predvyplnené dialógové okno zdieľania so zadanou adresou URL a citátom.

Prispôsobenie tlačidiel

Komponenty tlačidla zdieľania na sociálnych sieťach majú niekoľko rekvizít, pomocou ktorých môžete tlačidlo prispôsobiť. Niektoré z dostupných rekvizít zahŕňajú:

  • url: adresu URL, ktorá sa má zdieľať na Facebooku
  • citat: citát, ktorý sa má zdieľať na Facebooku
  • mriežka: hashtag, ktorý sa pridá k zdieľanému príspevku na Facebooku

Úplný zoznam dostupných tlačidiel a rekvizít na zdieľanie na sociálnych sieťach nájdete v reagovať-zdieľať oficiálna dokumentácia.

Získajte viac zobrazení stránky pomocou tlačidiel zdieľania na sociálnych sieťach

Pridanie tlačidiel zdieľania na sociálnych sieťach do aplikácie React vám môže pomôcť zvýšiť dosah a viditeľnosť na platformách sociálnych médií. Tým, že používateľom uľahčíte zdieľanie vášho obsahu, môžete potenciálne osloviť väčšie publikum a zvýšiť návštevnosť svojej aplikácie. Tlačidlá zdieľania na sociálnych sieťach môžu navyše pomôcť zvýšiť dôveryhodnosť a autoritu vašej značky, pretože zdieľania môžu slúžiť ako odporúčania pre vašu aplikáciu.