Revista Gadgets

Botones sociales para compartir

Publicado el 29 septiembre 2014 por Danyca
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.
Botones sociales para compartir
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.
Botones sociales para compartir
Pega esté código que te daré. 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.

Volver a la Portada de Logo Paperblog

Dossier Paperblog

Revistas