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.

18 comentários:

  1. Boa Noite Fabio, gostaria de saber por que e que no meu blog, na opcao seguir de google+ aparece escrito que a lista de seguidores e privada?

    www.sansi-boy.blogspot.com

    ResponderExcluir
  2. Sansao Machava
    acho que isso não tem a ver com o gadget seguidores mas com as configurações de privacidade no google+

    ResponderExcluir
  3. Roberto, há como usar esse script mas só que com outros tipos de botões? Como aquele oficial do Favebook, que só de clicar nele ele já envia para a rede social sem ter que abrir pop up?

    ResponderExcluir
  4. ADM não testei com outros tipos...

    na pagina do addthis fala que você pode escolher quais serviços (botões) aparecem trocando o código, veja aqui a lista completa

    http://www.addthis.com/services/all

    ResponderExcluir
  5. Obrigado pela dica Fabio...tenho uma outra questao, gostaria de saber como e que faco para colocar uma barra com topicos do blog, na parte de cima do meu blog, assim como vce fez no seu blog

    ResponderExcluir
  6. qual barra? onde está escrito inicio, melhores dicas ......

    veja aqui: Menu Horizontal

    ResponderExcluir
  7. Caro amigo blogueiro eu gostari que vc publicasse meu comentario, lhe pedindoum tutorial explicando como colocar postagens realcionadas no blog. Mas sem ser o linkwhit. Eu sei que existe se nao encontrei ainda. Vcs tem como postar isso a pedido.
    Sou blogueiro e preciso desse tuto!

    Agradeço se publicar o comentario e me ajudar!

    ResponderExcluir
  8. Fabiano, parabéns! A um bom tempo acompanho seu blog e você tem me ajudado muito a editar meus blog com suas dicas agora estava procurando uma código assim para o meu blog www.frasesmensagensdeamor.com que que enviasse apenas a imagem escolhida e não a postagem toda nem precisava ser tão bom assim. já comecei a testar esta dando certo.
    Obrigado.

    ResponderExcluir
  9. Fabiano, sei que estou comentando no post errado. Mas tenho uma dúvidas sobre o adsense. Quanto é possível ganhar com cada click em um link ou banner? Será que há uma resposta exata ou próxima?

    ResponderExcluir
  10. quando vou compartilhar no face nao aparece a imagem :(
    pq isso?

    o restante deu certo

    ResponderExcluir
  11. MAIS PAGONEJA isso pode depender do seu template... mas esse botão sobre a imagem funciona da mesma forma que os botões padrão do addthis como usamos no canto da pagina.

    ResponderExcluir
  12. Muito bom coloquei no meu funcionou certinho Parabens Otimo blog

    ResponderExcluir
  13. não consegui fazer, ele fica na minha home com uma imagenzinha de um homem do google trabalhando dizendo que estou errado... o que fazer? quero colocar a postagem na foto que adicionei no post e não na home.

    ResponderExcluir
  14. não sei que imagem é essa, mas deve ser algum erro de imagem ou configuração do blog. Qual o endereço do blog?

    ResponderExcluir
  15. olá....descubri esse blog e estou adorando...Mas tentei fazer esse tutorial mas não entendi a parte da imagem onde edito essa imagem

    ResponderExcluir
  16. Cara, obrigado! Sempre me ajudando!!

    ResponderExcluir