Botões de compartilhamento de redes sociais nas postagens

 
Vamos aprender a adicionar os botões de compartilhamento no rodapé das postagens, assim como esse da imagem. Eles são muito bons para divulgar suas postagens nas redes sociais. Já fiz alguns posts semelhantes, porém achei esse mais fácil e sem erros, pois alguns leitores me enviaram e-mails dizendo que tiveram problemas na instalação dos outros códigos.

Para instala-lo, vá no painel do seu blog, layout, editar html e dentro do código de seu blog, procure pelos seguinte trecho. 

 <div class='post-header'>

    <div class='post-header-line-1'/>

Adicione o código da caixinha, abaixo do trecho encontrado. Os botões ficaram na parte de cima da postagem, do lado da data.

<!-- 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'/>

Para adicionar os botões no rodapé das postagens, procure por esse trecho. Abaixo dele cole o código que está na caixinha acima.

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>


Caso você deseja adicionar o código antes do botão leia mais, para que ele apareça antes do conteúdo completo, procure pelo trecho abaixo. Assim como os dois exemplos acima, cole o código da caixinha, abaixo do trecho encontrado.

<b:if cond='data:post.emailPostUrl'>

Para os seus botões funcionarem corretamente, não esqueça de desmarcar as opções de compartilhamento padrão do blog nas suas postagens assim como mostra a imagem abaixo.

OBSERVAÇÃO ;


Caso não consiga seguindo os passo acima, leia essa outra postagem  Como adicionar botões de compartilhamento de redes sociais nas postagens do blog .