Pubblicato il 22/04/15 - aggiornato il  | 11 commenti :

Page Plugin di Facebook che si apre in una finestra popup.

Come mostrare una finestra popup che si apre con il Page Plugin di Facebook che permetta al lettore di sottoscrivere la nostra pagina fan e di condividerla e che mostri anche gli avatar di chi lo ha già fatto.
Facebook ha deciso di deprecare il suo Like Box Plugin e di disattivarlo a partire dal 25 Giugno 2015. Prima di quella data va quindi sostituito con il nuovo Page Plugin. Alcuni blog su Blogger hanno pure installato il Fan Box che si apre in una pagina popup  anche in una versione più datata o più recente. Il codice del nuovo plugin è nel linguaggio HTML5 mentre nelle finestre popup precedenti si utilizzava un iframe che adesso non è più disponibile. 

In un commento mi è stato chiesto se fosse possibile adattare il vecchio al nuovo codice per mostrare in una finestra modale o popup come si dice più comunemente anche il Page Plugin. La cosa è fattibile anche per chi non abbia inserito nel proprio sito i metatag Open Graph

page-plugin-popup

Per l'installazione si va su Layout > Aggiungi un gadget > HTML/Javascript e, in Sezioni del sito, si incolla questo codice quindi si va in basso su Salva.

<style>
#pageplugin{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;
}
#page_plugin_exit{
width:100%;
height:100%;
}
#pg_plugin{
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;
}
#pg_close{
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;
}
.pg_border{
height:1px;
width:400px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script><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;};
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){
$('#pageplugin').delay(100).fadeIn('medium');
$('#pg_close, #page_plugin_exit').click(function(){
$('#pageplugin').stop().fadeOut('medium')})}
$.cookie('popup_user_login','yes',{path:'/',expires:0})});
</script>
<div id="pageplugin">
<div id="page_plugin_exit"></div>
<div id="pg_plugin">
<div id="pg_close"></div>
<div class="pg_border"></div>
<div id="fb-root"></div><div class="fb-page" data-href="https://www.facebook.com/ideepercomputeredinternet" data-width="428" data-height="260" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/ideepercomputeredinternet"><a href="https://www.facebook.com/ideepercomputeredinternet">IDEE PER COMPUTER ED INTERNET</a></blockquote></div></div>
</div>
</div>

Quando un navigatore visualizzerà una qualsiasi pagina del vostro sito si vedrà comparire il Page Plugin che potrà chiudere cliccando sulla crocetta in alto a destra. Nel codice è stata settata una scadenza 0 per quello che riguarda i cookie in modo che chi lo installa si possa subito rendere conto del suo funzionamento. 

Per evitare che i navigatori più assidui del sito e lo stesso suo amministratore si vedano aprire la pagina popup continuamente è opportuno inserire una scadenza di qualche giorno. Al posto quindi di expires:0 può essere messo expires:7 per far aprire il popup solo se il lettore non è arrivato sul sito da almeno 7 giorni. Si può mettere anche un altro numero a nostra scelta.

demo

La personalizzazione del codice deve riguardare l'indirizzo della Pagina Facebook e eventualmente anche le dimensioni della finestra popup. Si può anche modificare il codice del colore dello sfondo del Page Plugin. Il posizionamento del popup è settato alla metà della pagina con i tag top:50%; left:50%;. Lo si può modificare anche modificando i parametri di margin:-135px 0 0 -210px;. Se nel vostro template già avete jQuery potete evitare di inserire la riga evidenziata di giallo.

L'immagine della crocetta di chiusura è close.png mentre l'immagine dello sfondo è sfondo.png. Tali immagini possono essere cambiate a piacere. A titolo di esempio per avere uno sfondo della finestra popup colorato di viola invece che di grigio scuro possiamo sostituire questo URL con

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

Tale sfondo ha opacità del 58% quindi lascia più visibile il sito rispetto al 90% dell'altro URL. Potete anche crearvi da soli una immagine di sfondo con trasparenza con Gimp o Photoshop.


11 commenti :

  1. l'immagine della pagina FB mi esce più stretta! Come posso fare ad allargarla? nelnomedijesus .com grazie ciao Nadia

    RispondiElimina
    Risposte
    1. Si può allargare tutto il widget agendo sul parametro data-width="310" ma per l'immagine si tratta di una impostazione a monte. Se per te questa è una cosa importante potresti provare a cambiarla con un'altra più larga
      @#

      Elimina
  2. Posso dirti una cosa? SEI UN GRANDE!
    finalmente ce l'ho fatta!

    RispondiElimina
  3. Purtroppo si vede solo la finestra ma dentro non c'è scritto nulla, mi sai dire il perchè?

    RispondiElimina
    Risposte
    1. Procedi in questo modo.
      1) Incolla il codice così com'è in HTML/Javascript come scritto nel post
      2) Se si vede la finestra della pagina di questo sito significa che il codice funziona
      3) Sostituisci gli URL colorati di rosso con quelli della tua pagina. Probabilmente hai copiato male qualcosa
      @#

      Elimina
  4. Salve,
    funziona... ma nella versione mobile la croce per chiudere la finestra esce fuori dallo schermo e non è possibile chiudere la finestra. È possibile ridurre la finestra (c'è una versione aggiornata di questo script)?

    Grazie.

    RispondiElimina
    Risposte
    1. Bisogna lavorarci. Devi ridurre i valori della finestra
      width:420px;
      height:270px;
      e contemporaneamente i valori del contenitore
      data-width="428" data-height="260" cercando di mantenere le differenze e le proporzioni tra larghezza e altezza
      @#

      Elimina
    2. L'opposto. I valori iniziali sono quelli del contenitore 😊
      @#

      Elimina
    3. Grazie... ci provo... e se uno volesse mettere una semplice scritta CHIUDI al posto dell'immagine con la X?

      Elimina
  5. Ah... c'è anche una linea bianca, credo un separatore troppo lungo, che arriva a soprapporsi e vedersi sull'immagine della X e fuori dal box. È possibile eliminarlo?

    RispondiElimina
    Risposte
    1. La linea e la croce sono delle immagini che hanno l'URL colorato di rosso quindi puoi personalizzarle. Per la linea bianca per esempio prova a sostituire

      https://lh5.googleusercontent.com/-NsuP8OcOhDM/VH7RiGS6LpI/AAAAAAAAqVk/Itt6IoIgPzQ/s800/sfondo.png

      con

      https://lh5.googleusercontent.com/-NsuP8OcOhDM/VH7RiGS6LpI/AAAAAAAAqVk/Itt6IoIgPzQ/s400/sfondo.png

      per renderla più corta

      @#


      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy