Jak dodać przyciski udostępniania społecznościowego do swojej aplikacji React

Media społecznościowe stały się integralną częścią naszego codziennego życia i są świetną platformą dla firm do docierania do klientów. Dodanie przycisków udostępniania społecznościowego do aplikacji React może pomóc Ci zwiększyć zasięg i widoczność na platformach społecznościowych. Z tego artykułu dowiesz się, jak łatwo dodawać przyciski udostępniania społecznościowego w aplikacji React.

Dodawanie przycisków udostępniania społecznościowego do aplikacji React

Zanim zaczniesz, musisz mieć podstawową wiedzę o React i o tym, jak skonfigurować aplikację React. Powinieneś także mieć konto na platformach mediów społecznościowych, dla których chcesz dodać przyciski udostępniania.

Instalowanie modułu React-Share

Dostępnych jest kilka opcji dodawania przycisków udostępniania społecznościowego do aplikacji React. Jedną z opcji jest użycie modułu react-share , który jest lekką i łatwą w użyciu biblioteką do dodawania przycisków udostępniania społecznościowego do Twojej aplikacji. Aby zainstalować moduł react-share , musisz uruchomić następującą komendę:

npm install react-share

Tworzenie przycisku Udostępnij na Facebooku

Po zainstalowaniu modułu react-share możesz zacząć dodawać przyciski udostępniania społecznościowego do swojej aplikacji. Aby to zrobić, musisz zaimportować wymagane komponenty z modułu react-share . Na przykład, aby dodać przycisk udostępnij do Facebooka, musisz użyć następującego kodu:

import { FacebookShareButton } from 'react-share';

Następnie możesz użyć komponentu FacebookShareButton w swoim kodzie, aby dodać przycisk udostępniania do Facebooka do swojej aplikacji.

import React from 'react';
import { FacebookShareButton, FacebookIcon } from 'react-share';


const App = () => {
  return (
    <div>
      <FacebookShareButton
        url={'https://www.example.com'}
        quote={'Dummy text!'}
        hashtag="#muo"
      >
        <FacebookIcon size={32} round />
      </FacebookShareButton>
    </div>
  );
};

export default App;

Poniżej znajduje się wyjście wyświetlające przycisk udostępniania na Facebooku:

W tym kodzie musisz najpierw zaimportować wymagane komponenty z modułu react-share . Następnie utwórz funkcjonalny komponent o nazwie App , który zawiera przycisk udostępniania na Facebooku. Komponent FacebookShareButton służy do tworzenia przycisku udostępniania, a komponent FacebookIcon służy do wyświetlania logo Facebooka na przycisku.

Komponent FacebookShareButton ma kilka rekwizytów, których można użyć do dostosowania przycisku udostępniania. W tym przykładzie określiliśmy rekwizyty url , quote i hashtag .

Na koniec musisz wyeksportować komponent aplikacji , aby można go było używać w innych miejscach naszej aplikacji. Po kliknięciu przycisku udostępniania na Facebooku otworzy się wstępnie wypełnione okno dialogowe udostępniania z określonym adresem URL , cytatem i hashtagiem .

Tworzenie przycisków udostępniania społecznościowego dla innych platform mediów społecznościowych

Oprócz Facebooka, moduł React-Share zapewnia również komponenty do dodawania przycisków udostępniania społecznościowego dla kilku innych platform, w tym Instagram, Twitter, LinkedIn i innych.

Aby dodać przycisk udostępniania społecznościowego dla innej platformy, musisz zaimportować wymagane komponenty z modułu react-share . Na przykład, aby dodać przycisk udostępniania na Twitterze, musisz najpierw zaimportować następujące elementy:

import { TwitterShareButton, TwitterIcon } from 'react-share';

Następnie możesz użyć komponentów TwitterShareButton i TwitterIcon w swoim kodzie, aby dodać przycisk udostępniania do Twittera do swojej aplikacji.

<TwitterShareButton
  url={'https://www.example.com'}
  quote={'Dummy text!'}
  hashtag="#muo"
>
  <TwitterIcon size={32} round />
</TwitterShareButton>

Poniżej znajduje się wyjście wyświetlające przyciski udostępniania na Facebooku i udostępniania na Twitterze:

Po kliknięciu przycisku udostępniania na Twitterze otworzy się wstępnie wypełnione okno dialogowe udostępniania z określonym adresem URL i cytatem.

Dostosowywanie przycisków

Komponenty przycisku udostępniania społecznościowego mają kilka rekwizytów, których można użyć do dostosowania przycisku. Niektóre z dostępnych rekwizytów to:

• url: adres URL do udostępnienia na Facebooku
• cytat: cytat do udostępnienia na Facebooku
• hashtag: hashtag, który zostanie dodany do udostępnionego posta na Facebooku

Pełną listę dostępnych przycisków udostępniania społecznościowego i rekwizytów można znaleźć w oficjalnej dokumentacji dotyczącej udostępniania reakcji .

Uzyskaj więcej wyświetleń strony dzięki przyciskom udostępniania społecznościowego

Dodanie przycisków udostępniania społecznościowego do aplikacji React może pomóc Ci zwiększyć zasięg i widoczność na platformach społecznościowych. Ułatwiając użytkownikom udostępnianie treści, możesz potencjalnie dotrzeć do większej liczby odbiorców i zwiększyć ruch w swojej aplikacji. Ponadto przyciski udostępniania w mediach społecznościowych mogą również pomóc w zwiększeniu wiarygodności i autorytetu Twojej marki, ponieważ udostępnianie może działać jako rekomendacja dla Twojej aplikacji.