Finestra popup con bottoni per condividere su Facebook, Google+ e Twitter.

Come installare una finestra popup che mostra ai visitatori i pulsanti per seguire la nostra pagina fan e il nostro account Twitter oltre a iscriversi alla pagina business di Google Plus.

Dopo una finestra modale con l'invito a cliccare su Mi Piace della pagina Facebook vado a presentare un'altra versione molto più efficace perché mostra agli utenti una finestra popup con i pulsanti per sottoscrivere la pagina ufficiale su Facebook, seguire l'autore del blog su Twitter e seguire pure la pagina business di Google Plus. Anche in questo caso si può settare dopo quanti giorni debba apparire nuovamente agli utenti per impedire che venga visualizzata a ogni apertura di pagina. In sostanza viene installato un cookie nel browser del visitatore che durerà il tempo che decideremo e che impedirà nuove aperture della finestra popup. Questo è necessario anche a beneficio della nostra stessa navigazione

L'aspetto della finestra è anche personalizzabile nella forma e nei colori ma questo è consigliabile solo a chi già abbia una certa esperienza di queste modifiche.

Quando verrà visualizzata la finestra modale il layout del blog diventerà più scuro e opaco con il classico effetto Lightbox. Il visitatore potrà aspettare un certo numero di secondi prima che si chiuda la finestra oppure procedere lui stesso cliccando sulla crocetta in alto a destra. Il funzionamento di questo gadget è perfetto per Firefox e Chrome mentre ha qualche difficoltà con Internet Explorer. La visualizzazione con quest'ultimo browser è in funzione anche degli altri widget che si sono installati. Non può far testo l'aspetto che prende nel mio post di prova perché quel blog è pieno zeppo di altri widget.

Per l'installazione di questa finestra modale con l'invito a condividere sui social si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<!-- Popup per social network inizio -->
<script type="text/javascript">titolo_widg="Condividi sui social";fb_pag="ideepercomputeredinternet";tw_user="parsifal32";gp_url="https://plus.google.com/b/109971217617812630980/"</script>
<style>#ipcei-bg{display:none;position:fixed;_position:absolute; height:100%;width:100%;top:0;left:0;background:#000000;z-index:998;}#ipcei-main{position:fixed;top:220px;_position:absolute; display:none;width:450px;border:5px solid #4e4e4e;background:#fff;z-index:999;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#555;text-align:left;font-family:arial,sans-serif !important;font-size:13px;}#ipcei-title{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;font-size:18px;padding:13px 0 13px 15px;}#ipcei-close{float:right;font-size:14px;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#777777 !important;margin:0 13px 0 0;border-bottom:0px !important;text-decoration:none !important;}#ipcei-close:hover{text-decoration:none !important;}#ipcei-msg{background:#3e5c9c; padding:10px 15px;color:#ffffff;font-family:Arial, Helvetica, sans-serif !important;font-weight:bold;line-height:20px;}#ipcei-buttons{margin:25px 0px 25px 0;padding:0 0 0 15px;}#ipcei-bottom{padding:15px 10px;background:#EFEFEF;color:#95989F;border-top:1px solid #DDE0E8;}#ipcei-counter{font-size:11px !important;text-align:right;font-weight:bold;}.ipcei-button{float:left;width:120px;}.step-clear{clear:both !important;}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script src="http://connect.facebook.net/it_IT/all.js#xfbml=1"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B5vupkCL4QrxZXk0QUpyZTRreTA/socialpopup.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){                                
        $().fn_name({
            timeout: 60,
            wait: 0,
            closeable: true        });
});
</script>
<!-- Popup per social network fine -->

Si va su Salva e si posiziona a piacere. Come vedete è presente un file javascript, che ho caricato su un mio dominio, il cui URL è evidenziato di viola e che è denominato socialpopup.js. Per evitare al mio dominio un eccessivo consumo di banda e per velocizzare il vostro sito vi consiglio di scaricare questo file e di caricarlo su Google Sites in modalità Schedario se avete un blog del tipo Blogspot e di usare invece la cartella Public di Dropbox se avete un dominio personalizzato. Per scaricare il file basta incollare il suo URL nella barra degli indirizzi del browser, cliccare su Invio per aprirlo quindi andare con il destro del mouse sulla pagina e selezionare l'opzione Salva con nome (OS Windows).

E' naturalmente essenziale inserire i vostri dati al posto dei miei riguardo all'ID della pagina Facebook, il nome utente di Twitter e l'URL della pagina business su Google+. Si possono anche modificare i codici dei colori e l'espressione del titolo del widget. Nella parte finale del codice ci sono le seguenti righe:

1. timeout: 60,       che serve per settare il numero di secondi che deve stare aperta la finestra
2. wait: 0,              che serve per settare il numero di giorni dopo cui deve riapparire. Nella demo ho lasciato il valore 0 e quindi verrà visualizzata a ogni apertura di pagina 
3. closeable: true     si può sostituire true con false per non mostrare la chiusura del popup
   
   

Concludo osservando che dopo che si sarà cliccato su Mi Piace, condiviso il post su Twitter o fatto +1 su Google Plus, la finestra modale sparirà e non ricomparirà per un certo numero dei giorni. Infine faccio presente che si utilizza la libreria JQuery tramite il codice evidenziato di verde. Se nel vostro modello fosse già presente JQuery si può tralasciare quella riga di codice. Infine gli anglofili possono sostituire it_IT con en_US se vogliono avere il pulsante di Facebook in lingua americana.

Aggiornamento: Probabilmente nel vostro sito avrete già installato dei bottoni di Facebook, di Google Plus e di Twitter. In questo caso gli script evidenziati rispettivamente di giallo, celeste e rosso saranno già presenti nel vostro template. Potrebbero essere stati inseriti anche in un widget HTML/Javascript con eventualmente dei tag condizionali. In questa eventualità le righe evidenziate possono essere anche tralasciate. Anzi è consigliato farlo per non caricare i javascript due volte e non provocare dei possibili malfunzionamenti. Bisogna però fare in modo che i javascript siano caricati su tutte le pagine e quindi che non siano limitati da tag condizionali. Per far questo basta spostare il codice dello script dal widget HTML/Javascript al modello e incollarlo sopra la riga </head> o sopra la riga </body>.