Like Box di Facebook che si apre in una finestra popup.

Come installare un widget su Blogger che mostri una finestra popup con il Like Box di Facebook. Con il settaggio dei cookie si può scegliere ogni quanti giorni far vedere il popup.

Il Social Plugin definito Like Box o Fan Box è una versione speciale del bottone Mi Piace ed è rivolto alle Pagine di Facebook denominate anche Pagine Fan. Con questo plugin si può installare un widget che mostri gli avatar di alcuni degli utenti che abbiano cliccato sul Mi Piace della rispettiva pagina.

In articoli precedenti ho presentato dei gadget in grado di mostrare il Like Box in una finestra popup ai lettori. Tali widget però avevano il difetto di dipendere da delle risorse esterne e quindi hanno smesso di funzionare quando queste risorse sono venute meno. Adesso vado invece a illustrare un metodo per mostrare ai nuovi visitatori il Like Box della nostra pagina Facebook in una finestra popup con il pulsante Mi Piace per seguirla e anche con l'icona per chiuderla. Il popup si visualizzerà con un effetto simil Lightbox dovuto a uno sfondo scuro creato con una immagine apposita. Un'altra particolarità di questo widget è che la finestra popup si mostrerà nella prima pagina del blog che si apre e poi non si visualizzerà più per un certo numero di giorni per risultare troppo invasivi con i navigatori.

L'installazione è semplicissima e non occorre neppure modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<style>
#fanpagefb{display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzPcDdpal4ySIcqgjVLRQCUTmfS3JwUdGM3YE1ZlgsYYaVJlrjbZkaHaP9ggQm76V66c-zakSpefEMenM-9IL8Od9kngDaVN-9O27EB0bvNq7yWet9MupA2j7rsGT62g5ocU0zCFCY_g/s800/sfondo.png);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:999999;
}
#fanpagexit{
width:100%;
height:100%;
}
#likebox{
background:#fff;
width:420px;
height:270px;
position:absolute;
top:50%;
left:50%;
-webkit-box-shadow:inset 0 0 50px 0 #939393;
-moz-box-shadow:inset 0 0 50px 0 #939393;
box-shadow:inset 0 0 50px 0 #939393;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:-135px 0 0 -210px;
}
#chiusura{
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aVSRfaW01YzqFSTOSMBHuh7aVH48UxXOl7uBPgBOHb7aq5e60A5ALUnvH5xW-yt-FW6oBIPBUkvypI0BJ3lZHXVA93nPBPMbkDddNUGSzMUivOApdivOBdtYoUkZhdri4xSm7ZogJLE/s56/close.png)repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.bordo{
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</style>
<script type="text/javascript">
jQuery.cookie=function(key,value,options){
if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options);
if(value===null||value===undefined){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);}
value=String(value);
return(document.cookie=[
encodeURIComponent(key),'=',
options.raw?value:encodeURIComponent(value),
options.expires?'; expires='+ options.expires.toUTCString():'',
options.path?'; path='+ options.path:'',
options.domain?'; domain='+ options.domain:'',
options.secure?'; secure':''].join(''));}
options=value||{};
var result,decode=options.raw?function(s){
return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
</script>
<script type="text/javascript">
jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){
$('#fanpagefb').delay(100).fadeIn('medium');
$('#chiusura, #fanpagexit').click(function(){
$('#fanpagefb').stop().fadeOut('medium')})}
$.cookie('popup_user_login','yes',{path:'/',expires:7})});
</script>
<div id="fanpagefb">
<div id="fanpagexit"></div>
<div id="likebox">
<div id="chiusura"></div>
<div class="bordo"></div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http://facebook.com/ideepercomputeredinternet&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div>
</div>

Successivamente si va su Salva, si posiziona l'elemento a piacere e si può lasciare anche senza Titolo. Ho anche realizzato una Demo. Ricordo però che solo la prima volta sarà visto il popup

Nel codice va inserito l'indirizzo della pagina fan del vostro blog al posto di quello di questo sito e va settata la durata dei cookie per scegliere dopo quanti giorni va mostrato nuovamente il popup della Pagina Facebook (7 è la durata inserita nel codice). Se nel vostro modello è già presente JQuery potete evitare di incollare la riga evidenziata di giallo.

Aggiornamento: In un commento mi è stato fatto presente che lo sfondo in cui si visualizza il popup è troppo scuro. Coloro che lo volessero più chiaro possono sostituire l'URL della immagine di sfondo colorato di viola con questo nuovo indirizzo

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5TtgINKPZPZH00rJvpRXwJhjYcG07bzY6R2Mi44qUZTddPzMIe7oXDjoL3eV0I777Y6I9nffyZmHiJEbnHYJoUgK4SKCdqwVKD2Ua3hm3dd8-ulN3h5zPfeTJa9EKl6PU_yeesJ0a9Oc/s800/sfondo-2.png

che ha una opacità solo del 58% rispetto al 90% della precedente. Tale nuovo sfondo è stato anche inserito nella Demo pubblicata online.