Widget contador de redes sociales en WordPress

Widget contador de redes sociales en WordPress

Alberto Lozano 9 / enero / 2016 Tutoriales No hay comentarios    11 visitas
Publicidad

Caja de suscripción con contador social sin plugin

Hoy en día, todos quieren presumir sus seguidores, fans, suscriptores o fieles lectores de los diferentes y populares perfiles sociales, como Twitter, Facebook, Youtube y Google Plus; por dar algunos ejemplos, aunque sabemos que existen otros como Instagram, Tumblr o Pinterest.

Así bien, si posees un blog en el CMS WordPress y quisieras mostrar estas estadísticas en el sidebar del mismo, entonces lo siguiente que te enseñare de seguro lo querrás aplicar en tu sitio web.

widget contador de redes sociales wordpress

Para esto les diremos el como agregar un widget contador de redes sociales en WordPress de una manera muy sencilla, o también le podríamos decir que es una caja de tipo suscripción con contador social incluido sin requerir instalar plugins.

Dicha caja se vera como se muestra en la imagen de arriba una vez se finalice el tutorial. Donde para ello, solo necesitaras agregar unos cuantos códigos mediante el editor de temas de WordPress. Sin más que decir, vamos a empezar.

Nota: El tutorial para la implementación del widget solo se puede adaptar para wordpress.org con hosting propio, más no se podrá en blogs alojados en wordpress.com

1.- Primero y como es obvio, será iniciar sesión, para así dirigirte a Apariencia > Editor y seleccionar la plantilla de Hoja de estilo (style.css).

Ahí tienes que colocar este código hasta el final, después del ultimo cierra llaves “}” y guardar cambios:

/*Inicio Widget contador social V-Junker.com*/
.fb-sidebar{
background: none repeat scroll 0 0 #e7ebf2;
border-bottom: 1px solid #DDDDDD;
padding: 10px;
margin-right:5px
}
.tw-sidebar {
background: none repeat scroll 0 0 #c8e2ef;
border-top: 1px solid white;
padding: 5px 10px;
margin-right:5px
}
.gplus-sidebar {
background: none repeat scroll 0 0 #f1f1f1;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid white;
padding: 5px 10px;
margin-right:5px
}
.yt-sidebar {
background: none repeat scroll 0 0 #E6E6E6;
border-top: 1px solid white;
padding: 10px;
margin-right:5px
}
/*Fin Widget contador social V-Junker.com*/

2.- Después dirigirte al menú de Apariencia > Widgets, para posteriormente activar un widget de tipo “Texto” (Texto arbitrario o HTML) y colocar ahora el siguiente código:

<div class=fb-sidebar>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="https://www.facebook.com/VJunkercomBlog" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
</div>

<div class=tw-sidebar>
<a href="https://twitter.com/vjunkercom" class="twitter-follow-button" data-lang="es">Seguir @VJunkercom</a>

<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>

<div class="gplus-sidebar">
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="https://plus.google.com/111701429812973973796" data-rel="publisher"></div>

<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'es'}
</script>
</div>

<div class="yt-sidebar">
<div class="g-ytsubscribe" data-channel="elbethuko" data-layout="default" data-count="undefined"></div>
</div>

Bien, hecho lo anterior, toca remplazar ciertos textos del código, los cuales en breve pondré lo que hay que modificar:

https://www.facebook.com/VJunkercomBlog – Colocar la URL de tu fanpage de Facebook o remplazando solo “VJunkercomBlog” por el nombre de la tuya. Si no cuentas con una URL personalizada, no importa, también podrás ingresar la numeración que viene, por ejemplo: https://www.facebook.com/209357799125875.

https://twitter.com/vjunkercom y @VJunkercom – Sustituir por tu nick de Twitter.

https://plus.google.com/111701429812973973796 – Cambiar por la URL numeral o personalizada de tu perfil de Google+.

elbethuko – Suplir por el nick de tu canal de Youtube.

Y ¡listo!, solo queda guardar el nuevo widget y ya aparecerá tu nueva caja social. Espero te haya servido este tutorial, si te gusto, por favor comparte este post en tus redes sociales. 🙂

Publicidad

Deja tu comentario

  • Nombre:
    E-mail:
    URL: (opcional)