Como agregar botões de compartilhar em redes sociais em um e-mail (sem JavaScript)

Postado em

Uma limitação ao editar a newsletter de um site, de fato, ao escrever qualquer mensagem de e-mail, é o que por razões de segurança se bloqueia a maior quantidade de código executável incluindo o relacionado a JavaScript que é o que da vida a botões como o “Curtir” do Facebook ou o “Pinear” de Pinterest.

Pois bem, entre os muitos serviços que geram códigos de botões de compartilhar nas redes sociais de forma automática, se destaca o serviço simples de AddThis que permite criar, a partir de uma URL, uma boa quantidade de botões totalmente personalizáveis, de fácil integração e que não precisam de JavaScript. Para isso, depois de ter pronta a URL a compartilhar, da newsletter ou a do conteúdo que se queira compartilhar nas redes sociais, será suficiente ir até AddThis/get/sharing e seguir 4 simples passos:

botones sociales addthis no javascript

1. No campo de Get sharing buttons escolher “E-mail Newsletter”
2. Mais abaixo, na URL to share, pegar a URL que se queira compartilhar.
3. Um pouco mais abaixo, escolher o estilo dos botões.
4. Clicar no botão Grab it para copiar o código gerado e pegá-lo dentro do código HTML da newsletter ou qualquer outro e-mail em redação.

Para personalizar um pouco mais os botões resultantes, por exemplo, para mostrar os botões unicamente de determinadas redes e não só Facebook e Twitter, há duas opções: A primeira é escolher o primeiro estilo de botões (o do Passo 3 de nosso guia) que é um botão alongado especial que ao clicar se é levado a um espaço no qual o usuário poderá escolher qualquer das 300 redes compatíveis com AddThis.

A outra opção é editar diretamente o código gerado que não é mais que simples links sobre imagens, assim, a chave é simplesmente copiar botões e substituir nomes. Simples: Quem quiser criar o botão de Reddit a partir do Facebook, se copia e se pega o do Facebook…

<a href="http://api.addthis.com/oexchange/0.8/forward/facebook/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmisitioweb.com%2F2104%2Fnewsletter&pubid=xa-53551912096e7a72" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/facebook.png" border="0" alt="facebook" />

…e nos três lugares (link, imagem e alt) onde diz facebook, se coloca a palavra reddit que dentro da lista de nomes dados por AddThis é o nome correspondente ao botão de Reddit

<a href="http://api.addthis.com/oexchange/0.8/forward/reddit/offer?pco=tbx32nj-1.0&url=http%3A%2F%2Fmisitioweb.com%2F2104%2Fnewsletter&pubid=xa-53551912096e7a72" target="_blank" ><img src="http://cache.addthiscdn.com/icons/v1/thumbs/32x32/reddit.png" border="0" alt="reddit" />

Também pode se mudar a URL dos ícones para colocar as imagens próprias. Para visualizar as estatísticas dos botões, é preciso se registrar em AddThis. [Via: Blog de AddThis]