Pubblicato il 28/02/15 - aggiornato il  | 11 commenti :

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.




11 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
  5. Salve,
    ho provato questo codice, ma ho il problema che se viene visualizzato su smartphone la finestra appare metà fuori dallo schermo, rendendo impossibile la chiusura. Ho visto che si può giocare sul valore top, e in effetti se metto top=0% si colloca a sinistra entrando completamente nello schermo dello smartphone, ma al tempo stesso, visualizzandolo con un desktop si vede a sinistra... un po' bruttino.

    Ho pensato a creare due #fbox-display, uno per il desktop e uno per il mobile e replicare il codice di visualizzazione inserendolo in una condizionale con l'istruzione data:blog.isMobileRequest in modo da visualizzare il box con top=37% in caso desktop e con top=0% nel caso di mobile... in realtà mi visualizza sempre il top=37%.

    Hai qualche idea o già qualche soluzione per ovviare il problema della diversa visualizzazione mobile e desktop?

    RispondiElimina
    Risposte
    1. Puoi provare a risolvere in questo modo
      Inserisci lo stesso codice su due elementi HTML/Javascript diversi modificando solo il valore del top:.... per adattarlo uno al mobile e l'altro al desktop. Ne dovrai trovare gli ID che poniamo siano #HTML1 e HTML2. Basta andare su Modifica e copiare l'ultima stringa dell'indirizzo. Per semplicità poniamo che HTML1 sia il widget con il codice giusto per il mobile e HTML2 quello per il desktop.
      Vai su Modello -> Modifica HTML e subito sopra alla riga </head> incolla questo codice

      <b:if cond='data:blog.isMobile'>
      <style>
      #HTML2 {display:none; visibility:hidden;}
      </style>
      <b/else>
      <style>
      #HTML1 {display:none; visibility:hidden;}
      </style>
      </b:if>

      Dovrebbe funzionare
      @#

      Elimina
    2. Non funzionava nulla, ma ho in parte risolto sostituendo isMobile con isMobileRequest (utilizzo un template responsive): adesso è OK nel caso mobile, ma non compare nel caso desktop... cosa ho sbagliato?

      http :// prntscr . com/dv5q7u

      Elimina
    3. Se il modello è Responsive i tag condizionali non funzionano e bisogna partire da un altro approccio come quello mostrato in questo post
      http://www.ideepercomputeredinternet.com/2015/11/media-query-mediascreen-risoluzione-blogger-wordpress.html

      Nel tuo caso partendo sempre dall'assunto che HTML1 è il widget per il mobile e HTML2 per il desktop potresti usare questo codice
      <style>
      @media screen and (min-width: 0px) and (max-width: 799px) {
      #HTML2 {display:none;}
      }
      </style>
      <style>
      @media screen and (min-width: 800px) {
      #HTML1 {display:none;}
      }
      </style>

      da incollare sopra a </head>
      @#

      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.