Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Социалните медии се превърнаха в неразделна част от нашето ежедневие и са чудесна платформа за бизнеса да достигне до своите клиенти. Добавянето на бутони за социално споделяне към вашето приложение React може да ви помогне да увеличите обхвата и видимостта си в социалните медийни платформи. В тази статия ще научите как можете лесно да добавяте бутони за социално споделяне във вашето приложение React.

Добавяне на бутони за социално споделяне към вашето приложение React

Преди да започнете, ще трябва да имате основно разбиране за React и как да го направите настройте приложение React. Трябва също така да имате акаунт в платформата(ите) на социалните медии, за които искате да добавите бутони за споделяне.

Инсталиране на модула за споделяне на реакции

Има няколко налични опции за добавяне на бутони за социално споделяне към вашето приложение React. Единият вариант е да използвате

instagram viewer
реагират-споделят модул, който е лека и лесна за използване библиотека за добавяне на бутони за социално споделяне към вашето приложение. За да инсталирате реагират-споделят модул, трябва да изпълните следната команда:

npm Инсталирай реагирам-дял

Създаване на бутон за споделяне във Facebook

След като имате реагират-споделят инсталиран модул, можете да започнете да добавяте бутони за социално споделяне към вашето приложение. За да направите това, ще трябва да импортирате необходимите компоненти от реагират-споделят модул. Например, за да добавите бутон за споделяне във Facebook, трябва да използвате следния код:

импортиране { FacebookShareButton } от"реагиране-споделяне";

След това можете да използвате FacebookShareButton компонент във вашия код, за да добавите бутона за споделяне във Facebook към вашето приложение.

импортиране Реагирайте от"реагира";
импортиране { FacebookShareButton, Facebook икона } от"реагиране-споделяне";
конст Приложение = () => {
връщане (
<див>
 url={' https://www.example.com'}
 цитат={„Фактичен текст!“}
 хаштаг="#muo"
 >
<Икона на Facebookразмер={32}кръгъл />
FacebookShareButton>
див>
 );
};
износпо подразбиране Приложение;

По-долу е изходът, показващ бутона за споделяне във Facebook:

В този код първо трябва да импортирате необходимите компоненти от реагират-споделят модул. След това създайте функционален компонент, наречен Приложение който съдържа бутона за споделяне във Facebook. The FacebookShareButton компонент се използва за създаване на бутона за споделяне и Икона на Facebook компонент се използва за показване на логото на Facebook върху бутона.

The FacebookShareButtonкомпонентът има няколко подпори който може да се използва за персонализиране на бутона за споделяне. В този пример сме посочили URL адрес, цитат, и хаштаг реквизит.

И накрая, трябва да експортирате Приложение компонент, така че да може да се използва на други места в нашето приложение. Когато се щракне върху бутона за споделяне във Facebook, ще се отвори предварително попълнен диалогов прозорец за споделяне с указаното URL адрес, цитат, и хаштаг.

В допълнение към Facebook, реагират-споделят модул също така предоставя компоненти за добавяне на бутони за социално споделяне за няколко други платформи, включително Instagram, Twitter, LinkedIn и др.

За да добавите бутон за социално споделяне за различна платформа, ще трябва да импортирате необходимите компоненти от реагират-споделят модул. Например, за да добавите бутон за споделяне в Twitter, първо трябва да импортирате следното:

импортиране { TwitterShareButton, TwitterIcon } от"реагиране-споделяне";

След това можете да използвате TwitterShareButton и Икона на Twitter компоненти във вашия код, за да добавите бутона за споделяне в Twitter към вашето приложение.

 url={' https://www.example.com'}
 цитат={„Фактичен текст!“}
 хаштаг="#muo"
>
<Икона на Twitterразмер={32}кръгъл />
TwitterShareButton>

По-долу е изходът, показващ бутоните за споделяне във Facebook и споделяне в Twitter:

Когато щракнете върху бутона за споделяне в Twitter, той ще отвори предварително попълнен диалогов прозорец за споделяне с посочения URL адрес и цитат.

Персонализиране на бутоните

Компонентите на бутона за социално споделяне имат няколко подпори, които можете да използвате, за да персонализирате бутона. Някои от наличните подпори включват:

  • URL адрес: URL адресът да бъде споделен във Facebook
  • цитат: цитатът да бъде споделен във Facebook
  • хаштаг: хаштагът да бъде добавен към споделената публикация във Facebook

Можете да намерите пълен списък на наличните бутони за социално споделяне и подпори в реагират-споделят официална документация.

Получете повече показвания на страници с бутони за социално споделяне

Добавянето на бутони за социално споделяне към вашето приложение React може да ви помогне да увеличите обхвата и видимостта си в социалните медийни платформи. Като улеснявате потребителите да споделят вашето съдържание, можете потенциално да достигнете до по-голяма аудитория и да привлечете повече трафик към приложението си. Освен това бутоните за споделяне в социалните мрежи също могат да помогнат за повишаване на доверието и авторитета на вашата марка, тъй като споделянията могат да действат като препоръки за вашето приложение.