Un FanBox para Twitter personalizable

Hemos visto con anterioridad dos FanBox para Twitter, que no son otra cosa mas que gadgets que muestran los seguidores que tenemos en Twitter. El primer FanBox para Twitter que vimos es proporcionado por Moopz, un buen gadget pero que no tiene muchas opciones de personalización. El segundo que vimos fue un FanBox para Twitter que muestra los avatares en forma deslizante, muy llamativo aunque no se parece tanto al FanBox tradicional de Facebook.

El siguiente FanBox para Twitter que veremos (llamado por su autor "Twitter Follow Box") también está hecho con jQuery, pero con dos ventajas, una es que tiene un aspecto más semejante al de Facebook, y otra es que podemos personalizarlo mucho más, cambiarle el color de los nombres, del título, del borde, del fondo, incluso ponerle una imagen de fondo si se desea.

Sin embargo, cualquiera de estas tres opciones sufren de un problema constante, y es que suelen no mostrarse de vez en cuando, así que antes de usar cualquiera de estos tres habrá que considerar ese problema, que habrá veces en las que no se vea y de repende se mostrará otra vez.

Este es el FanBox para Twitter del que hablamos.

Este gadget lo pondremos todo dentro de un elemento HTML/Javascript para evitar tocar la plantilla, así que sólo entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

<style>.follow_box_widget{overflow: hidden; padding-left: 5px; padding-right: 5px; padding-top: 5px; background-color: #fff transparent; position: relative; margin: auto;}.follow_box{font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; color: #333; line-height: 1.28; text-align: left; direction: ltr;}.follow_box .follow_top{padding: 5px 10px 0px 5px; margin-bottom: 8px; min-width: 230px; overflow: hidden;}.follow_box .profileimage{float: left; width: 40px; height: 40px; padding: 0px; margin: 0 10px 4px 0;}.follow_box img{border: 0;}.follow_box a{cursor: pointer; color: #3B5998; text-decoration: none;}.follow_box a:hover{text-decoration: underline;}.follow_action{padding: 0 0 0 8px;}.follow_box .follow_action .name{line-height: 15px; font-size: 14px; font-weight: bold;}.follow_box .follow_button{margin: 5px 0 0;}.follow_box .total{min-width: 230px; overflow: hidden; display: block;}.follow_box .connections{padding: 5px 0 4px 0px; border-top: solid 1px #D8DFEA; border-bottom: 1px solid #CCC; min-height: 150px;}.follow_box .connections .connections_grid{padding-top: 5px; overflow: hidden;}.follow_box .clearfix{zoom: 1;}.follow_box .connections .connections_grid .grid_item{float: left; margin:0px; margin-right: 5px; margin-bottom: 8px; overflow: hidden; width: 50px;}.follow_box .connections .connections_grid .grid_item .name{font-size: 9px; color: gray; overflow: hidden; padding-top: 2px; text-align: center; white-space: nowrap;}.follow_box .connections .connections_grid .grid_item img{width: 48px; height: 48px;}.follow_box .follow_widget_footer{ cursor: default; width: 100%; min-width: 230px; overflow: hidden;}.follow_box .footer_border{ margin-top: 5px;}.follow_box .uiImageBlock{line-height: 14px;}.follow_box .follow_widget_footer .footer_logo{float: left; margin-right: 5px;}.follow_box .follow_widget_footer .footer_text{cursor: default; color: #808080; font-size: 9px; float: left;}.follow_box .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}.follow_box .titlecase{text-transform:capitalize;}.dark{background: #333;}.dark a,.dark .total, .dark .connections .connections_grid .grid_item .name, .dark .follow_widget_footer .footer_text a.footer_text_link{color: #808080;}.dark .connections{border-bottom: 1px solid #444;}</style>
<script>
/*
* Twitter Follow Box jQuery Plugin
* http://jobyj.in/twitter-follow-box-widget/
* Copyright 2012, Joby Joseph
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(a){a.fn.followbox=function(b){function f(a,b){if(a>100)a=100;var c=new Array;for(var d=0;d<a;d++){c.push(b[d])}var e=c.join();return e}var c=a(this);var d="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYDaPOsSDO70wpKsd9PP165Tv5JKki58zP-Q1m-Sn8QL1bV8-zN9iJbzaz8Ocb6e6AiP9WFrc0qQ5LhpvJbGL2JYWSucEF_aMg8Lcf1lXDRyuRd5HvfdsYXbkgzBD7mLyz5AQjv8wlng/";var e=a.extend({user:"jobysblog",width:292,height:252,theme:"light",border_color:"#AAA",bg_color:"#fff",bg_image:"",title_color:"#3B5998",total_count_color:"#333",follower_name_color:"#BBB"},b);a.ajax({url:"http://api.twitter.com/1/users/lookup.json?screen_name="+e.user+"&include_entities=true",dataType:"jsonp",success:function(b){var g=e.width-2;var h=e.height-2;var i=e.height-115;var j=parseInt(e.width/55);var k=parseInt(i/69)+1;var l=j*k;c.html('<div class="follow_box_main" style="border: 1px solid #bbb; width: '+g+"px; height: "+h+'px;"><div class="follow_box_widget"><div class="follow_box"><div><div class="follow_top clearfix"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><img class="profileimage img" src="'+b[0].profile_image_url_https+'" alt="'+b[0].name+'"></a><div class="follow_action"><div class="name_block"><a href="http://www.twitter.com/'+e.user+'" target="_blank"><span class="name titlecase">'+b[0].name.toLowerCase()+"</span> @"+b[0].screen_name+'</a></div><div class="follow_button"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name='+e.user+'&show_count=false&show_screen_name=false&lang=es" style="width:100px; height:20px;"></iframe></div></div></div><div class="connections"><span class="total"><span class="follow_box_follower_count">'+b[0].followers_count+'</span> personas siguen a <b class="titlecase">'+b[0].name.toLowerCase()+'</b></span><div class="connections_grid clearfix" style="height:'+i+'px;"></div></div></div><div style="height: 23px"><div class="follow_widget_footer"><div class="footer_border"><div class="clearfix uiImageBlock"><a class="footer_logo" target="_blank" href="http://jobyj.in/twitter-follow-box-widget"><img src="'+d+'"/></a><div class="footer_text"><a class="footer_text_link" target="_blank" href="http://jobyj.in/twitter-follow-box-widget">Twitter Social Plugin</a></div></div></div></div></div></div></div></div>');if(e.theme=="dark"){c.find(".follow_box_main").addClass("dark")}c.find(".follow_box_follower_count").text(c.find(".follow_box_follower_count").text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g,"$1,"));if(a.browser.msie&&!a.support.boxModel)a(".follow_box .connections").css("padding-bottom","14px");if(e.theme=="custom"){c.find(".follow_box_main").css({"border-color":e.border_color,"background-color":e.bg_color,"background-image":'url("'+e.bg_image+'")'});c.find(".follow_box a").css({color:e.title_color});c.find(".follow_box .total").css({color:e.total_count_color})}a.ajax({url:"https://api.twitter.com/1/followers/ids.json?cursor=-1&screen_name="+e.user,dataType:"jsonp",success:function(b){var d=f(l,b.ids);a.ajax({url:"https://api.twitter.com/1/users/lookup.json?user_id="+d+"&include_entities=true",dataType:"jsonp",success:function(b){for(var d=0;d<b.length;d++){var f=a.trim(b[d].name);var g=f.split(" ");var h='<div class="grid_item"><a href="http://twitter.com/'+b[d].screen_name+'" target="_blank"><img class="img" src="'+b[d].profile_image_url+'" alt=""><div class="name titlecase">'+g[0].toLowerCase()+"</div></a></div>";c.find(".connections_grid").append(h)}if(e.theme=="custom"){c.find(".connections .connections_grid .grid_item .name").css({color:e.follower_name_color})}}})}})}})}})(jQuery)
</script>

<script>
$(document).ready(function(){
$('#twitterfollowbox').followbox({
'user':'usuario',
'theme':'custom',
'height':'250', // Altura del gadget
'width':'287', // Ancho del gadget
'border_color':'#cccccc', // Color del borde
'bg_color':'#ffffff', // Color de fondo
'bg_image':'', // Imagen de fondo
'title_color':'#3B5998', // Color del título
'total_count_color':'#333333', // Color del contador
'follower_name_color':'#BDBDBB' // Color del nombre de los usuarios
});
});
</script>

<div id="twitterfollowbox" class="follow-box-container"> </div>

Pon tu nombre de usuario de Twitter donde se indica (sin la @) y listo.
Si ya tuvieras jQuery en la plantilla no pongas la primera línea que está en azul.
Si usas Mootools o Scriptaculous cambia esta parte:

$(document).ready(function(){
$('#twitterfollowbox').followbox({

Por esta otra:

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#twitterfollowbox').followbox({

En color verde puedes ver dónde se personalizan las distintas áreas del gadget.
Con la altura y el ancho podemos hacer que se muestren más o menos avatares.
Si quisieras ponerle una imagen de fondo entonces cambia esta línea:

'bg_image':'', // Imagen de fondo

Por esta:

'bg_image':'URL de la imagen', // Imagen de fondo

Como puedes ver es un gadget al que se le pueden personalizar los colores de manera que se adecúe al diseño de nuestra plantilla, pero su talón de Aquíles al igual que los otros es el detalle de que por ratos podría dejar de verse, pero al ser un "gadget de vanidad" quizá no importe mucho eso.