Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

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ê precisa ter um conhecimento básico 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

instagram viewer
reagir-compartilhar module, que é uma biblioteca leve e fácil de usar para adicionar botões de compartilhamento social ao seu aplicativo. Para instalar o reagir-compartilhar módulo, você precisa executar o seguinte comando:

npm instalar reagir-compartilhar

Criando um botão Compartilhar no Facebook

Assim que tiver o reagir-compartilhar módulo instalado, 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 reagir-compartilhar módulo. Por exemplo, para adicionar um botão de compartilhamento ao Facebook, você precisa usar o seguinte código:

importar {FacebookShareButton} de'reagir-compartilhar';

Você pode então usar o FacebookShareButton componente em seu código para adicionar o botão Compartilhar no Facebook ao seu aplicativo.

importar Reagir de'reagir';
importar {FacebookShareButton, FacebookIcon} de'reagir-compartilhar';
const aplicativo = () => {
retornar (
<div>
 url={' https://www.example.com'}
 citação={'Texto fofo!'}
 hashtag="#muo"
 >
<Ícone do Facebooktamanho={32}redondo />
FacebookShareButton>
div>
 );
};
exportarpadrão Aplicativo;

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 reagir-compartilhar módulo. Depois disso, crie um componente funcional chamado Aplicativo que contém o botão de compartilhamento do Facebook. O FacebookShareButton componente é usado para criar o botão de compartilhamento e o Ícone do Facebook O componente é usado para exibir o logotipo do Facebook no botão.

O FacebookShareButtoncomponente tem vários adereços que pode ser usado para personalizar o botão de compartilhamento. Neste exemplo, especificamos o url, citar, e hashtag adereços.

Finalmente, você precisa exportar o Aplicativo componente, para que possa ser usado em outros locais do nosso aplicativo. Quando o botão compartilhar no Facebook é clicado, ele abre uma caixa de diálogo de compartilhamento pré-preenchida com o url, citar, e hashtag.

Além do Facebook, o reagir-compartilhar O módulo 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 reagir-compartilhar módulo. Por exemplo, para adicionar um botão de compartilhamento do Twitter, primeiro você precisa importar o seguinte:

importar { TwitterShareButton, TwitterIcon } de'reagir-compartilhar';

Você pode então usar o TwitterShareButton e Ícone do Twitter componentes em seu código para adicionar o botão Compartilhar no Twitter ao seu aplicativo.

 url={' https://www.example.com'}
 citação={'Texto fofo!'}
 hashtag="#muo"
>
<Ícone do Twittertamanho={32}redondo />
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
  • citar: a citação a ser compartilhada no Facebook
  • hashtag: a hashtag a ser adicionada à postagem compartilhada no Facebook

Você pode encontrar uma lista completa de botões e acessórios de compartilhamento social disponíveis no reagir-compartilhar documentação oficial.

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.