Colocar Botões de Compartilhamento nas Imagens - Dicas para Blogs
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:
services_overlay:'facebook,twitter,email,print,more'
<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.
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.
Sansão Machava 04 março, 2013 13:11
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?
Fabiano Roberto 04 março, 2013 13:33
acho que isso não tem a ver com o gadget seguidores mas com as configurações de privacidade no google+
Leo 04 março, 2013 15:09
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?
Fabiano Roberto 04 março, 2013 15:17
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
Sansão Machava 04 março, 2013 17:51
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
Fabiano Roberto 04 março, 2013 20:47
qual barra? onde está escrito inicio, melhores dicas ......
veja aqui: Menu Horizontal
Anônimo 05 março, 2013 08:34
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!
Helio 05 março, 2013 09:14
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.
Fabiano Roberto 05 março, 2013 10:17
Anônimo veja o link abaixo:
Postagens Relacionadas do nrelate no Blogger
Anônimo 05 março, 2013 16:04
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?
Fabiano Roberto 05 março, 2013 16:20
Anônimo isso é muito variável, mas veja os links abaixo que podem ajuda-lo a ter uma noção sobre valores.
Unknown 10 março, 2013 19:40
quando vou compartilhar no face nao aparece a imagem :(
o restante deu certo
Fabiano Roberto 10 março, 2013 20:45
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.
Vida de Meme 21 março, 2013 10:11
Muito bom coloquei no meu funcionou certinho Parabens Otimo blog
Deyvson Aguiar 11 abril, 2013 23:46
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.
Fabiano Roberto 12 abril, 2013 00:20
não sei que imagem é essa, mas deve ser algum erro de imagem ou configuração do blog. Qual o endereço do blog?
AmandaGuimaraes 09 maio, 2013 17:29
olá....descubri esse blog e estou adorando...Mas tentei fazer esse tutorial mas não entendi a parte da imagem onde edito essa imagem