Como adicionar botões de compartilhamento de redes sociais nas postagens do blog

Olá. A algum tempo, fiz um tutorial sobre Botões de compartilhamento de redes sociais nas postagens , porém, algumas pessoas informaram que em seus blogs esse método para adicionar os botões,não esta funcionando corretamente. Isso depende muito do modelo do seu blog. Caso você não tenha conseguido pelo outro tutorial, siga esse novo, pois funcionara. E caso você não consiga por esse. Leia essa outra postagem Botões de compartilhamento de redes sociais nas postagens .

Acesse o painel do seu blog. Vá em Layout, Modelo , Editar HTML , CTRL + F e procure por essa linha;

<img alt='' class='icon-action'

No final desse trecho procure por  </b:if> , abaixo cole o seguinte código ;

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


Veja como deve ficar corretamente na imagem abaixo;

 

 

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.

Até a próxima !!!