Pubblicato il 03/12/14e aggiornato il

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.

like-box-pagina-fan-facebook

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://lh5.googleusercontent.com/-NsuP8OcOhDM/VH7RiGS6LpI/AAAAAAAAqVk/Itt6IoIgPzQ/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://lh6.googleusercontent.com/-7q7oU2yspzA/VH7T00YAmHI/AAAAAAAAqVw/3J_XdnqBvmY/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://lh5.googleusercontent.com/-iQQSQShzwow/VICZuiCWnpI/AAAAAAAAqWw/UGNRiSqeeu8/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.




14 commenti :

  1. Grande Ernesto!! Complimenti bel Widget-Gadget!! GRAZIE!!! ;)

    RispondiElimina
  2. bello questo widget molto utile per aumentare i fan

    RispondiElimina
  3. ciao ernesto , ci sarebbe la possibilità di farlo apparire dopo un po' di tempo (ad esempio 15 secondi) e anche la possibilità di mettere più in trasparenza il blog che si vede sotto, non mi piace molto vedere lo schermo così scuro. Grazie

    RispondiElimina
    Risposte
    1. Per la prima dimanda la risposta è no con questo codice. Invece per lo sfondo puoi sostituire quello usato da me con questa immagine
      https://lh5.googleusercontent.com/-NsuP8OcOhDM/VH7RiGS6LpI/AAAAAAAAqVk/Itt6IoIgPzQ/s800/sfondo.png
      che è solo di 1 pixel con un altra immagine che però devi creare con tasparenza in formato PNG. Prova con Photoshop o con Gimp a creare una immagine di sfondo come ti pare per poi rimpicciolirla, caricarla su Picasa o altrove e sostituirne l'URL a quello precedente. Al limite puoi togliere la riga
      background:url(https://lh5.googleusercontent.com/-NsuP8OcOhDM/VH7RiGS6LpI/AAAAAAAAqVk/Itt6IoIgPzQ/s800/sfondo.png);
      e visualizzerai il widget sopra al blog così com'è però gli utenti ci potranno interagire
      @#

      Elimina
  4. Fantastico grazie, posso aggiungere un testo personalizzato da qualche parte, ad esempio per ringraziare in anticipo gli utenti ?

    RispondiElimina
    Risposte
    1. Complicato. Si potrebbe provare a mettere una immagine di sfondo con una scritta ma si perderebbe l'effetto Lightbox
      @#

      Elimina
  5. Risposte
    1. Il LikeBox è stato disabilitato. Prova con il Facepile popup
      http://www.ideepercomputeredinternet.com/2015/04/page-plugin-popup-facebook-finestra-modale.html
      Qui c'è la Demo
      http://prova-32.blogspot.it/2015/04/page-plugin-popup-demo-per-blogger.html
      @#

      Elimina
  6. Volevo dirti che sul mio sito: www.poetidazione.it/blog ho inserito una soluzione alternativa. Ho utilizzato un plugin gratuito piuttosto leggero che si chiama WP Super Popup che fa apparire una finestra popup che si ridimensiona in base al contenuto che mostra al suo interno.
    Ho creato una pagina html a parte con all'interno il box della pagina fan seguendo le istruzioni che fornisce Facebook. Tale box appare in un frame del popup. Creando una pagina html esterna ho potuto così inserire anche una freccia animata che invita a cliccare.
    Il problema di questo popup è che se clicchi MI PIACE non scomapre automaticamente il popup, ma l'utente deve chiudere la finestra a parte facendo di nuovo click. Anche il tuo funziona in questo modo. Sarebbe meglio se l'utente dopo aver cliccato Mi Piace accedesse subito nel sito. Ci sono soluzioni commerciali di plugin Like Popup che hanno già questa funzione implementata.
    Visto che sei un programmatore sono certo che potrai ovviare a questo problema con delle istruzioni javascript che creano un doppio click: uno per dare il like e l'altro che simuli il click di chiusura della finestra popup. Ciò risolverebbe sia il mio problema che quello del tuo script che eventualemnte potrei adottare visto che mi sembra funzioanre bene. Se non vuoi apportare modifiche al tuo script mi daresti per favore delle indicazioni su come fare? Molte grazie!

    RispondiElimina
    Risposte
    1. Non sono un programmatore professionista ma solo un dilettante che si diletta con i codici. La finestra modale di questo script compare solo la prima volta che si apre il sito e scompare con un click fatto in qualsiasi punto della pagina anche senza aver messo il Mi Piace
      @#

      Elimina
  7. Salve Ernesto, volevo chiedere se lo stesso gadget si può usare per visualizzare una immagine qualsiasi, anzichè il Like Box di Facebook. Grazie.

    RispondiElimina
    Risposte
    1. Sì. Al posto del codice dell'iframe che inizia con < iframe .. e che termina con < /iframe > puoi mettere il codice di una immagine della stessa dimensione cioè più o meno 400x200 pixel. Il codice di una immagine è < img src="URL_IMMAGINE" / > (senza spazi accanto ai segni di maggiore e minore
      @#

      Elimina
    2. No. Non funziona. Se trovo un sistema ci faccio un post
      @#

      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.