Essa ferramenta é bem útil para o Blog, pois o leitor pode compartilhar sua postagens nas redes sociais, e ao mesmo tempo colabora coma divulgação do conteúdo...
Esses botões de compartilhamento é disponibilizados pelo site do Addthis que é totalmente grátis, vamos utilizá-los abaixo do titulo da postagem, e eles irão aparecer apenas nas páginas interna das postagens, e ficarão ocultos na página inicial, bastante legal isso e fácil de colocar no Blog.
Veja um exemplo na imagem abaixo:
Como colocar botões de compartilhamentos de redes sociais
1º Passo: Então, você vai acessar o Painel de edição do seu Blog, Vá em Modelo >> depois em Editar HTML
2º Passo: Agora, clique em qualquer parte do código e pressione as teclas de atalho "Ctrl+F" no seu teclado. Em seguida, busque (encontre) este pequeno trecho no HTML do blog:
<div class='post-header'>
Observação:
O template do Blog possui duas Tags igual a esta"<div class='post-header'>", o código que vamos disponibilizar terá que ser inserido na segunda Tag, pelo contrário não irá funcionar.
3º Passo: Apos encontrar o seguinte Trecho: <div class='post-header'> Logo abaixo dele você vai acrescentar este código:
<!-- botões de compartilhamento -->
<b:if cond='data:blog.pageType == "item"'>
<hr style="align:center; background:#828282; border:0px; height:1px; width:100%;" />
<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e644cc020c5895d"></script><!-- AddThis Button END -->
<hr style="align:center; background:#828282; border:0px; height:1px; width:100%;" />
</b:if>
<!-- fim do codigo -->
<b:if cond='data:blog.pageType == "item"'>
<hr style="align:center; background:#828282; border:0px; height:1px; width:100%;" />
<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e644cc020c5895d"></script><!-- AddThis Button END -->
<hr style="align:center; background:#828282; border:0px; height:1px; width:100%;" />
</b:if>
<!-- fim do codigo -->
Depois de colocar o Código, clique em Visualiza Modelo para verificar se não fez nada errado, se estiver tudo certo finalize clicando em Salve o Modelo.
Olá pessoal! Deixem comentários sobre o Botão se deu tudo certo ou não, ficarei grato por isto. Obrigado!
Observe: Se você quiser que os botões apareça no rodapé das postagens, basta você localizar esta seguinte parte "<div class='post-footer'>" e acrescentar o código abaixo da mesma e pronto.
Olá pessoal! Deixem comentários sobre o Botão se deu tudo certo ou não, ficarei grato por isto. Obrigado!
Fiz certinho, mais não funcionou amigo!
ResponderExcluirOlá!
ExcluirPeso decupas, esqueci de especificar no tutorial que no template existe duas tags (< d iv clas s='post-header' >) e o códgio do botão deve ser inserido na segunda Tag, fiz o teste em 3 templates e em ambos funcionou na segunda Tag, e se você observar meu Blog utiliza este mesmo botão e funciona.
Obrigado por comentar.
O meu tbm n funcionou Kelven
ResponderExcluirOi Ana Paula!
ExcluirFaltou eu especificar o local correto pra colocar o código do Botão, o local pra colocar é na segunda tag do template.
Eu editei o tutorial e coloquei a especificação, basta você lê o tutorial novamente.
Me desculpa pelo erro.
Olá Eduardo!
ResponderExcluirPara retirar o código, você vai no mesmo local onde inseriu o código do Botão abaixo da Tag "< div clas s='post-header' >" e pagar, depois salvar o modelo. Pronto...
Enquanto ao comentários do facebook do seu Blog, para poder colocar os botões de compartilhamento acima dos comentários, você terá que encontrar o código que representa os comentários do facebook e "inserir o código do botão" acima da mesma, porém, não tenho como ensinar a fazer isso, pois seu template deve ser modificado e eu não tenho acesso ao mesmo. mas a dica é, você encontrar o código dos comentários e inserir o código dos botões logo acima.
Obrigado!
Este comentário foi removido pelo autor.
ResponderExcluirMesmo assim não conseguir, achei essas duas tag
ResponderExcluirdiv class='post-header'e div class='post-header-line-1
Eu achei um do BOTAO SOBOO, e implementei abaixo de data:post.body/ e deu certinho!
Quase 100%, apenas existe um probleminha, está compartilhando a página que estou e não o post em questão.
ResponderExcluirO que acontece e como resolver?
Olá Rafael, tudo bem!
ExcluirEsta ferramenta compartilha a página referente ao post, quando o usuário compartilha em uma determinada rede social, será compartilhado uma miniatura da postagem com o link direto para a página da postagem. certo!.
observe: A página que está compartilhando (como você sitou no comentário) é o próprio post, não há diferença.
Obrigado!
Rafael batista, antes de compartilhar a postagem, clique no titulo do poste e depois compartilha, vai da certinho!
ExcluirOlá, Kelven! Obrigada pela ajuda! Fiz e deu tudo certo! Mas, gostaria que os ícones aparecessem também em cada post na página inicial...Como faço?
ResponderExcluirOlá Cristiane, tudo bem!!!
ExcluirPara que os botões apareçam também na página inicial, é facil, basta você encontrar e "remover" duas linhas deste código.
A primeira é esta:
< b:if cond='data:blog.pageType == "item"' >
e exclua esta segunda parte também:
< /b:if >
depois de excluir, visualize e verifique se tudo ocorreu bem, depois salve. Pronto!
Fico grato pelo seu comentário.
Olá kelven! Valew me ajudo paks , Mas os icones fica tbm nas paginas fixa como tem como deixa só na inicial e dentro dos post .
ResponderExcluirObs: na pagina inicial esta ok e dentro do post tbm ,Mas quero tira das pagina fixa.
Oi Kelven. Como vai?
ResponderExcluirEu novamente - de Portugal - escrevo este comentário para lhe agradecer as explicações sobre as "caixinhas de compartilhamento" por debaixo das postagens.
Já tinha tentado uma centena de vezes, seguindo outros tutoriais e nunca consegui. Penso que hoje é meu dia de sorte. Li e fiz tudo direitinho e já estão instaladas. E em tamanho pequenino ficam bem bonitas e não enchem muito o blog. Obrigada mais uma vez por nos ensinar gratuitamente. Apesar de não perceber muitas coisas, fico orgulhosa, também comigo por conseguir algumas. Mas o mérito vai todo p'ra você que nos ensina a troco de nada. Deve ser muito jovem e, parece impossível, como consegue estruturar os seus artigos de tal maneira que parece estar aqui ao meu lado a ensinar-me o passo a passo.
Quanto ao resumo dos textos - introdução - na página inicial (como escrevi há dias), com o "Leia Mais", isso é que não consigo fazer.
Tenha uma ótima semana e lhe envio um grande abraço.
Muito obrigado pela dica Kelven. tenho procurado por muito tempo isso e só aqui encontrei valeu
ResponderExcluirpela força.
Gostaria de saber como deixar numa borda igual está o seu blog. Os botões estão entre duas linhas, tem como ensinar?
ResponderExcluirDesde já agradeço
ResponderExcluirvaleu cara muito e sem complicação já sou seu fá
ResponderExcluireu não conseguir colocar a baixo das postagem acho que por conta da templeste que não aceita o codigo mais coloquei na barra lateral fico massa valeu
ResponderExcluirNão deu certo no meu.
ResponderExcluirMuito bom, funcionou direitinho! Quem estiver lendo esse post no final de 2015 saiba que está tudo ok. Feliz natal e um próspero ano novo!
ResponderExcluir