AVISO
La API de Twitter cambi? y ahora requiere autenticaci?n para obtener los datos de los seguidores, por tal motivo �ste y los dem?s fanbox para Twitter han dejado de funcionar. Si me entero de una soluci?n u otra alternativa lo publicar� de inmediato.
La API de Twitter cambi? y ahora requiere autenticaci?n para obtener los datos de los seguidores, por tal motivo �ste y los dem?s fanbox para Twitter han dejado de funcionar. Si me entero de una soluci?n u otra alternativa lo publicar� de inmediato.
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.
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>Pon tu nombre de usuario de Twitter donde se indica (sin la @) y listo.
<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/AVvXsEhS54E2kPnN9KBiqE1nVI5LtT-Cp1PofqoFGu3y4vue-two7Ay0Ur90tj7yZ7aRcsppKz08EU2_vdTZav8xeRJYn8pw2_cjxxXVJYq1TG-g6JDqsGjT3tWtFA9r0SzOfp49XE8l-S0YxyY/";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>
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(){Por esta otra:
$('#twitterfollowbox').followbox({
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:
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.
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 fondoPor 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.
Autor | Twitter Follow Box
