Atualizado em 03/03/2021. Todas as principais redes sociais atualmente oferecem botões de compartilhamento para adicionar ao seu site ou blog. Mas nem sempre queremos ou precisamos do botão pronto. Às vezes precisamos de botões de compartilhamento personalizados com uma imagem ou texto, e os modelos de botão disponíveis não atendem todo tipo de necessidade visual.
Se esse for o seu caso, saiba que é simples criar links para compartilhamento no seu site WordPress (ou em sites php/html, em geral). O código gera um link que funciona como os botões, mas a âncora fica por sua conta. Pode ser um texto, imagem, ou qualquer coisa que possa ter um link (âncora a).
Para utilizar ou ver os links funcionando, basta colocar os códigos em algum lugar do seu template (tema) WordPress ou seu código PHP.
Nos exemplos abaixo, vou utilizar o código pronto para seu tema WordPress, se precisar usar em algum projeto PHP ou HTML diferente, faça suas próprias adaptações aos códigos.
<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" rel="nofollow" target="_blank" title="Compartilhar <?php the_title(); ?> no Facebook">Facebook</a>
<a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=seunomenotwitter" title="Twittar sobre <?php the_title(); ?>" rel="nofollow" target="_blank">Twitter</a>
<a href="https://wa.me?text=<?php the_title(); ?>%20-%20<?php the_permalink(); ?>" rel="nofollow" target="_blank">Whatsapp</a>
<a href="https://www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<?php the_title(); ?>" title="Pin it" rel="nofollow" target="_blank">Pinterest</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar <?php the_title(); ?> no Linkedin" rel="nofollow" target="_blank">Linkedin</a>
<a href="mailto:?subject=Confira: <?php the_title(); ?>&body=Confira o que encontrei: <?php the_title(); ?> - <?php the_permalink(); ?>" title="Compartilhar <?php the_title(); ?> por e-mail" rel="nofollow" target="_blank">E-mail</a>
<a href="https://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(the_title('','', false)); ?>" title="Compartilhar <?php the_title(); ?> no Reddit" rel="nofollow" target="_blank">Reddit</a>Tumblr
<a href="https://www.tumblr.com/share/link?url=<?php the_permalink(); ?>" title="Compartilhar <?php the_title(); ?> no Tumblr" rel="nofollow" target="_blank">Tumblr</a>
Agora, é só fazer as adaptações necessárias para seu projeto e personalizar como quiser, utilizando CSS e/ou JS. Se quer o código pronto, continue lendo.
Estilizando os botões de compartilhamento personalizados
Simplesmente copiando e colando, os códigos acima, os botões até funcionarão, mas não ficarão exatamente bonitos. Para isso, você precisará criar algumas linhas de CSS para que os links de compartilhamento de redes sociais tenham uma aparência mais adequada para o seu site. Lembrando que estamos apenas criando os botões de uma forma simples, com cores e textos. Caso queira adicionar ícones ou imagens, você precisará ajustar conforme sua necessidade.
Adicione o HTML abaixo no local desejado, pode ser no seu arquivo single.php (geralmente abaixo de <?php the_content(); ?>) ou em qualquer outro local que deseje exibir os botões.
<ul class="social_share">
<li>
<span>Compartilhe:</span>
</li>
<li>
<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" rel="nofollow" target="_blank" title="Compartilhar <?php the_title(); ?> no Facebook">Facebook</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=seunomenotwitter" title="Twittar sobre <?php the_title(); ?>" rel="nofollow" target="_blank">Twitter</a>
</li>
<li>
<a href="https://wa.me?text=<?php the_title(); ?>%20-%20<?php the_permalink(); ?>" rel="nofollow" target="_blank">Whatsapp</a>
</li>
<li>
<a href="https://www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&description=<?php the_title(); ?>" title="Pin it" rel="nofollow" target="_blank">Pinterest</a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Compartilhar <?php the_title(); ?> no Linkedin" rel="nofollow" target="_blank">Linkedin</a>
</li>
<li>
<a href="mailto:?subject=Confira: <?php the_title(); ?>&body=Confira o que encontrei: <?php the_title(); ?> - <?php the_permalink(); ?>" title="Compartilhar <?php the_title(); ?> por e-mail" rel="nofollow" target="_blank">E-mail</a>
</li>
<li>
<a href="https://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(the_title('','', false)); ?>" title="Compartilhar <?php the_title(); ?> no Reddit" rel="nofollow" target="_blank">Reddit</a>
<li>
<a href="https://www.tumblr.com/share/link?url=<?php the_permalink(); ?>" title="Compartilhar <?php the_title(); ?> no Tumblr" rel="nofollow" target="_blank">Tumblr</a>
</li>
</ul>Agora, adicione o trecho de CSS no arquivo style.css do seu tema, ou em algum outro local. Se preferir, pode colocar também um CSS incorporado no <head> ou <body>, por exemplo, mas lembre-se que o código deve estar entre as tags <style> e </style>.
ul.social_share {
list-style: none;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
ul.social_share li {
margin: 0 5px 5px 0;
}
ul.social_share li a,
ul.social_share li span {
display: flex;
justify-content: center;
align-items: center;
background-color: #555;
color: #fff !important;
font-size: 14px;
line-height: 1em;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
padding: 10px 12px 8px 12px;
border-radius: 5px;
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}
ul.social_share li a[href^="https://www.facebook"] {
background-color: #415993;
}
ul.social_share li a[href^="https://twitter"] {
background-color: #4aa0eb;
}
ul.social_share li a[href^="https://wa.me?text"] {
background-color: #65cf72;
}
ul.social_share li a[href^="https://www.pinterest"] {
background-color: #ad2626;
}
ul.social_share li a[href^="https://www.linkedin"] {
background-color: #3076b0;
}
ul.social_share li a[href^="mailto:?subject"] {
background-color: #ad8c26;
}
ul.social_share li a[href^="https://reddit"] {
background-color: #e55127;
}
ul.social_share li a[href^="https://www.tumblr"] {
background-color: #364457;
}
ul.social_share li a:hover {
-webkit-filter: opacity(80%);
filter: opacity(80%);
}O resultado, será algo parecido com isto:
Lembrando que: os códigos CSS já presentes no seu tema e/ou site, podem fazer com que a aparência seja diferente. Faça seus próprios ajustes nos códigos para adaptar ao seu layout.
Precisa de outra rede social que não listei aqui? Me manda uma mensagem que eu posso te ajudar a criar outros botões de compartilhamento personalizados para o seu site.
Até a próxima!
