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="http://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="http://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

Google +1

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

Pinterest

<a href="http://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

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

Comentar

14 comentários

  1. Aline Rebelo

    Adorei Dani!
    (:

    Meu tema no tumblr não funciona o G+, vou ver se consigo resolver com esse tuto!

    Responder
    1. Dani Danczuk

      Resposta para Aline Rebelo

      Acabo de fazer uma pesquisa e tive que atualizar o tutorial.
      Tem um código novo que funciona. Fiz o teste agora ;)

      Responder
  2. Aline Rebelo

    Eba! \o/
    Funcionou!!

    Obrigada Dani!

    Responder
    1. Dani Danczuk

      Resposta para Aline Rebelo

      Parece que o Google alterou a URL para compartilhar.
      Antes era plusone e maior. Agora é só plus e mais simples ;)

      Responder
  3. José Guimarães

    Muito bom usar códigos em vez de plugins.

    Usei no blog.
    Mas hospedei a imagem em outro site, porque o indicado no link não funciona.

    Muito obrigado

    Responder
    1. Dani Danczuk

      Resposta para José Guimarães

      A imagem não funciona de fato.
      É apenas um exemplo para que você possa alterar pra a imagem que deseja usar.

      Responder
  4. Wesley

    Muito obrigado! É o que buscava, quero ícones personalizados, não dá pra simplesmente adicionar aqueles botões prontos e exagerados de outros sites.

    Mas estou com problemas quanto a compartilhar a página atual, pois não quero uma página específica.

    Como tentei deixar a parte do URL em branco, é realmente o que acontece, quem clica no botão é levado a uma página para compartilhar algo em branco.

    Como faço para compartilhar a página atual?

    Desde já grato

    Responder
  5. Caio Eduardo Teixeira

    o &t=QualquerTitulo do facebook nao funcionou, estou precisando muito disso para concluir meu projeto, voce pode me ajudar por favor? Ele sempre está pegando o titulo da pagina inicial do site.

    Responder
  6. Flávio Ed.

    Comecei a usar sua solução e estou achando bem bacana. Obrigado.

    Mas aqui vai uma dúvida:

    Você conhece algum modo válido de exibir uma miniatura no compartilhamento do Facebook ??

    Responder
    1. Dani Danczuk

      Resposta para Flávio Ed.

      Olá,
      Para a miniatura no compartilhamento no facebook é necessário que você tenha no código as meta tags para “open graph”.
      Quando sobrar um tempo iremos fazer um tutorial, mas se você pesquisar no google deve encontrar vários sobre isso, só pesquisar “open graph facebook”.

      Responder
  7. Nara

    Olá Dani, muito obrigada, era exatamente isso que procurava!
    Porém queria saber se dá pra inserir o contador de “shares” e RTs também com esses botões personalizados.
    Obrigada!

    Responder
  8. Gabi

    Acho que não peguei o X da questão do tutorial :P Em que local eu devo colocar esses códigos? Eles devem ser alterados manualmente cada vez que eu fizer um post? :S

    Responder
    1. Dani Danczuk

      Resposta para Gabi

      Isso é apenas o código básico. Para que ele pegue a URL do seu post, você precisa colocar as tags do sistema que usa (O WordPress por exemplo, tem um código que gera a URL do post). Talvez uma hora faça um tutorial mais avançado, explicando melhor esse detalhe.

      Responder
  9. Maike

    Olá, Dani!
    Ótimo tutorial, acredito que um dos melhores que já vi.

    Acho que pro WordPress, basta colocarmos onde é a URL, o código php, the_permalink; no qual gera o link do post, e, talvez jutamente ao the_title, não sei, irei testar!

    Parabéns

    Responder