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

CLASSIFICAÇÃO DO TUTORIAL
FÁCIL

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:

• SoBoo
• AddThis
• Share This
• Shareaholic

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?

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!☺