Carregando...

Como Adicionar Botões de Redes Sociais em Html

Postado: 12 de janeiro de 2025 Tempo de Leitura: 3 Minutos

Como Adicionar Botões de Redes Sociais em Html

Como Adicionar Botões de Redes Sociais em Html

Adicionar botões de redes sociais ao seu site é uma forma eficiente de aumentar o engajamento e facilitar o compartilhamento de conteúdo. Além disso, esses botões ajudam os visitantes a se conectarem facilmente com suas redes sociais, aumentando a visibilidade da sua marca.

Neste artigo, vamos aprender como adicionar botões de redes sociais em uma página HTML de forma simples e prática.

1. Preparando os Ícones

Antes de começarmos a adicionar os botões, é importante garantir que você tenha os ícones das redes sociais que deseja usar. Existem diversas bibliotecas gratuitas e ícones que podem ser facilmente baixados ou incorporados em seu código. Algumas opções populares incluem:

Esses sites oferecem ícones personalizáveis e que podem ser facilmente inseridos no seu site com apenas algumas linhas de código.

2. Utilizando Font Awesome para Botões de Redes Sociais

Uma maneira muito popular de adicionar ícones de redes sociais é utilizando a biblioteca Font Awesome, que possui uma grande variedade de ícones prontos para uso. Aqui está um exemplo de como incorporar os botões de redes sociais utilizando o Font Awesome:

Passo 1: Incluir o Link do Font Awesome

Primeiro, adicione o link para a biblioteca Font Awesome no cabeçalho do seu HTML, entre as tags <head>:

HTML
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

Passo 2: Inserir os Botões de Redes Sociais

Agora que a biblioteca está incluída, você pode adicionar os ícones das redes sociais usando as classes específicas do Font Awesome. Abaixo está um exemplo de como criar botões para Facebook, Twitter e Instagram:

HTML
<nav class="redes-sociais">    
    
    <ul>
        
        <li>
            <a href="https://www.facebook.com/" target="_blank">
            <i class="fab fa-facebook" tabindex="0"></i>
            </a>
        </li>

        <li>
            <a href="https://www.instagram.com/" target="_blank">
            <i class="fab fa-instagram" tabindex="0"></i>
            </a>
        </li>

        <li>
            <a href="https://br.pinterest.com/">
            <i class="fab fa-pinterest" tabindex="0" target="_blank"></i>
            </a>
        </li>

        <li>
           <a href="https://codepen.io/" target="_blank">
           <i class="fab fa-codepen" tabindex="0"></i>
           </a>
        </li>

        <li>
            <a href="https://github.com/" target="_blank">
            <i class="fab fa-github" tabindex="0"></i>
            </a>
        </li>
        
        <li>
            <a href="https://www.youtube.com/">
            <i class="fab fa-youtube" tabindex="0" target="_blank"></i>
            </a>
        </li>
    
    </ul>

</nav><!--Redes Sociais-->

Passo 3: Estilizando os Botões

Você pode estilizar os botões de redes sociais com CSS para torná-los mais atraentes. Por exemplo, você pode mudar a cor dos ícones, adicionar efeitos de hover e muito mais. Veja um exemplo de como personalizar a aparência dos botões:

CSS
.redes-sociais ul {

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin:0;
  list-style-type: none;
  font-size: 2em;

}

.redes-sociais ul li { padding: 0em 0.5em; }

.fab { font-size:1.2em; color:#595858; }

/* transition for social icon hover animation */
.fa-facebook,
.fa-codepen,
.fa-youtube,
.fa-instagram,
.fa-github,
.fa-pinterest {
  transition: 0.4s;
  cursor: pointer;
}

/* social media icons hover color */
.fa-facebook:hover,
.fa-facebook:focus {
  color: #1877f2;
  transform: scale(1.1);
}

.fa-twitter:hover,
.fa-twitter:focus {
  color: #1da1f2;
  transform: scale(1.1);
}

.fa-youtube:hover,
.fa-youtube:focus {
  color: #df2426;
  transform: scale(1.1);
}

.fa-instagram:hover,
.fa-instagram:focus {
  color: #bd22a2;
  transform: scale(1.1);
}

.fa-github:hover,
.fa-github:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-github:hover,
.fa-github:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-codepen:hover,
.fa-codepen:focus {
  color: #000;
  transform: scale(1.1);
}

.fa-pinterest:hover,
.fa-pinterest:focus {
  color: #b3001b;
  transform: scale(1.1);
}

Esse código CSS dará aos seus botões um visual limpo, com um efeito de transição quando o usuário passar o mouse sobre eles.

3. Adicionando os Botões de Redes Sociais Manualmente

Se você não quiser usar bibliotecas externas como o Font Awesome, também pode adicionar os ícones manualmente, fazendo o download dos arquivos de imagem (JPEG, PNG, SVG) e criando os botões com <img> em HTML.

HTML
<div>
    <a href="https://www.facebook.com/seu-perfil" target="_blank">
        <img src="facebook-icon.png" alt="Facebook" />
    </a>
    <a href="https://twitter.com/seu-perfil" target="_blank">
        <img src="twitter-icon.png" alt="Twitter" />
    </a>
    <a href="https://www.instagram.com/seu-perfil" target="_blank">
        <img src="instagram-icon.png" alt="Instagram" />
    </a>
</div>

Esse método também permite que você personalize as imagens com a própria marca ou estilo, mas você precisará gerenciar os arquivos de imagem manualmente.

4. Considerações Finais

Adicionar botões de redes sociais no seu site é uma ótima maneira de incentivar o compartilhamento de conteúdo e conectar seus visitantes com suas plataformas sociais. Usando bibliotecas como o Font Awesome ou ícones personalizados, você pode criar botões bonitos e funcionais com facilidade. Não se esqueça de testar seu site em diferentes dispositivos para garantir que os botões estejam funcionando corretamente e com boa aparência.

Seja simples ou avançado, o importante é escolher a abordagem que melhor se encaixa nas necessidades do seu projeto.

Conclusão

Adicionar botões de redes sociais ao seu site é uma forma simples e eficaz de aumentar o alcance e o engajamento do seu conteúdo. Ao seguir as etapas descritas neste artigo, você poderá implementar facilmente os botões de compartilhamento em seu site e impulsionar o crescimento da sua presença online.

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

60 Visualizações

2 respostas para “Como Adicionar Botões de Redes Sociais em Html”

  1. Loop Nerd disse:

    Olá Manoel, Obrigado pela visita no Blog.
    Neste caso é bem variável. ou seja, depende do lugar do site etc…
    Se for em um site em wordpress é no html personalizado
    se for em outro site como loja virtual que aceita HTML e CSS personalizado é só copiar e colar que funciona.
    E se for em um site feito em html, os botões podem ser inseridos no rodapé, e o css cola no estilo css do site.

  2. Manoel disse:

    Boa tarde.

    Muito bom seu documento…

    Você indicou apenas o local do

    E o resto? Você não deu direção ao internauta onde colocar os demais códigos.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados