Como adicionar botões de compartilhamento social ao seu aplicativo React

A mídia social tornou-se parte integrante de nossas vidas diárias e é uma ótima plataforma para as empresas alcançarem seus clientes. Adicionar botões de compartilhamento social ao seu aplicativo React pode ajudá-lo a aumentar seu alcance e visibilidade nas plataformas de mídia social. Neste artigo, você aprenderá como adicionar facilmente botões de compartilhamento social em seu aplicativo React.

Adicionando botões de compartilhamento social ao seu aplicativo React

Antes de começar, você precisará ter uma compreensão básica do React e como configurar um aplicativo React. Você também deve ter uma conta na(s) plataforma(s) de mídia social para a(s) qual(is) deseja adicionar botões de compartilhamento.

Instalando o módulo react-share

Existem várias opções disponíveis para adicionar botões de compartilhamento social ao seu aplicativo React. Uma opção é usar o módulo react-share , que é uma biblioteca leve e fácil de usar para adicionar botões de compartilhamento social ao seu aplicativo. Para instalar o módulo react-share , você precisa executar o seguinte comando:

npm install react-share

Criando um botão Compartilhar no Facebook

Depois de instalar o módulo react-share , você pode começar a adicionar botões de compartilhamento social ao seu aplicativo. Para fazer isso, você precisará importar os componentes necessários do módulo react-share . Por exemplo, para adicionar um botão de compartilhamento ao Facebook, você precisa usar o seguinte código:

import { FacebookShareButton } from 'react-share';

Em seguida, você pode usar o componente FacebookShareButton em seu código para adicionar o botão Compartilhar no Facebook ao seu aplicativo.

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;

Abaixo está a saída exibindo o botão de compartilhamento no Facebook:

Neste código, primeiro você precisa importar os componentes necessários do módulo react-share . Depois disso, crie um componente funcional chamado App que contenha o botão de compartilhamento do Facebook. O componente FacebookShareButton é usado para criar o botão de compartilhamento e o componente FacebookIcon é usado para exibir o logotipo do Facebook no botão.

O componente FacebookShareButton tem vários adereços que podem ser usados ​​para personalizar o botão de compartilhamento. Neste exemplo, especificamos os adereços url , quote e hashtag .

Por fim, você precisa exportar o componente App , para que possa ser utilizado em outros locais do nosso app. Quando o botão de compartilhamento no Facebook for clicado, ele abrirá uma caixa de diálogo de compartilhamento pré-preenchida com o url , citação e hashtag especificados .

Criação de botões de compartilhamento social para outras plataformas de mídia social

Além do Facebook, o módulo react-share também fornece componentes para adicionar botões de compartilhamento social para várias outras plataformas, incluindo Instagram, Twitter, LinkedIn e muito mais.

Para adicionar um botão de compartilhamento social para uma plataforma diferente, você precisará importar os componentes necessários do módulo react-share . Por exemplo, para adicionar um botão de compartilhamento do Twitter, primeiro você precisa importar o seguinte:

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

Em seguida, você pode usar os componentes TwitterShareButton e TwitterIcon em seu código para adicionar o botão Compartilhar no Twitter ao seu aplicativo.

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

Abaixo está a saída exibindo os botões compartilhar no Facebook e compartilhar no Twitter:

Quando você clica no botão de compartilhamento do Twitter, ele abre uma caixa de diálogo de compartilhamento pré-preenchida com o URL e a citação especificados.

Personalizando os Botões

Os componentes do botão de compartilhamento social têm vários adereços que você pode usar para personalizar o botão. Alguns dos adereços disponíveis incluem:

• url: a URL a ser compartilhada no Facebook
• citação: a citação a ser compartilhada no Facebook
• hashtag: a hashtag a ser adicionada ao post compartilhado no Facebook

Você pode encontrar uma lista completa de botões e adereços de compartilhamento social disponíveis na documentação oficial do react-share .

Obtenha mais visualizações de página com botões de compartilhamento social

Adicionar botões de compartilhamento social ao seu aplicativo React pode ajudá-lo a aumentar seu alcance e visibilidade nas plataformas de mídia social. Ao tornar mais fácil para os usuários compartilharem seu conteúdo, você pode alcançar um público maior e direcionar mais tráfego para seu aplicativo. Além disso, os botões de compartilhamento social também podem ajudar a aumentar a credibilidade e a autoridade de sua marca, pois os compartilhamentos podem funcionar como recomendações para seu aplicativo.