Como incluir botões de redes sociais em sites em JavaScript

Adicionar botões de compartilhamento de redes sociais ao seu site é uma ótima maneira de aumentar o engajamento e permitir que os visitantes compartilhem facilmente seu conteúdo. Com JavaScript, você pode incluir e personalizar botões de redes sociais de maneira dinâmica, sem depender de plugins externos. Neste post, aprenda como incluir botões de redes sociais em sites em JavaScript.

1. Por que usar botões de compartilhamento social?

Os botões de redes sociais são importantes para:

• Aumentar o alcance do conteúdo, permitindo que ele seja compartilhado rapidamente.
  
  
• Melhorar a experiência do usuário, facilitando a divulgação do conteúdo com apenas um clique.
  
  
• Aumentar o tráfego de redes sociais para o seu site.

Vamos ver como implementar esses botões com JavaScript!

2. Criando botões de compartilhamento com links personalizados

O primeiro passo é criar os links corretos para as redes sociais. Cada rede tem uma URL específica que você pode usar para compartilhar a página. Aqui estão alguns exemplos:

• Facebook: https://www.facebook.com/sharer/sharer.php?u=URL_DO_SITE
  
  
• Twitter: https://twitter.com/intent/tweet?url=URL_DO_SITE&text=SEU_TEXTO
  
  
• LinkedIn: https://www.linkedin.com/shareArticle?url=URL_DO_SITE&title=SEU_TITULO
  
  
• WhatsApp: https://wa.me/?text=SEU_TEXTO%20URL_DO_SITE

3. Implementando com JavaScript

Vamos criar um exemplo de como gerar esses botões com JavaScript e permitir o compartilhamento do conteúdo da página. No exemplo, você verá como adicionar botões dinamicamente a um site.

HTML:

<div id="botoes-sociais"></div>

<script>
function criarBotaoRedeSocial(rede, url, icone) {
    const botao = document.createElement('a');
    botao.href = url;
    botao.target = '_blank';  // Abre em nova aba
    botao.innerHTML = `<img src="${icone}" alt="Compartilhar no ${rede}" style="width: 32px; height: 32px; margin-right: 10px;">`;
    return botao;
}

function adicionarBotoesDeCompartilhamento() {
    const container = document.getElementById('botoes-sociais');
    const urlAtual = window.location.href;

    // Botão para Facebook
    const facebookURL = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(urlAtual)}`;
    const botaoFacebook = criarBotaoRedeSocial('Facebook', facebookURL, 'https://image.shutterstock.com/image-vector/facebook-icon-vector-260nw-1031402946.jpg');
    
    // Botão para Twitter
    const twitterURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(urlAtual)}&text=Confira%20este%20conteúdo!`;
    const botaoTwitter = criarBotaoRedeSocial('Twitter', twitterURL, 'https://image.shutterstock.com/image-vector/twitter-icon-vector-260nw-1031402990.jpg');
    
    // Botão para LinkedIn
    const linkedinURL = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(urlAtual)}&title=Confira%20este%20artigo`;
    const botaoLinkedin = criarBotaoRedeSocial('LinkedIn', linkedinURL, 'https://image.shutterstock.com/image-vector/linkedin-icon-vector-260nw-1031403001.jpg');
    
    // Botão para WhatsApp
    const whatsappURL = `https://wa.me/?text=Confira%20este%20conteúdo:%20${encodeURIComponent(urlAtual)}`;
    const botaoWhatsApp = criarBotaoRedeSocial('WhatsApp', whatsappURL, 'https://image.shutterstock.com/image-vector/whatsapp-icon-vector-260nw-1031402971.jpg');

    // Adicionando os botões ao container
    container.appendChild(botaoFacebook);
    container.appendChild(botaoTwitter);
    container.appendChild(botaoLinkedin);
    container.appendChild(botaoWhatsApp);
}

// Chamar a função ao carregar a página
window.onload = adicionarBotoesDeCompartilhamento;
</script>

4. Como funciona o código

• criarBotaoRedeSocial(): Esta função cria um link (<a>) para a rede social desejada e insere um ícone correspondente.
  
  
• adicionarBotoesDeCompartilhamento(): A função principal que coleta o URL atual da página com window.location.href e cria os botões de compartilhamento para Facebook, Twitter, LinkedIn, e WhatsApp.
  
  
• Imagens dos ícones: No exemplo, foram utilizadas URLs fictícias para os ícones, mas você pode substituir pelos seus próprios ícones de redes sociais.

5. Estilizando os botões de redes sociais

Você pode adicionar estilo aos botões com CSS para deixá-los mais atraentes ou ajustar o tamanho dos ícones.

Exemplo de CSS:

<style>
#botoes-sociais a {
    display: inline-block;
    text-decoration: none;
    margin: 5px;
}
#botoes-sociais img {
    border-radius: 50%;
    transition: transform 0.3s ease;
}
#botoes-sociais img:hover {
    transform: scale(1.2);
}
</style>

6. Customizando a mensagem de compartilhamento

Ao compartilhar no Twitter ou WhatsApp, por exemplo, você pode personalizar o texto que será enviado. No caso do Twitter, você pode adicionar a hashtag ou mencionar perfis, como mostrado abaixo:

const twitterURL = `https://twitter.com/intent/tweet?url=${encodeURIComponent(urlAtual)}&text=Adorei%20este%20artigo!&hashtags=JavaScript,Compartilhamento`;

hashtags: Adiciona hashtags que irão aparecer no tweet.

text: Personaliza a mensagem que será exibida ao compartilhar.

Adicionar botões de redes sociais ao seu site com JavaScript é uma maneira prática e eficaz de aumentar o alcance de seu conteúdo.

Com a abordagem dinâmica, os botões podem ser gerados automaticamente com base no URL da página atual, tornando o processo de compartilhamento ainda mais fácil para os usuários.

Dúvidas ou sugestões sobre como incluir botões de redes sociais em sites em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: redes sociais javascript