jueves, 14 de julio de 2011

Contador de seguidores de Twitter para Blogger

Este gadget dinámico basado en jQuery y CSS permite mostrar la cantidad de seguidores de Twitter. He creado distintas versiones, tal como pueden apreciar en los siguientes ejemplos:

Vista previa:

Versión 1:


<script charset='iso-8859-1' src='http://dl.dropbox.com/u/28164309/recompressed/jquery151.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'USUARIO-TWITTER'},
dataType: 'jsonp',
success: function(data) {
$('#globo').html(data.followers_count);
}
});
});
//]]>
</script>
<div id="pajaro">
<span id="globo" style="float: right; top:0;"></span></div>
<style type="text/css">
#globo {
width:50px;
padding:6px;
height:37px;
color: #a82e03;
background: url(http://2.bp.blogspot.com/-DygUE5zV7qs/Th6B3v2x79I/AAAAAAAABXc/dHLuweEdq9M/s1600/globoayudabloggers.png) no-repeat;
}
#pajaro {
width:110px;
height:100px;
background: url(http://1.bp.blogspot.com/-22h4Fj6QFh0/Th6AJ2viTnI/AAAAAAAABXY/JlN4OBQ6imo/s1600/twitter-bird.png) no-repeat bottom left;
font-size: 20px;

}
</style>



Versión 2:

En Twitter:

Seguidores

<script charset='iso-8859-1' src='http://dl.dropbox.com/u/28164309/recompressed/jquery151.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'USUARIO-TWITTER'},
dataType: 'jsonp',
success: function(data) {
$('#numero').html(data.followers_count);
}
});
});
//]]>
</script>
<div id="cajadetexto">
<p>En Twitter:</p>
<span id="numero"></span>
<p>Seguidores</p>
</div>


<style type="text/css">

#cajadetexto {
font-family: Tahoma, Geneva, sans-serif;
text-align:center;
width:70px;
border-radius: 5px;
border: 3px solid #66b2ff;
background: #c0deff;
margin:0px auto;
}

#cajadetexto p{
padding:0;
margin:0;
font-size:11px;
}

#numero {

font-size:40px;
}
</style>



Versión 3:


Seguidores en Twitter:
Followers.
¡Sígueme en Twitter!

<script charset='iso-8859-1' src='http://dl.dropbox.com/u/28164309/recompressed/jquery151.min.js' type='text/javascript'></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$.ajax({
url: 'http://api.twitter.com/1/users/show.json',
data: {screen_name: 'USUARIO-TWITTER'},
dataType: 'jsonp',
success: function(data) {
$('#contador').html(data.followers_count);
}
});
});
//]]>
</script>
<div id="container">
<div id="twitter">
<p> Seguidores en Twitter:</p>
<span id="contador"></span> Followers.
<p><a href="http://www.twitter.com/USUARIO-TWITTER">¡Sígueme en Twitter!</a></p>
</div>
</div>

<style type="text/css">
#container {
font-family: Georgia, Serif; 
width: 198px;
height:190px;
margin:0px auto;
background: url(http://1.bp.blogspot.com/-huY870SJTCI/Th6SSj0HZRI/AAAAAAAABXg/9IhHzw-3cHY/s1600/twitter+bird+por+ayuda+bloggers.png) no-repeat;
}
#twitter {
padding-top:120px;
margin-left: 15px;
margin-right:auto;
text-align:center;
}
#container p {
text-align:center;
padding:0px;
margin:0px;
}
#contador {
text-align:center;
font-size: 24px;
}
</style>




Importante:
  • Si tienes instalado jQuery en el blog deberás eliminar la siguiente línea del gadget:
<script charset='iso-8859-1' src='http://dl.dropbox.com/u/28164309/recompressed/jquery151.min.js' type='text/javascript'></script>
  • Si deseas que cree una versión personalizada puedes hacer tu petición vía comentario y se añadirá a la entrada. 
  • Recuerda que el gadget deberás pegarlo en un gadget HTML/Javascript (Ver guía).

No hay comentarios:

Publicar un comentario