15 de fevereiro de 2014

23

Botões de compartilhamentos de redes sociais em baixo do titulo da postagem



Veja como colocar no seu Blog botões de compartilhamentos de redes sociais que fica em baixo do titulo da postagens.
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 -->

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. 


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!


23 comentários:

  1. Fiz certinho, mais não funcionou amigo!

    ResponderExcluir
    Respostas
    1. Olá!
      Peso 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.

      Excluir
  2. Respostas
    1. Oi Ana Paula!
      Faltou 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.

      Excluir
  3. Ola eu queria saber como faço pra tirar? é pq eu coloquei os comentarios do facebook no blog ai ficou em baixo! eu queria q vc falasse como faz pra tirar e colocar em cima dos comentarios!

    ResponderExcluir
    Respostas
    1. Olá Eduardo!
      Para 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!

      Excluir
    2. Obg resolvi o problema já .. vlw! parabéns pelo o blog!

      Excluir
  4. Este comentário foi removido pelo autor.

    ResponderExcluir
  5. Mesmo assim não conseguir, achei essas duas tag
    div 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!

    ResponderExcluir
  6. Quase 100%, apenas existe um probleminha, está compartilhando a página que estou e não o post em questão.
    O que acontece e como resolver?

    ResponderExcluir
    Respostas
    1. Olá Rafael, tudo bem!
      Esta 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!

      Excluir
    2. Rafael batista, antes de compartilhar a postagem, clique no titulo do poste e depois compartilha, vai da certinho!

      Excluir
  7. Olá, 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?

    ResponderExcluir
    Respostas
    1. Olá Cristiane, tudo bem!!!
      Para 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.

      Excluir
  8. 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 .
    Obs: na pagina inicial esta ok e dentro do post tbm ,Mas quero tira das pagina fixa.

    ResponderExcluir
  9. Oi Kelven. Como vai?
    Eu 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.

    ResponderExcluir
  10. Muito obrigado pela dica Kelven. tenho procurado por muito tempo isso e só aqui encontrei valeu
    pela força.

    ResponderExcluir
  11. Gostaria de saber como deixar numa borda igual está o seu blog. Os botões estão entre duas linhas, tem como ensinar?

    ResponderExcluir
  12. valeu cara muito e sem complicação já sou seu fá

    ResponderExcluir
  13. eu 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

    ResponderExcluir
  14. Muito 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

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook