Friday, September 16, 2011

Google+: Le mie Attività - Gadget per il tuo sito

Come promesso. Un po' di smanettamento e via con una mia prima applicazione di esempio delle API per Google+.
Una cosa interessante della chiamata per le attività di un utente è la possibilità di definire nell'URL la funzione javascript che deve essere chiamata al rientro della risposta JSON.
Il nostro json, infatti, non è così immediatamente utilizzabile (e di certo esistono molti più esperti di me, nel settore, ma io l'ho scoperto pian pianino) e ha bisogno di un po' di aiuto, sopratutto quando si tratta di chiamate cross-domain.
Bene. Jquery ci aiuta, sì e no: ho usato le librerie JSONP, che ho linkato direttamente da http://jquery-jsonp.googlecode.com/files/jquery.jsonp-2.1.4.min.js.

La chiamata, così, è composta in questo modo:

$(document).ready(
 function () {
   $.jsonp({
      url: "https://www.googleapis.com/plus/v1/people/100661704413873131754/activities/public?callback=readJSON&key=YOUR_APIKEY"
   });
});

Nell'URL notiamo il parametro "callback" che definisce quale funzione javascript chiamare al ritorno.

La funzione readJSON riceve un oggetto JSON che si può interpretare poi facilmente per scriverne il contenuto.

Il risultato è quello che vedete qui a fianco, nel gadget HTML con il mio codice.

Beh, un primo esempietto :-)
Qui sotto la funzione che ho utilizzato:

function readJSON(json) {
               // ciclo l'array
               var items = json.items;
               for (i = 0; i < items.length; i++) {
                   var item = items[i];
                   var attachments = item.object.attachments;
                   var plusoners = item.object.plusoners.totalItems;
                   var content = '';
                   var img = '';
                   var imgurl = '';
                   var title = '';
                   var text = '';
                   var exturl = '';
                   if (attachments) {
                       for (j = 0; j < attachments.length; j++) {
                           var objAttachment = attachments[j];
                           var objType = objAttachment.objectType;
                           if (objType == 'article') {
                               title = objAttachment.displayName;
                               text = objAttachment.content;
                               exturl = objAttachment.url;
                           }
                           if (objType == 'photo') {
                               imgurl = objAttachment.image.url;
                           }
                       }
                   }
                   else {
                       title = item.title;
                       exturl = item.url;
                   }
                   content = '<div id="' + i + '" class="post">';
                   content += '<h3><a href="' + item.url + '"  title="' + title + '" target="_blank">' + title + ' (' + plusoners + ')</a></h3>';
                   if (imgurl != '')
                       content += '<img src="' + imgurl + '" alt="' + title + '"/>';
                   if(text != '')
                       content +=  text;                  
                   content += '</div>';
                   $('#content').append(content);
               }
           }