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. 

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.

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.