Pubblicato il 28/02/15e aggiornato il

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.

finestra-modale-likebox-facebook 

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.




7 commenti :

  1. Ciao, ti volevo ringraziare. I tuoi consigli sono davvero, davvero preziosi. Grazie.

    RispondiElimina
  2. Ciao Ernesto, volevo chiederti se questo script lo si può usare anche per visualizzare altre pagine o oggetti diversi da facebook. Grazie.

    RispondiElimina
    Risposte
    1. Nel senso che vorresti vedere un'altro plugin al posto del Like Box? Sì, puoi provare. Devi cambiare il codice finale quello del Like Box e mettercene un altro. Stai attento alle dimensioni
      @#

      Elimina
  3. Fatto. Le mie finestre nelle colonne laterali però sono grigie su sfondo bianco, quindi mi resta un rettangolino grigio vuoto. Come posso renderlo trasparente?

    RispondiElimina
    Risposte
    1. Prova a operare sul codice del colore di sfondo e della trasparenza (75%)
      rgba(0,0,0,0.75);
      per cercare di rfenderlo omogeneo al resto del layout. Altrimenti dovresti operare sull'aspetto del tuo template. Mi pare però una cosa decisamente minore.
      @#

      Elimina
  4. Ciao Ernesto, grazie mille per la dritta. Ti volevo chiedere anche come si può adattare questo likebox per la mobile version del sito su cui ho installato il tuo widget, in quanto così com'è non lo si riesce a visualizzare per intero. Bisogna aggiungere qualche riga di codice?

    RispondiElimina
    Risposte
    1. @# È cosa complessa. Personalmente ti consiglierei di non mostrare nella versione mobile questo popup utilizzando gli opportuni tag condizionali
      http://www.ideepercomputeredinternet.com/2014/11/blogger-tag-condizionali-desktop-mobile.html
      Poi se lo vuoi proprio mostrare dovresti provare a diminuire tutte le dimensioni cioè i parametri
      width=402&height=255 e eventualmente anche la pozione
      top: 35%; left: 36%;

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.