Web Design

Facebook Big Like Button Popup in Overlay

27th Mag 2015 | Posted in: Web Design, Wordpress  | visualizzazioni 1

facebook-giant-like-button-popup

Avendo avuto la necessità di sviluppare un popup a forma di Like Facebook per invitare gli utenti ad interagire e diventare Fan di una pagina Facebook, abbiamo pubblicato il codice sorgente al fine di mostrare un esempio di utilizzo e sopratutto una demo già funzionante su JSFiddle.

Il popup in questione fa uso del framework Jquery e un ulteriore plugin per la gestione dei cookie : https://github.com/carhartl/jquery-cookie

Il principio di funzionamento è molto semplice :

Si controlla se esista un cookie “facebookbiglike”, se è uguale ad 1 allora si nasconde l’elemento padre del popup con .hide() di Jquery, altrimenti viene mostrato normalmente.

Al click del pulsante di chiusura, viene chiamata la function close_fb(), che calcola un tempo di validità del cookie secondo la seguente formula : date.setTime(date.getTime() + (2 * 60 * 1000)); laddove il 2 rappresenta i minuti di validità del cookie. Settando ad esempio 120 al posto di 2, il plugin non riapparirà per 120 minuti (2 ore) dalla chiusura del popup.

Per il resto vale sempre il buon senso, derivato da una buona conoscenza sull’utilizzo di JSFiddle e l’integrazione sul vostro sito di qualsiasi tipo, sia esso WordPress, che altro.

Per chi fosse interessato avere una funzionalità simile ma non avesse capacità tecniche / tempo / voglia di lavorare sul codice per effettuarne l’integrazione, potete chiedere il nostro aiuto per l’integrazione, normalmente offerto al costo scontato di un’ora di consulenza, ovvero 35€.

Vai alla demo e al codice sorgente.

For English Readers :

Having had the need to develop a popup shaped Like Facebook to invite users to interact and become fans of a Facebook page, we published the source code in order to show an example of use and above all a demo already working on JSFiddle.

The popup in question makes use of the jQuery framework and an additional plugin for handling cookies: https://github.com/carhartl/jquery-cookie

The operating principle is very simple:

It checks if there is a cookie “facebookbiglike”, if it is equal to 1 then hides the parent of the popup with .hide () of Jquery, otherwise it is shown normally.

At the click of the close button, is called the function close_fb (), which calculates a time of validity of the cookie according to the following formula: date.setTime (Date.getTime () + (2 * 60 * 1000)); where 2 represents the minutes of validity of the cookie. By setting such as 120 instead of 2, the plugin will not reappear for 120 minutes (2 hours) after the close of the popup.

For the rest it is always common sense, derived from a good knowledge about using JSFiddle and integration on your site of any kind, be it WordPress, what else.

For those interested in having a similar feature but it had the technical ability / time / desire to work on the code to carry out the integration, you can ask for our help in integration, normally offered at the discounted cost of one hour of counseling, € 35.

Go to demo and source code.

Share and Enjoy:
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Digg
  • LinkedIn
  • oknotizie
  • MySpace
  • Technorati
  • Live
  • Slashdot
Post Correlati
One Comment
  1. gaspare
    10:04 on Aprile 13th, 2016

    Ciao, per nascondere questo popup like box ai soli dispositivi mobili?

Lascia un commento