Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Media społecznościowe stały się integralną częścią naszego codziennego życia i są świetną platformą dla firm do dotarcia do swoich klientów. Dodanie przycisków udostępniania społecznościowego do aplikacji React może pomóc w zwiększeniu zasięgu i widoczności 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ę na temat React i wiedzieć, jak to zrobić skonfigurować aplikację React. Powinieneś także mieć konto na platformie (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 tzw

Reaguj-udostępniaj module, który jest lekką i łatwą w użyciu biblioteką do dodawania przycisków udostępniania społecznościowego do Twojej aplikacji. Aby zainstalować Reaguj-udostępniaj moduł, musisz uruchomić następujące polecenie:

np zainstalować reagować-udział

Tworzenie przycisku Udostępnij na Facebooku

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

import { FacebookShareButton } z„reaguj – udostępniaj”;

Możesz wtedy użyć tzw FacebookUdostępnij komponent w swoim kodzie, aby dodać przycisk udostępniania na Facebooku do swojej aplikacji.

import Reagować z'reagować';
import { FacebookShareButton, FacebookIkona } z„reaguj – udostępniaj”;
konst Aplikacja = () => {
powrót (
<dz>
 adres URL={' https://www.example.com'}
 cytat={Fałszywy tekst!}
 hashtag="#muo"
 >
<FacebookIkonarozmiar={32}okrągły />
FacebookUdostępnij>
dz>
 );
};
eksportdomyślny Aplikacja;

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

W tym kodzie musisz najpierw zaimportować wymagane komponenty z pliku Reaguj-udostępniaj moduł. Następnie utwórz funkcjonalny komponent o nazwie Aplikacja który zawiera przycisk udostępniania na Facebooku. The FacebookUdostępnij komponent służy do tworzenia przycisku udostępniania i pliku FacebookIkona komponent służy do wyświetlania logo Facebooka na przycisku.

The FacebookUdostępnijkomponent ma kilka rekwizytów którego można użyć do dostosowania przycisku udostępniania. W tym przykładzie określiliśmy adres URL, cytat, I hashtag rekwizyty.

Na koniec musisz wyeksportować plik Aplikacja komponentu, 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ślonymi adres URL, cytat, I hashtag.

Oprócz Facebooka, Reaguj-udostępniaj moduł udostępnia 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 Reaguj-udostępniaj moduł. Na przykład, aby dodać przycisk udostępniania na Twitterze, musisz najpierw zaimportować następujące elementy:

import { TwitterShareButton, TwitterIcon } z„reaguj – udostępniaj”;

Możesz wtedy użyć tzw Przycisk Udostępnij na Twitterze I TwitterIkona komponenty w swoim kodzie, aby dodać przycisk udostępniania na Twitterze do swojej aplikacji.

 adres URL={' https://www.example.com'}
 cytat={Fałszywy tekst!}
 hashtag="#muo"
>
<TwitterIkonarozmiar={32}okrągły />
Przycisk Udostępnij na Twitterze>

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:

  • Adres URL: adres URL do udostępnienia na Facebooku
  • cytat: cytat do udostępnienia na Facebooku
  • hashtag: hashtag, który ma zostać 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 sekcji Reaguj-udostępniaj oficjalna dokumentacja.

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

Dodanie przycisków udostępniania społecznościowego do aplikacji React może pomóc w zwiększeniu zasięgu i widoczności 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.