La vinculación de nuestros blogs con la redes sociales es algo importante y fundamental para obtener buenas visitas a neustro sitio sea cual sea su temario, así que hoy les compartiré y enseñaré como poner o colocar los botones de redes sociales en cada una de las entradas de nuestros blogs, al final se verá así:
Para lograr esto muy sencillo haremos los siguientes pasos:
1. Nos dirigimos PLANTILLA | EDICIÓN HTML y allí buscamos el código </head> , antes de este pegamos lo siguiente:
<b:if cond='data:blog.pageType == "item"'>Hecho esto; ahora buscaremos esta línea:
<script type='text/javascript'>
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
</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>
<div class='post-header-line-1'/>
Si les sale dos veces la anterior línea peguenlo en la segunda aunque varia según el blog pueden probarlo debajo de las que están hasta que funcione, ahora justo debajo de ese código pegamos lo siguiente:
<b:if cond='data:blog.pageType == "item"'>
<div id='barrasocial'>
<div class='cabecera'>
<h5>COMPARTE»»</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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=true&width=120&action=like&font=arial&colorscheme=light"' 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>
Y estuvo ahora en cada entrada de nuestro blog, aparecerán los botones sociales para compartir nuestras publicaciones.
Hasta la próxima,