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>
</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>
<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);
}
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>
¿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.
Otra ejemplo. En este caso simulando unos botones antipixel:
.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;
}
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>
<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:
¿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.
Y muchos más artículos interesantes si nos sigues en...
Muy bien, pero sobre qué etiquetas colocamos el script?
ResponderEliminarSobre 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>).
EliminarEs 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.
EliminarNo. 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.
EliminarMi pregunta es. ¿Hace falta tener una URL personalizada de Facebook o poniendo mi ID en lugar del nombre funciona?
ResponderEliminarGracias de antemano, Alejo.
Perdoná, ya lo probé y funciona con la ID.
EliminarSOLUCIONADO!
Perdonado. Así lo sabemos todos ;)
EliminarLo compartí en mi blog porque me gusto mucho... no hace falta depender de ellos ahora para mostrar nuestros seguidores :D
ResponderEliminarTengo 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?
ResponderEliminarcomo 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!
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.
EliminarPara el contador necesitas poder gestionar una base de datos que en Blogger es inexistente.
Hola!
ResponderEliminarNo conoces algo así para una web?
Es decir, solo con html?
Gracias ;-)
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.
EliminarHola 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
ResponderEliminarHola.
EliminarClaro 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;
}
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?
ResponderEliminarLo inserto justo después de crear el código para mostrar el contador
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.
EliminarMuy interesante este widget la verdad, decir que funciona tambien perfectamente en html ya que acab de probarlo en localhost ^^
ResponderEliminarEs que no todo es exclusivo de Blogger. Cuando es así ya me ocupo de poner una etiqueta ;)
EliminarMuy 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
ResponderEliminarClaro, 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.
EliminarHola, 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?
ResponderEliminarMuchas gracias y saludos.
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?
EliminarMe 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."
ResponderEliminarEso debe ser porque la primera parte la estás poniendo en la plantilla. Pruébalo mejor en un gadget.
EliminarHola, muy bueno el tuto, como se podría agregar los seguidores de una página o cuenta en google+? Gracias
ResponderEliminarEso no lo he descubierto todavía.
EliminarHola 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??
ResponderEliminarCrees no, seguro que no funciona :(
EliminarLa 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?
Hola, hay alguna version actual que funcione el twitter, y de paso con suscriptores de youtube? tal cual como existe en wordpress.
ResponderEliminarUn saludo, y gracias
Hace unos pocos días (en el anterior comentario de hecho), dije que no conocía ninguno que funcionara ahora. Lo siento.
Eliminarya no aparece el contador de twitter?
ResponderEliminarCon este sistema ya no. Debió ser desde cuando Twitter cambió su API. Más info.
EliminarEstaba con el mismo problema t.t
ResponderEliminar