Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A közösségi média mindennapi életünk szerves részévé vált, és nagyszerű platformot jelent a vállalkozások számára, hogy elérjék ügyfeleiket. Ha közösségi megosztás gombokat ad hozzá a React alkalmazáshoz, akkor növelheti az elérést és a láthatóságot a közösségi média platformokon. Ebből a cikkből megtudhatja, hogyan adhat hozzá egyszerűen közösségi megosztás gombokat a React alkalmazáshoz.

Közösségi megosztás gombok hozzáadása a React alkalmazáshoz

Mielőtt elkezdené, alapvető ismeretekkel kell rendelkeznie a Reactről és annak módjáról állítson be egy React alkalmazást. Ezenkívül rendelkeznie kell egy fiókkal a közösségi média platform(ok)on, amely(ek)hez megosztási gombokat szeretne hozzáadni.

A react-share modul telepítése

Számos lehetőség áll rendelkezésre közösségi megosztás gombok hozzáadásához a React alkalmazáshoz. Az egyik lehetőség a

instagram viewer
reagálni-megosztani modul, amely egy könnyű és könnyen használható könyvtár, amellyel közösségi megosztási gombokat adhat hozzá az alkalmazáshoz. A telepítéshez a reagálni-megosztani modult, a következő parancsot kell futtatnia:

npm telepítés reagál-Ossza meg

Megosztás a Facebookon gomb létrehozása

Ha egyszer megvan a reagálni-megosztani modul telepítve, elkezdheti közösségi megosztás gombok hozzáadását az alkalmazáshoz. Ehhez importálnia kell a szükséges összetevőket a reagálni-megosztani modult. Például egy megosztás Facebookhoz való hozzáadásához a következő kódot kell használnia:

import { FacebookShareButton } tól től'reagálni-megosztani';

Ezután használhatja a FacebookShareButton összetevőt a kódban, hogy hozzáadja a Facebookon megosztás gombot az alkalmazáshoz.

import Reagál tól től'reagál';
import { FacebookShareButton, FacebookIcon } tól től'reagálni-megosztani';
const App = () => {
Visszatérés (
<div>
 url={' https://www.example.com'}
 idézet={'Dummy text!'}
 hashtag="#muo"
 >
<FacebookIconméret={32}kerek />
FacebookShareButton>
div>
 );
};
exportalapértelmezett App;

Az alábbiakban látható a Facebookon megosztás gombot megjelenítő kimenet:

Ebben a kódban először importálnia kell a szükséges összetevőket a reagálni-megosztani modult. Ezt követően hozzon létre egy funkcionális komponenst App amely tartalmazza a Facebook megosztás gombját. A FacebookShareButton komponenst a megosztás gomb és a FacebookIcon komponens a Facebook logó megjelenítésére szolgál a gombon.

A FacebookShareButtonalkatrésznek több kelléke van amellyel a megosztás gomb testreszabható. Ebben a példában megadtuk a url, idézet, és kettőskereszt kellékek.

Végül exportálnia kell a App összetevőt, hogy az alkalmazásunk más helyein is használható legyen. Ha a Facebookon megosztás gombra kattint, megnyílik egy előre kitöltött megosztási párbeszédpanel a megadott adatokkal url, idézet, és kettőskereszt.

A Facebook mellett a reagálni-megosztani A modul olyan összetevőket is tartalmaz, amelyekkel közösségi megosztási gombokat adhat hozzá számos más platformhoz, köztük az Instagramhoz, a Twitterhez, a LinkedInhez és még sok máshoz.

Ha közösségi megosztási gombot szeretne hozzáadni egy másik platformhoz, importálnia kell a szükséges összetevőket a reagálni-megosztani modult. Például egy Twitter megosztási gomb hozzáadásához először importálnia kell a következőket:

import { TwitterShareButton, TwitterIcon } tól től'reagálni-megosztani';

Ezután használhatja a TwitterShareButton és TwitterIcon összetevőket a kódban, hogy hozzáadja a Twitteren megosztás gombot az alkalmazáshoz.

 url={' https://www.example.com'}
 idézet={'Dummy text!'}
 hashtag="#muo"
>
<TwitterIconméret={32}kerek />
TwitterShareButton>

Az alábbiakban látható a kimenet, amely megjeleníti a Facebookon és a Twitteren való megosztás gombjait:

Ha a Twitter megosztás gombra kattint, megnyílik egy előre kitöltött megosztási párbeszédpanel a megadott URL-lel és idézettel.

A gombok testreszabása

A közösségi megosztás gomb összetevőinek számos kelléke van, amelyek segítségével testreszabhatja a gombot. A rendelkezésre álló kellékek közül néhány:

  • url: a Facebookon megosztandó URL-t
  • idézet: a Facebookon megosztandó idézet
  • kettőskereszt: a Facebookon megosztott bejegyzéshez adandó hashtag

Az elérhető közösségi megosztási gombok és kellékek teljes listáját megtalálja a reagálni-megosztani hivatalos dokumentáció.

Több oldalmegtekintést érhet el a közösségi megosztás gombokkal

Ha közösségi megosztás gombokat ad hozzá a React alkalmazáshoz, akkor növelheti az elérést és a láthatóságot a közösségi média platformokon. Azáltal, hogy megkönnyíti a felhasználók számára a tartalom megosztását, potenciálisan nagyobb közönséget érhet el, és nagyobb forgalmat irányíthat az alkalmazására. Ezenkívül a közösségi megosztás gombjai segíthetnek növelni a márka hitelességét és tekintélyét, mivel a megosztások ajánlásokként szolgálhatnak az alkalmazás számára.