Como añadir los botones de Redes Sociales debajo de tus entradas

Hoy vamos a ver como podemos añadir unos botones de redes sociales que son muy elegantes para nuestros blogs, tienen un diseño limpio y lo mejor de todo es que son fáciles de implementar y lo mejor de todo es que no necesitaremos tocar el código es muy conveniente para los que no saben como hacer edición HTML en su blog.


Esté es el aspecto que tendrán los códigos implementados y una de las características que no mencione es que también tienen contador y se actualiza automáticamente y a continuación te mostraré como puedes hacerlo de una manera muy sencilla.


Pega esté código que te daré mas abajo en tu blog. Tienes que seguir el siguiente proceso: Ve a Diseño - Añadir un Gadget -  HTML/Javascript y añade el código, guárdalo y disfruta de la nueva característico de tu blog:

<!-- BOTONES SOCIALES -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $(&quot;#buttons&quot;),
counter: {
position: &quot;inside&quot;
},
share: {
url: &quot;<data:post.canonicalUrl/>&quot;,
imageUrl: &quot;<data:post.firstImageUrl/>&quot;,
message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía: @oloman&quot;
}
};
new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));
new GetShare($.extend(settings, {network: &quot;twitter&quot;}));
new GetShare($.extend(settings, {network: &quot;facebook&quot;}));
new GetShare($.extend(settings, {network: &quot;linkedin&quot;}));
new GetShare($.extend(settings, {network: &quot;pinterest&quot;}));
new GetShare($.extend(settings, {network: &quot;pocket&quot;}));
//Más redes en http://getshar.es/
}).call(this);
</script>
</b:if>

Como verás estos botones se actualizarán cada vez que alguien comparta en cualquier red social que esta en el código y se sumara el numero que se ha compartido.

Por está ocasión es todo, es muy fácil implementarlo, pero en todo caso si quieres implementar el código debajo de las entradas puedes buscar en HTML "line-3" y justo debajo pegar el código.

Si quieres recibir mas Gadgets, Widgets, Trucos y Tutoriales para blogger directamente por correo electrónico suscribete gratis a nuestro blog, visita nuestra página de facebook o añade nuestro feed Rss.


Compartelo!:

4 comentarios:

  1. Mucho jquery para mi blog,se vuelve lento y a veces no funcionan los gadgets. Se debería implementar un código sin el jquery

    ResponderEliminar
  2. Hola, como podria hacer estos iconos mas grandes?

    ResponderEliminar
  3. como hago para editar los botones ?

    ResponderEliminar
  4. como se donde se encuentra el line-3 ya que tengo la plantilla date a live y no lo encuentro si alguien me responde muchas gracias

    ResponderEliminar

- Antes de hacer una consulta (pregunta), por favor utiliza el Buscador.

- Por favor, cualquier otra pregunta que tengas, la puedes hacer en la entrada correspondiente.

- Haremos todo lo posible por responderte o acusarte recibo antes de 24 horas. A veces, podremos hacerlo, otras veces no será posible, y nos tomará un poco más… ten paciencia.

- Los comentarios que a mi criterio se escriban solo para dejar un enlace o un link seran eliminados.

- ¡Muchas gracias por comentar o por preguntar!