Pubblicato il 15/12/12 - aggiornato il  | 10 commenti :

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://lh4.googleusercontent.com/-h9LdfSpn6fs/UMxNQ9RY0sI/AAAAAAAAdoM/jP-uFxbGszA/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',
twitter-follow-box
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.


10 commenti :

  1. ottima idea! io l ho messa ho variato i parametri di altezza e largezza ma se volessi mettere avatar + piccolini di coloro che mi seguono cosi ce ne stanno di + nel box? cosa variare? grazie come sempre per gli ottimi spunti! ciao.

    RispondiElimina
  2. Ciao, ho provato ad installarlo, nel mio blog, ma non si vede...
    http://www.lacucinadipaolabrunetti.blogspot.it/
    come mai?
    Grazie mille in anticipo :)

    RispondiElimina
    Risposte
    1. @PaolaBrunetti
      Se non va significa che il tuo template è incompatibile con JQuery visto che altri lo hanno installato senza problemi

      Elimina
  3. ciao l'ho appena inserito , ma nel mio non si vedono le miniature di chi mi segue ma solo il numero , è normale?

    RispondiElimina
    Risposte
    1. @CaterinaPili
      No, non è normale. Ci deve essere qualche errore o qualche incompatibilità.

      Elimina
    2. niente allora lo tolgo, grazie lo stesso!

      Elimina
  4. Ciao, sono un neofita un po' imbranato e sto cercando di imparare. Ho caricato il box di twitter e lo visualizzo correttamente al primo collegamento. Dopo un po' però, sparisce dalla pagina. Sbaglio in qualcosa? Grazie

    RispondiElimina
    Risposte
    1. @GiovanniFormica
      Se all'inizio lo vedi correttamente vuol dire che non hai sbagliato nulla. Il fatto poi che sparisca può dipendere da fattori esterni tipo un malfunzionamento dei server di Twitter o interni cioè dei cookie in conflitto all'interno del browser che stati usando. Prova con un altro browser per escludere questa seconda eventualità.

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy