Contador de seguidores Facebook y Twitter: Egómetro | Oloblogger En esta entrada veremos cómo obtener el número de seguidores de dos de las redes sociales más populares, Facebook y Twitter. La idea es ai...

21 de julio de 2012

Contador de seguidores Facebook y Twitter: Egómetro

En esta entrada veremos cómo obtener el número de seguidores de dos de las redes sociales más populares, Facebook y Twitter.

La idea es aislar el dato de la cantidad de followers o fans para no tener que utilizar los gadgets oficiales de estos servicios y poder utilizar dónde lo necesitemos, sólo esa parte de la información.

Estas cifras las extraeremos con JSON leyendo los datos con jQuery, por lo que se hace imprescindible esta última librería. En la primera línea de este código está la llamada a las librerías de Google que la carga. Si ya estáis usando jQuery esa línea es innecesaria.

Como lo normal será incluir esto como gadget, el código está preparado para añadirlo a uno tipo HTML/JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
var f_page = 'oloblogger';
var t_page = 'oloman';


$(document).ready(function(){
$.getJSON('https://graph.facebook.com/'+f_page+'?callback=?', function(data) {
var fb_count = data['likes'];
$('#fb_count').html(fb_count);
});

$.getJSON('http://api.twitter.com/1/users/show.json?screen_name='+t_page+'&callback=?', function(data) {
twit_count = data['followers_count'];
$('#twitter_count').html(twit_count);
});

});
</script>

Hay un par de variables para personalizar los resultados con los sitios de cada cual. La primera es el nombre de vuestra página facebook, la última palabra de la dirección (http://www.facebook.com/oloblogger). La segunda es vuestro usuario Twitter sin el símbolo @ o también la última palabra de vuestro perfil en este servicio (http://www.twitter.com/oloman).


Para mostrar los datos ya sólo resta crear dos capas con las correspondientes ID a continuación del script. Una será twitter_count y la otra fb_count. Así:

<span id="twitter_count"></span>
<span id="fb_count"></span>





Pero esto de aquí arriba es lo único que obtendremos, dos tristes y solitarios números, por lo que para solucionar del todo el asunto, ya tenemos que recurrir a CSS y sobre todo a la imaginación de cada uno.

La siguiente sería sólo una idea a modo de ejemplo de entre la infinidad de posibilidades:

.cuadroredes {
width: 120px;
margin: 0px auto;
text-align: center;
padding: 10px;
font-size: 18px;
background-color: #CCC;
border-radius: 10px;
box-shadow: 0 0 30px black;
}
.twitterimg {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVAOT9ATi4JkgkzCVQlmTvoaJ6PfwtLJ0D7attYKgtxi6p8r1Phbzeybjnz9V4_Kg9iRgXCBKPRoUz1BII9DhhvRrkXNW4wvC46XLBg9W2Ban2ShH4X2YbMwSr5zFYhmDoCBlq-oQDZ0/s32/twitter-follow-32.png) -4px -4px;
}
.facebookimg {
display: inline-block;
vertical-align: middle;
width:32px;
height:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRx3GG5n3LxZ6QxUHXLoddvkd9ODzmaH0f77qJuBX3VQmdyAHkTSHxfmOe95QYRcaGhnVsN4671rX83_icVEtUcfZDglTKXISKQ1Vg_yGuAr0Xps2ynxR_YTyr8CcC_DDna2ZrJEX2j0E/s32/facebook-32.png);
}

<div class="cuadroredes">
¿Nos sigues?

<a class="twitterimg" href="http://www.twitter.com/oloman"></a> <span id="twitter_count"></span>
<a class="facebookimg" href="http://www.facebook.com/oloblogger"></a> <span id="fb_count"></span></div>


Código que nos daría un pequeño cuadro con un par de imágenes que enlazan a nuestros perfiles y que nos muestran el número de seguidores/fans actuales.

¿Nos sigues?




Otra ejemplo. En este caso simulando unos botones antipixel:


Twitter

Facebook

.antipixel {
position: relative;
width: 88px;
height: 15px;
margin: 0px auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLYg6d39QbzybAlRzXJIptsdha09ssxchVBwDaT7o31kMS9PzH8rMBQgGuv7SpRMvl_xM-mFVc52vFh5JM3P0P_bxsBe_aOv_zrN2FJZM-h5dD9Ksf-cYolCufPAMwVu60HNhmyRBdpE/s1600/antipixel.jpg);
font-family: arial;
font-size: 9px;
}
.antipixel a, .antipixel .nombre {
position: absolute;
top: 3px;
left: 0;
width: 38px;
height: 10px;
color: #000;
text-align: right;
}
.antipixel .nombre {
width:50px;
left: 43px;
text-align: left;
}

<div class="antipixel"><a href="http://www.twitter.com/oloman"><span id="twitter_count"></span></a><span class="nombre">Twitter</span></div>

<div class="antipixel"><a href="http://www.facebook.com/oloblogger"><span id="fb_count"></span></a><span class="nombre">Facebook</span></div>

Idea basada en un código de Dmolsen (Github)

Actualización BPT. Personaliza y carga este gadget automáticamente en Blogger:




http://www.facebook.com/
http://www.twitter.com/


Añadir a Blogger

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

33 comentarios :

  1. Muy bien, pero sobre qué etiquetas colocamos el script?

    ResponderEliminar
    Respuestas
    1. Sobre ninguna. En el post se indica que ese código es para poner en un gadget, aunque si quieres ponerlo en la plantilla habría que hacerlo antes del cierre del head (</head>).

      Eliminar
    2. Es que no entendí mucho. habría que poner los 6 bloques de códigos, uno tras otro, en un mismo gadget? Yo quiero poner el cuadro gris con el pajarito de twitter y el icono de fb, pero tanto código me ha liado. No sé qué tengo que copiar.

      Eliminar
    3. No. Son distintos ejemplos. Para lo que quieres tendrías que añadir el bloque tres (entre etiquetas STYLE), a continuación el 1 y por último el 4.

      Eliminar
  2. Mi pregunta es. ¿Hace falta tener una URL personalizada de Facebook o poniendo mi ID en lugar del nombre funciona?

    Gracias de antemano, Alejo.

    ResponderEliminar
    Respuestas
    1. Perdoná, ya lo probé y funciona con la ID.

      SOLUCIONADO!

      Eliminar
    2. Perdonado. Así lo sabemos todos ;)

      Eliminar
  3. Lo compartí en mi blog porque me gusto mucho... no hace falta depender de ellos ahora para mostrar nuestros seguidores :D

    ResponderEliminar
  4. Tengo una pregunta que no tiene nada qe ver con esto.. pero no sé donde ponerlo, vi este blog: http://quieroleersinlimites.blogspot.com.ar/ y me quedó la gran duda de varias cosas: como hace para qe su menu de páginas tenga ese efecto de ir bajando como abriendo cosas?
    como es esa barra de imagenes con enlaces?
    y también si tenes alguna idea de si hay un contador para los libros que va leyendo, del avance..
    te lo agradecería muchisimo, estoy buscando por todos lados esas cosas! mucha suertee!

    ResponderEliminar
    Respuestas
    1. Pues creo que eso sólo se puede hacer con algún tipo de script. Si quieres algo similar pero sin esa transición suave, voy a ver si puedo publicar algo que tengo esbozado hace tiempo.

      Para el contador necesitas poder gestionar una base de datos que en Blogger es inexistente.

      Eliminar
  5. Hola!
    No conoces algo así para una web?
    Es decir, solo con html?
    Gracias ;-)

    ResponderEliminar
    Respuestas
    1. El código de esta entrada no es HTML sino JavaScript, pero lo puedes utilizar para cualquier tipo de web y no sólo para Blogger, si es eso a lo que te refieres. Con HTML sólo estoy casi seguro de que no se puede hacer.

      Eliminar
  6. Hola Oloman, muy bueno el truco, pero quisiera saber si se puede poner algunos estilos a los números, pues como el color y el tamaño, GRACIAS

    ResponderEliminar
    Respuestas
    1. Hola.
      Claro que sí. Sólo tienes que dar estilo a #twitter_count y a #fb_count. Esas son las que forman los números. Por ejemplo:
      #twitter_count {
      color: red;
      }

      Eliminar
  7. Oloman, quiero colocar este truco en mi blog, pero cuando inserto el código CSS me aparece escrito en mi blog y no me hace lo que esperaba. Como puedo solucionarlo?
    Lo inserto justo después de crear el código para mostrar el contador

    ResponderEliminar
    Respuestas
    1. El código CSS tiene que ir en la plantilla entre las etiquetas SKIN. Si lo pones en la parte HTML es cuando te sale escrito porque no se interpreta. Echa un vistazo a este post.

      Eliminar
  8. Muy interesante este widget la verdad, decir que funciona tambien perfectamente en html ya que acab de probarlo en localhost ^^

    ResponderEliminar
    Respuestas
    1. Es que no todo es exclusivo de Blogger. Cuando es así ya me ocupo de poner una etiqueta ;)

      Eliminar
  9. Muy bueno gracias por el aporte ya lo implemente a mi pagina, solo me podrías ayudar con el contador de Google+ solo faltaría eso para que este completo... Saludos amigo

    ResponderEliminar
    Respuestas
    1. Claro, pero es que eso no sé hacerlo :) De hecho creo que no se puede hacer si no es usando PHP, un lenguaje que en Blogger tiene difícil acople.

      Eliminar
  10. Hola, no sé si me podrás ayudar con mi duda, pero es que en la ayuda de facebook no encuentro la solución. Se trata de que en mi página de facebook (hace un mes que la tengo como complemento a mi blog), hace unos días que no aumenta el contador de "me gusta", o sea, de mis seguidores. Sin embargo, me han llegado notificaciones de gente que le da a me gusta, pero no aparecen. ¿A ti te ha pasado esto alguna vez?
    Muchas gracias y saludos.

    ResponderEliminar
    Respuestas
    1. Pues no, no me ha ocurrido nunca. Pero como reza el principio de la navaja de Occam, cuando dos teorías compiten la más simple es probablemente la correcta ¿No será gente que pinchó en el "Me gusta" para ver si tú a su vez los seguías y luego quitaron el like tras un tiempo?

      Eliminar
  11. Me sale este error "Se ha producido un error al analizar el XML, línea 635, columna 84: The reference to entity "callback" must end with the ';' delimiter."

    ResponderEliminar
    Respuestas
    1. Eso debe ser porque la primera parte la estás poniendo en la plantilla. Pruébalo mejor en un gadget.

      Eliminar
  12. Hola, muy bueno el tuto, como se podría agregar los seguidores de una página o cuenta en google+? Gracias

    ResponderEliminar
  13. Hola amigo super tu blog, se aprende mucho, pero el de twitter con la actualización del api creo que ya no funciona, podrías actualizarlo??

    ResponderEliminar
    Respuestas
    1. Crees no, seguro que no funciona :(

      La verdad es que ahora mismo no sé cómo se podría sacar ese dato sin PHP. Me lo apunto para verlo y en su caso publico un artículo. Si lo descubres antes me avisas por aquí ¿OK?

      Eliminar
  14. Hola, hay alguna version actual que funcione el twitter, y de paso con suscriptores de youtube? tal cual como existe en wordpress.

    Un saludo, y gracias

    ResponderEliminar
    Respuestas
    1. Hace unos pocos días (en el anterior comentario de hecho), dije que no conocía ninguno que funcionara ahora. Lo siento.

      Eliminar
  15. ya no aparece el contador de twitter?

    ResponderEliminar
    Respuestas
    1. Con este sistema ya no. Debió ser desde cuando Twitter cambió su API. Más info.

      Eliminar
  16. Estaba con el mismo problema t.t

    ResponderEliminar