Como criar botões de compartilhamento personalizados no WordPress (sem plugin)

Share on whatsapp
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on skype
Share on pinterest

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.

Facebook

<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>

Twitter

<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>

WhatsApp

<a href="https://wa.me?text=<?php the_title(); ?>%20-%20<?php the_permalink(); ?>" rel="nofollow" target="_blank">Whatsapp</a>

Pinterest

<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>

Linkedin

<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>

E-mail

<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>

Reddit

<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!

Share on whatsapp
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on skype
Share on pinterest

aguarde...

novidades

em BREVE

Dúvidas?

Entre em contato...

ATENÇÃO!

Eu, Alan Patrick, não sou proprietário e nem responsável pelo conteúdo postado e/ou disponibilizado nos sites apresentados no meu portfólio. O meu nome ou logotipo que você vê no rodapé de cada site desenvolvido por mim, diz respeito apenas à questão de créditos e divulgação do desenvolvedor, ou seja, está apenas indicando quem foi que desenvolveu o layout, tema, sistema ou site. Isto não significa que sou responsável pelos conteúdos que os meus clientes publicam.

Por favor, atente a este aviso antes de entrar em contato.

Já me adianto que não posso resolver questões de fotos suas publicadas nos sites dos clientes, links e downloadsgrupos de WhatsApp, material que você considera ofensivo e demais assuntos relacionados ao CONTEÚDO dos sites.

Caso você tenha interesse em contratar meus serviços ou obter mais informações sobre desenvolvimento de sites, layouts, templates e temas para Blogger e WordPress ou materiais de design gráfico, fique à vontade para entrar em contato.

Mensagens que não atenderem os requisitos acima serão ignoradas. Agradeço desde já a sua compreensão!