Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

Добавление кнопок социальных сетей в ваше приложение React

Прежде чем приступить к работе, вам необходимо иметь общее представление о React и о том, как настроить приложение React. У вас также должна быть учетная запись в социальной сети, для которой вы хотите добавить кнопки «Поделиться».

Установка модуля React-Share

Существует несколько вариантов добавления кнопок социальных сетей в ваше приложение React. Один из вариантов — использовать реакция-поделиться модуль, который представляет собой легкую и простую в использовании библиотеку для добавления кнопок социальных сетей в ваше приложение. Чтобы установить

instagram viewer
реакция-поделиться модуль, вам нужно выполнить следующую команду:

нпм установить реагировать-делиться

Создание кнопки «Поделиться в Facebook»

Как только у вас есть реакция-поделиться модуль установлен, вы можете начать добавлять кнопки социальных сетей в свое приложение. Для этого вам необходимо импортировать необходимые компоненты из реакция-поделиться модуль. Например, чтобы добавить кнопку «Поделиться в Facebook», вам нужно использовать следующий код:

Импортировать {Кнопка "Поделиться в Facebook"} от'реагировать-поделиться';

Затем вы можете использовать FacebookПоделитьсяКнопка компонент в вашем коде, чтобы добавить кнопку «Поделиться в Facebook» в ваше приложение.

Импортировать Реагировать от«реагировать»;
Импортировать {кнопка FacebookShareButton, значок Facebook} от'реагировать-поделиться';
константа Приложение = () => {
возвращаться (
<див>
 URL={' https://www.example.com'}
 цитата={«Фиктивный текст!»}
 хэштег="#муо"
 >
<значок Facebookразмер={32}круглый />
FacebookПоделитьсяКнопка>
див>
 );
};
экспортпо умолчанию Приложение;

Ниже приведен вывод, отображающий кнопку «Поделиться в Facebook»:

В этом коде сначала нужно импортировать необходимые компоненты из реакция-поделиться модуль. После этого создайте функциональный компонент с именем Приложение который содержит кнопку «Поделиться в Facebook». FacebookПоделитьсяКнопка компонент используется для создания кнопки «Поделиться» и значок Facebook Компонент используется для отображения логотипа Facebook на кнопке.

FacebookПоделитьсяКнопкакомпонент имеет несколько реквизитов который можно использовать для настройки кнопки «Поделиться». В этом примере мы указали URL, цитировать, и хэштег реквизит.

Наконец, вам нужно экспортировать Приложение компонент, чтобы его можно было использовать в других местах нашего приложения. При нажатии кнопки «Поделиться в Facebook» открывается предварительно заполненное диалоговое окно «Поделиться» с указанным URL, цитировать, и хэштег.

Помимо Facebook, реакция-поделиться Модуль также предоставляет компоненты для добавления кнопок социальных сетей для нескольких других платформ, включая Instagram, Twitter, LinkedIn и другие.

Чтобы добавить кнопку социальных сетей для другой платформы, вам необходимо импортировать необходимые компоненты из реакция-поделиться модуль. Например, чтобы добавить кнопку «Поделиться в Твиттере», сначала необходимо импортировать следующее:

Импортировать {Кнопка TwitterShareButton, значок Twitter} от'реагировать-поделиться';

Затем вы можете использовать TwitterПоделитьсяКнопка и TwitterЗначок компоненты в вашем коде, чтобы добавить кнопку «Поделиться в Twitter» в ваше приложение.

 URL={' https://www.example.com'}
 цитата={«Фиктивный текст!»}
 хэштег="#муо"
>
<TwitterЗначокразмер={32}круглый />
TwitterПоделитьсяКнопка>

Ниже приведен вывод, отображающий кнопки «Поделиться в Facebook» и «Поделиться в Twitter»:

Когда вы нажимаете кнопку «Поделиться в Твиттере», открывается предварительно заполненное диалоговое окно «Поделиться» с указанным URL-адресом и цитатой.

Настройка кнопок

Компоненты кнопки «Поделиться в социальных сетях» имеют несколько реквизитов, которые можно использовать для настройки кнопки. Некоторые из доступных реквизитов включают в себя:

  • URL: URL-адрес для публикации на Facebook
  • цитировать: цитата для публикации на Facebook
  • хэштег: хэштег, который будет добавлен к общему посту на Facebook

Вы можете найти полный список доступных кнопок социальных сетей и реквизитов в реакция-поделиться официальная документация.

Получите больше просмотров страниц с помощью кнопок социальных сетей

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