Colocar Botões de Compartilhamento nas Imagens

Vamos mostrar como inserir os botões de compartilhamento nas imagens do seu blog, isto servirá como mais uma opção para seus visitantes enviarem seus posts para o Facebook, Twitter e outras redes sociais, afinal uma das melhores formas de divulgação do seu blog é através do compartilhamento feito pelos visitantes porque isso tem um alcance de milhares de pessoas.

Passe o mouse sobre a imagem para ver a demonstração

Esse código dos botões de compartilhamento que vamos falar hoje é feito pelo addthis. O código se divide em duas partes, primeiro vamos colocar o javascript dos botões entre na pagina layout adicionar gadget > html/javascript e cole esse código:

<script type='text/javascript'>
var addthis_config = {
services_overlay:'facebook,twitter,email,print,more'
}
</script>
<script type='text/javascript' src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-5134a2bc0844284c'></script>

Sugerimos que faça seu cadastro no Addthis assim poderá trocar o trecho xa-5134a2bc0844284c pela sua identificação no site e assim você poderá acompanhar as estatísticas do botão de compartilhamento para saber quantas pessoas enviaram seus posts e para quais redes sociais.

Depois disso você precisa editar o código das imagens que vai colocar os botões, veja o exemplo de como fica o código da imagem com botão de compartilhamento:

<img addthis:title="Dicas e Ajuda para Blogueiros" addthis:url="http://www.dicasparablogs.com.br/p/lista-de-tutoriais-com-dicas-e-ajuda.html" class="addthis_shareable" src="http://1.bp.blogspot.com/--Dbp4qu364k/UBvDv5TnQBI/AAAAAAAAExc/-hsUq06TaL4/s300/resolver-erros-blogger.jpg" />

Você pode editar algumas partes do código mas o principal é colocar o trecho class='addthis_shareable' isso que faz os botões aparecerem sobre as imagens. Os outros trechos:

addthis:url='http://www.dicasparablogs.com.br/p/lista-de-tutoriais-com-dicas-e-ajuda.html' addthis:title='Dicas e Ajuda para Blogueiros'

São opcionais e você deve editar com o endereço e titulo que deseja, porém em alguns testes que fizemos sem colocar esse trecho o código funcionou bem pegando o endereço e titulo da pagina automaticamente.

Veja também:
4 Passos para Criar Banners ou Imagens para Usar em Blogs e Sites
Gadget com Botões Flutuantes de Redes Sociais no Blogger
Redimensionar Imagens no Blog - Código para Mudar o Tamanho das Imagens

Fizemos esse tutorial para responder um comentário feito em nosso post sobre Colocar botão do Pinterest sobre as Imagens onde nosso leitor queria usar o botão do facebook sobre as imagens do blog então esperamos que esse post de hoje ajude nisso e claro agradecemos muito o comentário que virou sugestão para essa postagem. Por enquanto não achamos um jeito de colocar os botões de compartilhamento em todas as imagens de forma automática, mas assim que possível faremos um novo tutorial falando sobre isso.

Veja mais Dicas e Tutoriais: > Acessórios > Facebook > Imagens > Redes Sociais > Twitter