BARRA PARA COMPARTIR EN REDES SOCIALES BAJO EL TÍTULO DE LA ENTRADA.

VER DEMO

Este es otro de los tantos tutoriales para compartir en las redes sociales, pero esta vez lo mostraremos bajo el título de la entrada del blog, consiguiendo un bonito efecto para que los lectores puedan compartirlo, pero seguro que le resultará útil a varias personas más. Hay muchos tutoriales en Internet de como colocar los botones, pero todos ellos sin una marcación clara y definida, por ello os traigo esta forma tan elegante de mostrarlo en vuestros blog.


También puedes ver otras formas de agregar los botones sociales:
Una elegante forma de agregar los botones sociales
Una simpática forma de agregar los botones sociales

Veamos como agregar estos botones bajo el título de la entrada:
PASO 1. Ir a plantilla → Edición Html.
PASO 2. Presiona "Ctrl+F" para que aparezca el buscador de tu navegador y busca esta linea:</head> y antes de ella coloca lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src=&quot;//platform.twitter.com/widgets.js&quot;;d.parentNode.insertBefore(a, d)}})(document, &quot;script&quot;, &quot;twitter-wjs&quot;);
</script>
<style type='text/css'>
#barrasocial {
float: left;
border-top: 1px solid #eaeaea;
border-bottom: 1px solid #eaeaea;
width: 580px;
margin-bottom: 20px;
margin-left: -10px;
margin-top: 10px;
}
.cabecera h5 {
float: left;
padding-right: 20px;
font-size: 16px;
padding-top: 14px;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding-left: 10px;
}
.rtwitter, .rface, .g-plusones {
float: left;
border-left: 1px solid #eaeaea;
padding-left: 18px;
padding-top: 15px;
padding-bottom: 10px;
}
.g-plusones {
margin-left: 30px;
}
</style>
</b:if>

PASO 3. Presionamos de nuevo "Ctrl+F" y buscamos: <div class='post-header-line-1'/> y justamente debajo colocamos lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='barrasocial'>
<div class='cabecera'>
<h5>COMPARTE&#187;&#187;</h5>
</div>
<div class='rtwitter'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='rface'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=120&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:120px; height:21px'/>
</div>
<div class='g-plusones'>
<g:plus action='share' annotation='bubble' expr:href='data:post.url'/>
</div>
</div>
</b:if>

En ocaciones hay varias lineas iguales por lo que el buscador interno de tu navegador te mostrará varias, normalmente sería la segunda pero si no es así la colocaríamos en la primera.

Listo, ahora debajo de cada título de nuestros posts aparecerán los botones para compartir.

La barra con los botones para compartir solo son visibles en las entradas individuales.

Imprimir artículo