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