Guida [GUIDA] Creare Facebook Popup Like Box

[Biuni]

Creare Facebook Popup Like Box​

In questa guida vi illustrerò come fare a creare un Popup che si avvierà in automatico all'apertura del vostro sito il quale conterrà il Like Box della vostra pagina Facebook.

Questo effetto è realizzato con la libreria jQuery.

Potete vedere una demo qui:

Demo Facebook Popup
Codice Facebook Popup

​

Passiamo ora alla spiegazione di come realizzare e personalizzare tutto ciò:

Modifica HTML

<!-- Modificare qui iframe del LIKE BOX FACEBOOK (Dimensioni Standard 300x290) -->

                     <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=213740382067529" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>

<!-- Modificare qui iframe del LIKE BOX FACEBOOK (Dimensioni Standard 300x290) -->

L'unica parte da modificare nell'HTML è proprio il vostro LIKE BOX. Per fare ciò andare QUI e inserire solamente il link della vostra pagina. Dopo di che premete GET CODE e prendete il codice IFRAME e inseritelo del codice <iframe> che cè ora.
Non modificare le dimensioni in quanto questo popup è stato creato appositamente per quelle che ci sono di default, 300x290, per un fattore estetico e di invasività.

Modifica CSS

Le uniche modifiche che potete apportare sono il cambio di colore della X.

.chiudi {
  .....
  background: rgba(96, 150, 255, 0.8); /* Modifica colore sfondo della X */
  ....
  color: #fff;                                   /* Modifica colore X  */
}

Modifica JS

Non modificare il JS in quanto le impostazioni di base vanno bene. (In caso vogliate far passare più tempo prima della comparsa del Popup aumentare il numero del DELAY)


FUNZIONA ANCHE PER MOBILE.




Spero la guida vi sia piaciuta, per qualsiasi dubbio o domanda resto a disposizione.

Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|​