Visualizza la demo
Google ha deciso di buttarsi nel social network, e lo fa con Google Buzz. Un aggregatore di post da buzz, blog, twitter, feedfriends, youtube, flickr, e google reader. Almeno da questi per adesso. Ma è possibile integrarlo nel nostro sito web?
Sarebbe come avere i nostri ultimi tweet, ma decisamente più potente. E’ Google stessa a darci la risposta, grazie alle Google Buzz Api. Anche se molto limitate possiamo facilmente avere un feed in formato ATOM grazie a questo semplice url:
http://buzz.googleapis.com/feeds/{user}/public/posted
in cui {user} non è altro che il nostro nome utente, cioè quello con cui possiamo vedere il profilo su google, da http://www.google.com/profiles/{user}. Purtroppo per via della distribuzione può essere recuperata solo tramite JSONP.
Ma allora come utilizzare i dati in javascript? Il modo più semplice è usando il formato JSON, ma avendoli in ATOM come fare? Qui entra in gioco un ottimo servizio di Yahoo, cioè YQL che ci permette di avere il formato desiderato, quindi basta richiamare il tutto tramite YQL appunto per avere finalmente i dati in JSON e utilizzarli facilmente.
Due servizi
Piccola parentesi. Un servizio simile a YQL lo fornisce anche Google e quindi potevo evitare di usare due servizi diversi, ma ahimè il risultato da Google mi eliminava moltissimi dettagli utili, come la tipologia dei link o i link al feed dei commenti. Quindi per ora usiamo YQL.
Cosa ci serve
Questa plugin funziona con Mootools Core completo, o almeno così mi dice sul sito, e di JSONP in Mootools More.
Usiamolo
Per attivarlo usate il seguente codice:
new GoogleBuzzWidget({
element: 'buzz',
user:'username',
buzzs: 5
});```
Ricordate di caricarlo al DomReady, al Load o al massimo piazzatelo sotto al div in cui volete inserire i vostri buzz.
Le opzioni che potete passargli sono:
- **element**: (text) ID del contenitore a cui associarlo. Di default è “buzz”.
- **user**: (text) Il vostro username su [Google Profiles](http://www.google.com/profiles/me), cioè quello con cui potete vedere il vostro profilo.
- **buzzs**: (number) Quanti buzzs volete far visualizzare. Di default sono 5.
- **loadcomment**: (true/false) Attiva la visualizzazione dei commenti. Di default è attiva.
- **comments**: (number) Quanti commenti volete far visualizzare per ogni buzz. Di default sono 5.
- **collapsecomment**: (true/false) Attiva l’apertura/chiusura dei commenti tramite JS. Di default è attiva.
- **cutcomment**: (number) Numero massimo di lettere presenti nei commenti, 0 per visualizzarli tutti. Di default è 0.
- **linkicon**: (true/false) Aggiunge la favicon del sito del link aggiunto. Di default è disattivo.
- **usestyle**: (true/false) Aggiunge automaticamente uno stile ai buzz, Di default è attivo.
Aggiungiamo poi nel body il nostro contenitore:
`<div id="buzz">loading...</div>`
Et voilà, *dovrebbe* funzionare alla perfezione.
### Personalizzazione
Volendo disattivando usestyle possiamo dare uno stile personale al widget. Eccovi quindi gli **stili** e come vengono usati.
- **.bzw_buzz**: (div) div contenitore di ogni singolo buzz.
- **.bzw_buzz h3**: (h3) nome utente.
- **.bzw_buzz a**: (a) links all’interno del buzz.
- **.bzw_links**: (div) div contenente i link associati al buzz.
- **.link|.rss|.picasa|.flickr**: (a) links associati al buzz
- **.bzw_links img**: (img) favicon all’interno dei links.
- **.bzw_comments**: (div) contenitore dei commenti.
- **.bzw_hidecomments**: (a) link mostra/nascondi commenti.
- **.bzw_comments .bzw_comment**: (div) singolo commento.
- **.bzw_comments .bzw_comment h5**: (h5) nome utente nel commento
### Conclusione
[download javascript](http://sandbox.thedeveloperinside.com/buzz/buzz.mootools.js)
[download javascript minified](http://sandbox.thedeveloperinside.com/buzz/buzz.min.mootools.js)