Mostrare il popup del Like Box di Facebook su Blogger.

Come installare una finestra modale o popup che mostri il widget del Like Box di Facebook in Blogger solo ai nuovi visitatori mediante l'utilizzo dei cookie.

Se navigate su internet in blog ma anche in altri siti avrete certamente notato come ci siano delle pagine che mostrano automaticamente il popup del Like Box di Facebook con il pulsante per la sua sottoscrizione. Una cosa da evitare quando si installano questi widget è quella di farli diventare troppo invasivi. Visualizzare un popup tutte le volte che si apre una pagina di un sito è certamente da evitare. È quindi opportuno utilizzare i cookie per attivare la visione del popup solo a chi non sia mai arrivato sul sito o a chi non abbia aperto una sua pagina da almeno un certo numero di giorni.

Ho già presentato una finestra modale con il Like Box di Facebook e con questo post riprendo il codice già utilizzato in precedenza per apportare alcune modifiche di stile. Sarà poi l'amministratore del sito a scegliere l'opzione che ritiene più interessante per il suo layout. Una particolarità di questa finestra modale è quella di utilizzare solo il CSS senza immagini di sfondo.

 

Nel momento in cui viene a mostrarsi sarà oscurato il layout del sito. Si può anche configurare l'opacità desiderata modificando semplicemente un parametro. Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'></script>
<style>
#fb-sfondo {
    display: none;
    background: rgba(0,0,0,0.75);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fb-chiudi {
    width: 100%;
    height: 100%;
}
#fb-popup {
    background: #FFF;
    border: 5px solid #606060;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 35%; /* Posizione popup */
    left: 36%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#fb-bottone {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fb-bottone:before {
    content: "Chiudi";
    padding: 4px 6px;
    background: #606060;
    color: #FFF;
    font-weight: bold;
    font-size: 9px;
    font-family: Georgia;
}
</style>
<script type='text/javascript'>
//<![CDATA[
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_facebook_box') != 'yes'){
$('#fb-sfondo').delay(4000).fadeIn('medium');
$('#fb-bottone, #fb-chiudi').click(function(){
$('#fb-sfondo').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 5 });});
</script>
<div id='fb-sfondo'>
<div id='fb-chiudi'>
</div>
<div id='fb-popup'>
<div id='fb-bottone'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/ideepercomputeredinternet&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
</div>
</div>

Si salva l'elemento. La finestra modale si aprirà dopo 4 secondi che è stato caricata la pagina. Per modificare questo intervallo bisogna agire sul parametro delay(4000). Ovviamente va sostituito l'URL della vostra pagina fan su Facebook a quello della pagina di questo sito colorato di viola.

I cookie sono impostati per durare 5 giorni vale a dire che il popup si mostrerà solo a quei lettori che non avranno aperto nessuna pagina del sito per questo intervallo di tempo. Per modificare questa durata bisogna agire sul parametro  { path: '/', expires: 5 }.

Infine per scegliere la giusta opacità e il giusto colore per lo sfondo del sito quando appare la finestra modale bisogna intervenire su questo parametro 

background: rgba(0,0,0,0.75);

Il codice del colore dello sfondo è stato scelto nero #000 e convertito da Hex in RGB ma si può optare per un altro colore. L'opacità proposta è del 75% (ovvero 0.75). Aumentando questo valore lo sfondo sarà più scuro mentre diminuendolo diventerà più chiaro. Ricordo che si possono personalizzare anche i parametri della dimensione e della posizione della finestra modale oltre che scegliere la famiglia di font (Georgia). Lo script si basa sulla libreria JQuery. Se questa fosse già presente nel modello si può evitare di incollare le righe evidenziate di giallo.