Mostrar los seguidores de twitter con imagen y texto

Encontrar esta forma de mostrar los seguidores de twitter que no sea el mismo boton se a vuelto muy buscado en internet,bueno hoy yo les boy brindar el codigo con el cual vamos a poder mostrar nuestros seguidores de twitter de la forma y el estilo que uno quiera depende de la imaginacion de cada cual pero yo se los voy a mostrar con una imagen la cual pueden remplazarla por la que ustedes quieran,este codigo se los boy a brindar en un gadget para que sea mas sencillo y para que no tengan que batallar con la plantilla a continuacion les muestro un ejemplo y los pasos a seguir.

Una ves visto el ejemplo vamos a colocar el codigo para eso vamos a :


Diseño>añadir gadget >html-javascript y pegamos el siguiente codigo:
codigo para la primera imagen:

<script language='javascript' type='text/javascript'>
function snfbc(json){
document.write(parseInt(json.value.items[0].feed.entry.circulation));
}
function xfeedburner(uri){
    if(uri){
    document.write('<sc'+'ript src="http://pipes.yahoo.com/pipes/pipe.run?_id=e61a81bcdb1660ebf8bc1a7c130f1f7b&_render=json&uri='+uri+'&_callback=snfbc" type="text/javascript"></s'+'cript>');
    } else{
    return false; 
    }
}

function sntwitter(json){
document.write(parseInt(json.followers_count));
}
function xtwitter(user){
    if(user){
    document.write('<scr'+'ipt src="http://twitter.com/users/show/'+user+'.json?callback=sntwitter" type="text/javascript"></scr'+'ipt>');
    } else{
    return false;
    }
}

</script>
<div style='float:left;padding:8px;'>
<img src="http://img72.imageshack.us/img72/5376/twittery.png" style="margin-right: 8px; float:left;" />
<a href="http://twitter.com/tubetrucos" target="_blank" ><span style="float: left; margin-top:2px;padding:0;font-size:18px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
<script type="text/javascript"> xtwitter("tubetrucos") </script> Seguidores en twitter</span><br /><!--[if IE]><br /><![endif]-->
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">Sigueme en twitter</span></a></div>

Donde dice:
 tubetrucos   Lo deben de cambiar por su propio id de twitter
 img src        es la imagen que vamos a usar
Lo que esta en naranja (orange) lo pueden modificar a sus gustos


 codigo para la segunda imagen:

 <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: 'tubetrucos'},
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>
<span style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;"><a href="http://twitter.com/tubetrucos">Sigueme en twitter</a></span>

Donde dice :
tubetrucos   Lo deben de cambiar por su propio id de twitter
background: url    son las imagenes que vamos a usar en este codigo

Lo que esta marcado deben de cambiarlo ,modificarlos de acuerdo a su estilo del sitio pueden cambiar el color del texto el tamaño y mucho mas .
Bueno una ves hecho esto y modificado los cambios guardamos y es todo ya tienen  Seguidores de twitter  personalizado a su gusto.
bueno es todo espero y les haya servido en algo

Tweet

Compartir esta entrada :

Quizás también le interese:

Sí disfrutas de estas entradas solo has click aquí, o suscribete para recibir mas entradas como estas.

Subscribirse por RSS Feed

Su informacion nunca sera compartida.