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.
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 nosso blog.
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 == "item"'>
<!-- 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 = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</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 == "item"'>
<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='"http://pinterest.com/pin/create/button/?url=" + 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 > 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:
♦ 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 == "item"'>
<!-- 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'/>► Copie e cole o código dos botões sociais logo abaixo da linha ▼
<div class='post-header-line-1'/>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 aqui.
♦ 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'> <div class='post-footer-line post-footer-line-1'>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 aqui.
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!☺
Comentários
Postar um comentário