Widget del Follow Box di Twitter da installare sul blog.

Come installare il widget del FanBox su Twitter con tutti gli avatar di chi ci segue su questo social network.

Dopo che Twitter ha rilasciato i suoi gadget ufficiali sono stati in molti che hanno inserito sul blog lo streaming dei propri tweet o quello di una lista di particolare interesse per l'argomento trattato. In questi widget si nota una mancanza di un certo rilievo. Non c'è infatti un gadget simile a quello che è il Like Box di Facebook e il recente Google+ Followers.

L'autore di Twitter Follow Box ci fornisce i codici per realizzare un Box con gli avatar di chi ci sta seguendo su Twitter insieme al loro numero. Vengono offerti di default il Light Theme, il Dark Theme ma si può usare il Custom Theme per personalizzare come ci pare questo gadget. E' anche possibile inserire un nome utente e cliccare su Try per vedere l'aspetto che avrà il nostro widget.

Per il gadget viene usata la Libreria JQuery che si può fare a meno di installare nel caso ci fosse già nel nostro template. Sono supportati tutti i principali browser come Chrome, Firefox, Safari, Opera e Internet Explorer. Per l'installazione si può andare su Download Twitter Follow Box 1.0 e scaricare tutta la documentazione. Alternativamente un utente Blogger può andare su Layout > Aggiungi un gadget > HTML/Javasacript e incollare in Sezioni del sito il seguente codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/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/AVvXsEjWV6-gcbKOH4y5XsXzjlhsJGUdgfW5G4p2pt4tumVzY6lcknLkQ7rPk6VLAzKPUuyHWJipInxd3VWwGOay-ctdTHopWpn0K1ToET3tqr6urgxiy1jFm5iJP1WRIKyhzNokYV_X4c0AdEk/s14/icon_twitter.png";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=it" 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> persone seguono <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':'parsifal32',
'theme':'custom',
'height':'250', // Altezza del widget
'width':'288', // Larghezza del widget
'border_color':'#d1d1d1', // Colore del bordo'bg_color':'#ffffff', // Colore dello sfondo
'bg_image':'', // Immagine di background (opzionale)'title_color':'#3B5998', // Colore del titolo'total_count_color':'#191919', // Colore del contatore'follower_name_color':'#191919' // Colore del nome dei follower
});
});
</script>
<div id="twitterfollowbox" class="follow-box-container"> </div>

Si clicca su Salva e si posiziona in una sidebar, nel footer o in una pagina statica. Le personalizzazioni riguardano diversi parametri che vado a elencare

1. Se avete già nel modello JQuery tralasciate la riga evidenziata di giallo
2. Per visualizzare il widget in una lingua diversa dall'italiano cambiate lang=it
3. Si può modificare l'espressione persone seguono
4. Va sostituito parsifal32 come nome utente
5. Si possono impostare i valori di larghezza, altezza e colori come mostrato nella parte finale del codice. I neofiti possono leggersi il post sui codici esadecimanli dei colori. E' anche possibile inserire una immagine di sfondo in questo modo 'bg_image':'URL_IMMAGINE',

Chi vuol seguire me può cliccare su Segui nella pagina @parsifal32 se intende seguirmi come persona o su @IPCEI se è soltanto interessato a seguire l'attività del blog comprese le risposte ai commenti. Concludo osservando che tale widget può anche essere installato su Wordpress andando su Aspetto > Widget > Testo, trascinando l'elemento fino a una sidebar o al footer e incollando il codice appena postato.