Mostrare il LikeBox (o FanBox) di Facebook in versione popup.

Come installare un banner che se cliccato mostra in una finestra popup il Like Box di Facebook con gli avatar dei sottoscrittori.

Il Like Box di Facebook è quel widget che mostra gli avatar degli utenti del social network per antonomasia che hanno cliccato sul Mi Piace e che visualizzano nelle sezione Notizie della loro Home i post che vengono pubblicati nel blog. Seguire gli aggiornamenti di un sito solo in questo modo in verità non è consigliabile visto che ciascun articolo sarà mostrato solo a una parte dei sottoscrittori. Il numero dei fan di una Pagina Facebook è comunque un parametro molto importante non tanto per determinare l'autorevolezza di un sito quanto per misurarne la popolarità.

Il Fan Box di Facebook può essere facilmente installato sia su piattaforma Blogger sia su Wordpress andando rispettivamente su Layout > Aggiungi un gadget > HTML/Javascript e su Widget > Testo per poi posizionandolo in una sidebar. In entrambi i casi bisogna incollare il codice in funzione della nostra pagina fan. In questo articolo vediamo una installazione alternativa quando si abbia bisogno di spazio e non si voglia mostrare tutto il gadget ma solo un bottone che apra una finestra popup

Il lettore cliccando su un pulsante aprirà una finestra popup in cui visualizzerà il widget del LikeBox di Facebook dove potrà anche cliccare sul bottone del Mi Piace. Si tratta di una soluzione particolarmente interessante se si vuole ottimizzare lo spazio della sidebar

L'installazione è particolarmente semplice ed è identica a quella del normale FanBox. Su Blogger si va quindi su Layout > Aggiungi un gadget > Base > HTML/Javascript e si incolla questo codice

<style type="text/css">
.fb_pop{width:100%;padding:0;margin:0 auto;text-align:left;}
img.pagina-fan-fb {width: auto;max-width: 100%;height: auto;}
</style>
<div class="fb_pop">
<a href="javascript: void(0)" onclick="popup1('http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fideepercomputeredinternet&width=450&height=370&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true')" title="IpCeI su Facebook"><img class="pagina-fan-fb" alt="IpCeI-Pagina-Facebook" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHManxJbV0-k9-CmA4ZzqdiCmMzLGvbXkaL-aTplBNiWzZf7mwlkwN4cOXZ7W0wEIELSi3a81_c3NyGn8kATfDFu-DTtXt9_dCFEjdux4wSi4-l4as7VLZBo7H086cTFQ3nIc8TjFPzV60/s280/Segui-Facebook.gif" width="280" title="IpCeI su Facebook"/></a>
</div>
<script type="text/javascript">
function popup1(e){var t=450;var n=370;var r=(screen.width-t)/2;var i=(screen.height-n)/2;var s="width="+t+", height="+n;s+=", top="+i+", left="+r;s+=", directories=no";s+=", location=no";s+=", menubar=no";s+=", resizable=no";s+=", scrollbars=no";s+=", status=no";s+=", toolbar=no";newwin=window.open(e,"windowname5",s);if(window.focus){newwin.focus()}return false}
</script>

Si salva e si posiziona il widget. Verrà visualizzato un banner animato creato con Photoshop che può anche essere sostituito da un altro più gradito. Ecco le personalizzazioni più importanti:

1. Sostituire ideepercomputeredinternet con la parte finale dell'indirizzo della vostra pagina fan
2. Le espressioni colorate di blu dentro i tag Alt e Title debbono essere sostituite con il nome della vostra pagina fan in modo da avere un testo descrittivo dell'immagine
3. Si può cambiare banner incollandone l'URL ottenuto da Picasa o Google+ al posto di quello colorato di viola. In questo caso vanno anche settate le dimensioni ("100" e"280")
4. Le due occorrenze delle dimensioni della finestra popup (450 e 370 pixel) possono essere personalizzate a piacere.