Oggi ti spiego come realizzare un pulsante di login per la tua applicazione facebook.

Come prima cosa devi aprire un'applicazione facebook dal centro sviluppatori facebook e settare tutti i parametri necessari. Ai fini del mio esempio basta settare l'indirizzo del sito e il canvas url.

A questo punto hai ottenuto un Application ID che ci servirà per far riconoscere la nostra applicazione al sistema.

Ecco il codice minimale per una pagina di login

<?php
    header('P3P: CP="CAO PSA OUR"');
    ?>
<h1>Test login facebook</h1>
<fb:login-button show-faces="true" perms="email,user_birthday,offline_access,publish_stream"></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/it_IT/all.js" type="text/javascript"></script>
<script type="text/javascript">
    FB.init({appId: '*************', xfbml: true, status: true, cookie: true});
    FB.XFBML.parse();
    FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
</script>

Vado a commentarlo un pezzo per volta.

Per evitare casini con le impostazioni di privacy di internet explorer, che ci impediscono di aprire delle sessioni per problemi con i cookies e i frames, per prima cosa invio un header P3P:

header('P3P: CP="CAO PSA OUR"');

In seguito metto il codice xfbml per renderizzare un bottone di login facebook

<fb:login-button show-faces="true" perms="email,user_birthday,offline_access,publish_stream"></fb:login-button>

Ci sono diversi parametri da settare, come puoi vedere nella pagina ufficiale dedicata al Login Button, io ho solo utilizzato lo show-faces per mostare gli amici che utilizzano la mia applicazione e il perms, che serve per settare i permessi da chiedere all'utente, ma ce ne sono degli altri.

Poi viene il <div id="fb-root"></div> che serve al javascript sdk di facebook per caricarsi correttamente all'interno della nostra pagina.

Infine tutto il blocco javascript che prima carica il Javascript SDK di facebook, poi inizializza l'oggetto FB con FB.init, al posto degli asterischi devi mettere il tuo ID Applicazione.

FB.XFBML.parse() mi serve per parserizzare tutti i codici xfbml e renderizzarne il contenuto.

Le ultime righe mi sono utili per monitorare l'evento login ed effettuare il reload della pagina nel caso in cui l'utente si logga. Questo mi è utile ad esempio per mostrare del contenuto diverso all'utente loggato.

E' tutto qui, il nostro facebook login è completo, ciao!

Oggi Google ha rilasciato il tanto atteso 1 button, la risposta del motorone ai pulsanti Like di Facebook e il Tweet di Twitter.

Le istruzioni per l'implementazione sono semplici e sono riportate nella pagina dedicata http://www.google.com/webmasters/ 1/button/

Basta richiamare il codice js di google, indicando la lingua preferita

Utilizzando le API messe a disposizione da Google vedrai che è molto semplice reperire delle informazioni riguardo un luogo.

In questo articolo spiego come fare con un semplice esempio, ottenendo la latitudine e la longitudine di un indirizzo.

Per un programmatore php è un gioco di poche righe raggiungere questo obiettivo.

Innanzitutto ti è necessario avere una API Key per Google Maps, la puoi ottenere facilmente a questo indirizzo: http://code.google.com/apis/maps/signup.html

In verità la api key non è indispensabile, ma noi siamo dei bravi nerd e facciamo le cose per bene :D

Adesso passo a realizzare una semplice funzione, che accetta come paramentri un indirizzo e una google maps key, compone il giusto url, chiede i dati a google e restituisce la posizione del luogo desiderato, sotto forma di latitudine e longitudine.

Oggi mi è capitato di dover validare il prefisso telefonico in un form validato con il plugin validation di jquery.

Suppongo che sai validare un form con jquery, in caso contrario corri a studiare! Ci sono tante risorse in rete, come ad esempio questo articolo sulla validazione ma su google trovi una marea di risorse al riguardo.

Ho creato un metodo apposito, utilizzando addMethod e l'ho chiamato "phone_prefix".

Ecco il codice:

$.validator.addMethod('phone_prefix', function(value, element) {
        var prefix = value.substring(0,3);
        var prefissi = new Array('330', '331', '333', '334', '335', '336', '337', '338', '339', '360', '363', '366',
                        '368', '340', '342', '343', '345', '346', '347', '348', '349', '320', '323', '327', '328',
                        '329', '380', '383', '388', '389', '390', '391', '392', '393', '313', '377', '373', '370');
        if ( $.inArray(prefix, prefissi) == -1){
            return false;
        } else {
            return true;
        }
    }, 'Hai inserito un prefisso telefonico non valido');

Alla prima riga della funzione estraggo la parte che contiene il prefisso (le prime 3 cifre, supponendo che non mi interessa il prefisso internazionale) var prefix = value.substring(0,3);

Poi creo l'array dei prefissi permessi, che posso facilmente modificare ed ampliare nel tempo.

Infine, faccio un return dell'esito del controllo. Ho utilizzato la funzione inArray() di jquery in modo da semplicare al massimo il controllo stesso.

Semplice e veloce, naturalmente è uno script minimale molto migliorabile e ampliabile ma già ci permette di prendere confidenza con addMethod nella validazione dei campi di un form.

Immagine by http://www.flickr.com/photos/reegone/

Licenza http://creativecommons.org/licenses/by-nc-sa/2.0/deed.it

Vediamo un semplice codice per verificare il "Mi Piace" su una pagina facebook, sfruttando i nuovi Tab IFrame.

In questo modo potremo visualizzare dei contenuti riservati ai soli fan della pagina