Mil Trucos Blogger

Botones para 21 Redes Sociales con Contador

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

El sitio en cuestión es GetShares y dispone de un instalador para generar el código de cualquier botón con tres opciones de estilo, pero lo más interesante a mi parecer es aprovechar su API para poder crear una andanada de botones.

Para crear nuestros botones sociales tendremos que ir al editor pulsando “create your own”, seleccionar el botón para su personalización y copiar los códigos (usuarios avanzados) para su configuración. Podemos hacer uso gratuitamente de los archivos JS y CSS del proyecto siempre que se respeten las licencias de copyright.

Eso sí, el JavaScript no es autosuficiente y si algún día GetShar.es deja de ofrecer el servicio, aunque tengas el control del código los botones dejarán de funcionar.

Eso sí, el JavaScript no es autosuficiente y si algún día GetShar.es deja de ofrecer el servicio, aunque tengas el control del código los botones dejarán de funcionar.

 
¿Como agregarlo a Blogger?
Bueno en esta entrada le mostrare un forma fácil de instalar estos botones con las redes sociales mas usadas.

Solo debemos insertar este codigo en donde queremos que aprescan:

<!-- BOTONES SOCIALES GETSHARES -->
<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: @codeblogger&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>

Ahora solo cambiamos lo que esta en ROJO por nuestra cuenta de Twitter

Fuentes: Oloblogger, Checkapps

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo