Tutorial: Añade botones de redes sociales con contadores a tu blog

  • Autor Autor nxovoix
  • Fecha de inicio Fecha de inicio
N

nxovoix

Gamma
Redactor
Hola amigos les traigo estos botones elegantes con contador para sus blogs espero les guste.. son muy faciles de instalar:

solo vamos a donde queremos ponerlos y pegamos esto:

HTML:
<!-- 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: @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>

captura Gracias a anferro:

9PYSuoK.png


y listo! :3 espro les sirva 😀
 
Última edición:
Tema aprobado y agregado al listado de tutoriales.
 
muy buen aporte tienen este aspecto:
9PYSuoK.png
 
excelente andaba buscando esto.. :encouragement:
 
yo quiero esto pero y como lo coloco?? quisiera que aparezca al final de todas mis entradas.. como puedo configurar?
 
¿Alguien me puede ayudar en decirme donde poner este código si los quiero al final de las entradas? por favor.

- - - Actualizado - - -

Si aún no los has puesto [MENTION=113621]meregistro[/MENTION] va abajo de esta linea:
HTML:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Asi se verán abajo de cada entrada.
 
si quiero colocarlo en la parte su perior de cada entrada como hago amigo.
 
si quiero colocarlo en la parte su perior de cada entrada como hago amigo.

Hola capo ¿Todavía estas con esto? Mira, si lo querés poner arriba, lo que tenes que hacer es

1- Ir a tu página y clickear (derecho) en la parte que lo quieras agregar. Click en inspeccionar elemento.
2- Revisas la parte del código en la que está lo mencionado y sacas un fragmento importante.
3- Vas a editar plantilla en html y buscas ese codigo, lo pegas por debajo.

Avisame si te funciona. Por las dudas hacelo en un blog de prueba o descarga una copia antes de editar. Saludos
 
Perfecto me funciona de lujo :welcoming::encouragement:
 
Muy bueno!! Gracias :encouragement:
 
se me descuadra la home del blog, la barra lateral derecha se baja. ¿alguien sabe qué hacer?
 
gracias por compartir
 
muy bueno, botones bastante pro
 
muy bonito, pero los scripts hacen mucha carga

<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'/>
 
no me gusta tanto ese aspecto prefiero los otros botoncitos pero buen aporte
 
Alguien sabe como hacerlos mas grandes? es que me aparecen muy pequeños, ojalá me pudieron ayudar.:watermelon:
 
¿Dónde coloco eso? :topsy_turvy:
 
gracias compañero, a seguir adelante! :encouragement:
 
Atrás
Arriba