Pubblicato il 23/02/13 - aggiornato il  | 25 commenti :

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.

finestra-popup-social-network[4]

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>.


25 commenti :

  1. Fantastica, proprio quella che ti avevo chiesto!
    Grazie mille Ernesto, la provo per vedere se va d'accordo con il mio blog, già strapieno di widgets e di javascripts ;P
    Giuliana

    RispondiElimina
  2. Ciao Ernesto, non mi esce il tasto di facebook, puoi aiutarmi?

    RispondiElimina
  3. Non vengono visualizzati i pulsante facebook e twitter.

    RispondiElimina
  4. @# Qualche volta il pulsante Facebook non si vede. Si torna a vedere ricaricano la pagina (almeno nella demo)

    RispondiElimina
    Risposte
    1. @# Può anche dipendere da altri bottoni di FB caricati con l'opzione en_US invece di it_IT

      Elimina
  5. http://www.guadagnareconadsense.net/upload/socialpopup.js non funziona! non lo apre, apre una pagina piena di scritte strane, puoi caricarlo da un'altra parte perfavore?

    RispondiElimina
    Risposte
    1. @# Probabilmente sei alle prime armi :)
      Funziona benissimo. La pagina che vedi piena di scritte strane è un javascript. Dopo che l'hai aperta cliccaci sopra con il destro del mouse e scegli Salva con nome. Guarda qui
      http://minus.com/lGS4F4zjafdPA

      Elimina
  6. Salve, seguo il suo blog da tanto tempo, complimenti! Mi potrebbe aiutare? Come fare a visualizzare questo popup non al caricamento della pagina ma quando viene cliccata un'immagine?

    RispondiElimina
  7. Ciao Ernesto, complimenti come sempre, sei il mio punto di riferimento per blogger. Senti il pulsante di facebook non vuole proprio uscire, ho provato a cancellare la riga evidenziata di giallo ma nulla. Cosa posso fare di altro per ancora? Penso che facebook sia indispensabile per quel widget.

    Grazie ancora
    Piergiorgio

    RispondiElimina
    Risposte
    1. @# Leggi i commenti 4 e 4.a. Se FB non si vede si può risolvere in quel modo

      Elimina
  8. Assolutamente un gran bel widget....lo ho provato e funziona 100%!
    Consigliatissimo! Ho fatto un pò di modifiche e funziona anche su joomla.
    [per Ernesto]
    Se volessi aggiungere la funzione "share" di facebook che magari sente l'url della pagina in cui è presente il widget....è impresa ardua?
    Grazie in anticipo

    RispondiElimina
    Risposte
    1. @# Mi pare che Facebook abbia disabilitato le API per la funzione Share limitandosi a supportate quelle per il Like

      Elimina
  9. a me non va, ho provato a copiare e incollare il widget senza modifiche per prova ma non funziona, non si vede il popup

    RispondiElimina
    Risposte
    1. @# Probabilmente il tuo modello è incompatibile con JQuery. La Demo funziona ...

      Elimina
  10. Ma questa pop-up con oscuramento... sicuri sia compatibile con le guidelines di ADSENSE?

    RispondiElimina
  11. Questi popup con invito alla sottoscrizione li ho visti in molti siti ma non ti so dire nulla sulla possibilità che possano violare il regolamento Adsense.
    @#

    RispondiElimina
  12. Questo commento è stato eliminato dall'autore.

    RispondiElimina
    Risposte
    1. Se usi Wordpress puoi cercare un plugin. Se invece hai un sito con un altro CMS questo script si può incollare su HTML quindi anche su PHP visto che il PHP può convivere insieme all'HTML però non capisco perché proprio in un file PHP. Lo dovrai mettere comunque in una pagina HTML e quindi ci saranno i soliti tag html, head e body. Quiindi dovresti provare a incollarlo subito prima della chiusura /body
      @#
      @#

      Elimina
    2. Questo commento è stato eliminato dall'autore.

      Elimina
    3. Mi spiace. Ho dei siti WordPress ma non sono pratico di PHP
      @#

      Elimina
  13. Al posto del pulsante "mi piace" è possibile mettere il pulsante condividi di Facebook? Grazie

    RispondiElimina
    Risposte
    1. Interesserebbe anche a me! Ernesto aiutaci!!! :) Grazie!

      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