» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Botões Sociais Abaixo do Título e no Final do Post Parte-01


Como colocar Botões Sociais nos Posts do seu Blog

Sabe os botões das redes sociais que ficam no final dos posts indicando para você curtir no Facebook, Twittar o post que gostou, recomendar no G+ e até pinar no Pinterest?

Pois é, existem vários sites que disponibilizam uma infinidade de modelos destes botões para você colocar em seu blog. Mas, para isso é necessário fazer um cadastro com seu email e senha para pegar o código dos botões.
Como é o caso dos sites:
Todos os 4 sites necessitam de login e senha para configurar o código dos Botões de Social Bookmarking.

Por falar nisso... »»» Você sabe o que é Social Bookmarking?

backup do template Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
Leia o tutorial até o fim e tenha certeza de ter entendido.

Há também uma forma de colocá-los sem que tenha que fazer cadastro nestes sites, que é esta que vou ensinar neste post:


Chamo-os de botões de compartilhamento automáticos.
Muito parecidos com os nativos do blogger:

Aqui no TPV uso-os na página inicial ao lado esquerdo dos posts e no interior uso os botões do Addthis - assunto para os próximos posts.

Em alguns templates que faço uso os botões sociais na horizontal no final dos posts como é o caso do Template Valentine.

Veja como fica em um post do Valentine


Estes botões na forma horizontal são ideais para colocar no final do post ou logo abaixo do título do post.

Então vamos lá:

1º Passo: Código dos Botões Sociais na Horizontal para Copiar e Colar

Este é o código dos Botões Sociais na horizontal como na imagem acima.
» Você irá copiar este código e colá-lo onde for indicado de acordo com o local onde deseja colocá-los.
<!-- Remover esta linha para Botões Sociais aparecerem na página inicial --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/pt_BR/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper &gt; a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
 <div class='clear'/>
<!-- Remover esta linha --></b:if>

Observações Importantes:

♦ Para que você coloque os botões sociais deverá desabilitar os botões nativos do blogger.
♦ Isso vale tanto para estes que estou ensinando agora quanto para os outros relacionados com os sites de botões de social bookmarking que vou ensinar.
Siga as instruções desta imagem:
►Clique em Layout » em Postagens no blog clique em Editar » Desmarque a caixinha Mostrar botões de compartilhamento.

♦ Você tem a opção dos botões sociais aparecerem na página inicial e ou somente nas páginas dos posts.
Para que apareça na página inicial também basta que tire estas 2 linhas indicadas no código dos botões sociais. (a 1ª e a última)
<!-- Remover esta linha para Botões Sociais aparecerem na página inicial --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Remover esta linha --></b:if>

2º Passo: Instalando os botões sociais nos posts.

1- Como colocar os botões sociais abaixo do título do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl+F e Encontre as linhas:
    <div class='post-header'>
    <div class='post-header-line-1'/>
Obs: Se tiver dificuldades de encontrar as linhas leia→ Como Acessar o Editor de HTML do Blog e Ativar o Search

► Copie e cole o código dos botões sociais logo abaixo da linha ▼
    <div class='post-header-line-1'/>
► Clique em Salvar modelo
Obs: Você encontrará estas linhas 2 vezes no seu código HTML, deverá colar o código abaixo das linhas que estão contidas neste bloco de códigos:
<b:includable id='post' var='post'>  (Será a 2ª vez que aparecerão ao dar enter quando procura pelo Search do Editor de HTML do blogger)

☺ Veja como ficou no Demoplate 2010-2

♦ Neste caso tirei a linha condicional que define para que os botões sociais apareçam apenas quando clicamos no post e deixei visível na página inicial abaixo do título do post.
Obs: Percebeu que na página inicial o botão do Pinterest não aparece?
→Não se preocupe, quando o clicar no post este botão aparecerá.

» Quer Aprender sobre as Condicionais do Blogger?

Temos dois artigos aqui no TPV que explicam tudo sobre as condicionais:
♥ Condicionais no Blogger–Parte 01–Ocultando Elementos em Páginas Específicas
♥ Condicionais no Blogger–Parte 02–Exibindo Elementos em Páginas Específicas

2- Como colocar os botões sociais no final (rodapé) do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl+F e Encontre as linhas:
    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
► Copie e cole o código dos botões sociais logo abaixo da linha:
    <div class='post-footer-line post-footer-line-1'>
► Clique em Salvar modelo
Obs:
1- Você encontrará estas linhas 2 vezes no seu código HTML, deverá colar o código abaixo das linhas que estão contidas neste bloco de códigos:
<b:includable id='post' var='post'>  (Será a 2ª vez que aparecerão ao dar enter quando procura pelo Search do Editor de HTML do blogger)
2- Você pode colocar os botões sociais onde quiser no rodapé do post.
Neste exemplo coloquei na post-footer-line-1 acima da atribuição e marcadores.
Basta identificar os outros post-footer-line-2 e 3 e colar o código onde preferir.

☺ Veja como ficou no Demoplate 2006-2



Pronto! Agora é só colocar os botões sociais em seu blog para que as pessoas possam compartilhar seus artigos e imagens nas redes sociais mais utilizadas no Brasil!☺



Botões Sociais Abaixo do Título e no Final do Post Parte-01 Botões Sociais Abaixo do Título e no Final do Post Parte-01 Reviewed by Aurea R C on 1/23/2014 Rating: 5

30 comentários:

  1. Oi
    Acompanho seu blog a bastante tempo
    Eu queria fazer um pedido pra vc..
    Vc nao poderia criar uma template de sites android?
    Muito util seu blog parabens!!

    ResponderExcluir
    Respostas
    1. Boa ideia Luis Felipe,
      Farei o possível para criar o mais rápido!
      Seja sempre bem vindo ao TPV!

      Excluir
  2. Áurea, não sei se comentei no lugar certo, mas estou me referindo a este tutorial de redes sociais no post-footer, desta maneira que ensinou. Fiz deu certo, muito obrigada, Deus te abençoe.

    ResponderExcluir
    Respostas
    1. Ei Marcia,
      Muito legal que deu certo. Espero poder ajudar sempre!
      Bjks

      Excluir
  3. Simplesmente, o melhor tutorial para estes botões!!

    Muito obrigado!!


    Eronildo,
    ESTANTE VIRTUAL HUBERTO ROHDEN E PIETRO UBALDI

    ResponderExcluir
    Respostas
    1. Que bom que deu certo Eronildo.
      Sinal que estou acertando na forma de ensinar!
      Espero que possa sempre aproveitar os tutoriais daqui!

      Excluir
  4. Oii, como eu colocaria esses botões apenas dentro do post.

    ResponderExcluir
  5. Ola deu certo coloca! mas não compartilhando a postagens que os botões estão ta compartilhando o Google, como faço pra muda?

    ResponderExcluir
  6. Está compartilhando a página em que estou e não o post em questão... Como ajusto isso?

    ResponderExcluir
  7. Obrigada!! Consegui!!! muito obrigada mesmo!!! show de bola seu blog ..curtindo aqui!!! abraço!!!

    ResponderExcluir
  8. Oláááá!

    Eu to colocando os botões, só que acontece o seguinte:

    Os botões ficam na pagina principal (sim, eu quero isso) só que, se eu curtir a postagem do primeiro post, eu vou estar curtindo a pagina principal, e consequentemente todos os curtis que aparecem nos demais posts são curtidos. Já quando eu clico nas postagens, funciona direitinho.

    Eu quero que funcione assim como funciona nos seus templates, se eu curtir uma postagem na pagina principal, eu estarei curtindo a postagem em si, e não a pagina principal inteira!

    Pode me ajudar?

    ResponderExcluir
  9. Olá Áurea, tudo bem?
    Seguinte, fiz tudo certinho, primeiro em blog de testes, depois no principal.
    No de teste funcionou que é uma beleza, exatamente como nos exemplos. Já no principal não aparece, e não sei porque. Será que poderia me ajudar?
    Obrigado!

    ResponderExcluir
  10. Esquece, consegui aqui, obrigado : )

    Agora minha duvida é como colocar uma caixa para as pessoas se inscreverem, se cadastrarem com o email

    Pode me ajudar?

    ResponderExcluir
  11. Ficou super dez, obrigado!

    Gostaria de saber se a amiga sabe de algum aplicativo, ainda que permita a divulgação de nossas postagens nos grupos sociais, do face, não de maneira manual e nem necessáriamente automáticas. Antes tínhamos o Enviar do facebook, e com isso, eu conseguia divulgar para até cem pessoas ou cem grupos, num instante. Todas as postagens. O que facilitava meu serviço. Mas, depois o facebook retirou essa ferramenta importante, e nós ficamos no manual.

    ResponderExcluir
  12. Olá! Como faço para escolher a imagem que vai aparecer depois que o visitante clicar em um botão de compartilhamento?

    ResponderExcluir
  13. valeu !!!!!
    procurei em uns 20 sites,o unico que deu certo foi esse..
    flw

    ResponderExcluir
  14. Foi o único tutorial que deu certo. A dica do "ocultar os botões" de compartilhamento nativo do blog também foi válida. Obrigado

    ResponderExcluir
  15. No primeiro passo está assim:

    Este é o código dos Botões Sociais na horizontal como na imagem acima.
    » Você irá copiar este código e colá-lo onde for indicado de acordo com o local onde deseja colocá-los.

    Não entendi e nem sei onde devo colocar...alguém tem uma dica de onde devo colar isso?

    ResponderExcluir
  16. Olá, quero agradecer pois esse tutorial de plugins me ajudou bastante...foi o que eu queria mesmo :]

    ResponderExcluir
  17. Não da, diz que os códigos que tu da não existe! Affffffff :(

    ResponderExcluir
  18. Olá , usei o código e ficou meio bugado , queria remover o código do meu html , como eu o faço ?

    ResponderExcluir
  19. olá, gostaria de saber como eu posso centralizar os botões. Adorei o tutorial! Beijos.

    http://blogandocomfabiola.blogspot.com

    ResponderExcluir
  20. Muito bom o post. Agradecido por demais! Parabéns! Abraços.

    ResponderExcluir
  21. Aurea,coloquei deu certinho.
    Obrigada,amei o tutorial.
    Sucesso para você!

    ResponderExcluir
  22. Olá Aurea R C, muito obrigado, eu implementei esse código no meu espaço, ficou beleza. Uma pergunta, tem como colocar um plano de fundo neste código para mudar a cor? desde já obgd!

    ResponderExcluir
  23. Olá boa noite, criei um blog de notícias mas ainda não descobri como fazer com que as postagens de publicações sejam redirecionadas automaticamente às suas devidas categorias e subcategorias do template, grato uma boa noite e fiquem com DEUS!!!

    ResponderExcluir
  24. Olá! Eu Segui tudo certinho no seu artigo, mais infelizmente não aparece nada, não sei mais o que faço! Sabe aqueles botões de compartilhar do " Addthis" ? nem eles aparecem no meu blog, estou tão triste. Poderia me dar uma luz ? Abraços e parabéns pelo Blog!

    ResponderExcluir
  25. Essa tag é o que ha de mais no meu código e não sei se devo apagar todas elas ou não?!

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.