Categorias: Tutoriais

Share Buttons – Personalizados

O botão personalizado, como o próprio nome já diz, permite que você personalize ele de acordo com sua página. Até havia feito um post a respeito um tempo atrás, mas era antigo e tiveram algumas alterações, resolvi fazer um novo.

Por que usar um botão personalizado para compartilhar posts?

Faz sua página abrir mais rápido.

O código do botão personalizado não precisa ficar buscando informação na rede social, já que ele é apenas um link para a mesma, e não usa scripts. Enquanto aqueles outros botões com contadores precisam buscar informação, o que pesa um pouco mais, e se a rede social está offline, como as vezes acontece, sua página demora mais ainda pra abrir só por causa de um botão.

A única coisa ruim é que não tem contador (é possível, mas é outra história e complexo), pra quem faz questão de ter um. Eu considero isso irrelevante e até bom não ter um contador em alguns casos. Por exemplo, se sua página não costuma ter muitos likes, retweets.. ninguém fica sabendo “de cara”.

E todos os códigos dos botões são padrões de cada rede social, então dificilmente terá problema, a não ser claro que a rede social resolva mudar alguma coisa.

Twitter

<a href="https://twitter.com/share?text=TITULO&url=URL&counturl=URL&via=USUARIO" 
target="_blank">
<img src="http://site.com/botao-twitter.png" alt="" />
</a>
  • text=TITULO – Altere TITULO para o título do post, esse será o texto do tweet
  • url=URL – Altere URL para a url que deseja compartilhar no twitter. Essa URL precisa ter o http://
  • counturl=URL – Altere URL para a URL que deseja compartilhar no twitter. . Essa URL precisa ter o http://.
    Essa é a URL que será usada para contar os tweets dela, quando se usa o botão com contador. É bom preencher esse campo para que se um dia resolver voltar usar o botão com contador, vai continuar funcionando normal. E essa URL não precisa ser a mesma URL que foi usada em url=URL, o que significa que você pode usar uma URL curta no url=URL e o contador funcionará de acordo com a URL em counturl=URL.
  • via=USUARIO – Altere USUARIO para o seu usuário no tweet. Assim sempre que alguém clicar no botão para compartilhar, irá aparecer no final do tweet via @usuario
  • http://site.com/botao-twitter.png – Altere essa URL inteira para a URL da imagem que deseja usar como botão

Facebook

<a href="https://www.facebook.com/share.php?u=URL&t=TITULO" target="_blank">
<img src="http://site.com/botao-facebook.png" alt="" />
</a>
  • u=URL – Altere URL para a url que deseja compartilhar no facebook. Essa URL precisa ter o http://
  • t=TITULO – Altere TITULO para o título do post, esse será o texto do item compartilhado
  • http://site.com/botao-facebook.png – Altere essa URL inteira para a URL da imagem que deseja usar como botão

Pinterest

<a href="https://pinterest.com/pin/create/button/?url=URL&media=IMAGE&description=TITULO" 
target="_blank">
<img src="http://site.com/botao-pinterest.png" alt="" />
</a>
  • url=URL – Altere URL para a url que deseja compartilhar. Essa URL precisa ter o http://
  • media=IMAGE – Altere IMAGE para a URL da imagem que será compartilhada. Essa URL precisa ter o http://
  • http://site.com/botao-pinterest.png – Altere essa URL inteira para a URL da imagem que deseja usar como botão

Whatsapp

Código para funcionar no mobile:

<a href="whatsapp://send?text=TITLE - URL" target="_blank">
<img src="http://site.com/botao-whatsapp.png" alt="" />
</a>

Código para funcionar no desktop:

<a href="https://wa.me/?text=TITLE - URL" target="_blank">
<img src="http://site.com/botao-whatsapp.png" alt="" />
</a>
  • TITLE – Altere TITLE para o título da página/post que deseja compartilhar
  • URL – Altere URL para a url que deseja compartilhar. Essa URL precisa ter o http://
  • http://site.com/botao-whatsapp.png – Altere essa URL inteira para a URL da imagem que deseja usar como botão

Esse código do whatsapp é ideal para sites responsivos, deixando ele ativo apenas para tablets e smartphones. Basta usar media queries para mostrar/esconder ele de acordo com as resoluções de tela.

Stumbleupon

<a href="http://www.stumbleupon.com/submit?url=URL" target="_blank">
<img src="http://site.com/botao-stumbleupon.png" alt="" />
</a>
  • url=URL – Altere URL para a url que deseja compartilhar. Essa URL precisa ter o http://
  • http://site.com/botao-stumbleupon.png – Altere essa URL inteira para a URL da imagem que deseja usar como botão