Поиск по сайту:

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


Кнопки социальных сетей могут помочь вам привлечь больше трафика в ваше приложение.

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

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

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

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

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

npm install react-share

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

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

import { FacebookShareButton } from 'react-share';

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

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;

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

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

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

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

Создание кнопок социальных сетей для других платформ социальных сетей

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

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

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

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

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

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

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

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

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

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

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

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

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

Статьи по данной тематике: