Come inserire nel blog un pulsante per iniziare un hangout.

Come visualizzare nel nostro sito un pulsante per iniziare un hangout con i lettori limitando la partecipazione a chi ci cliccherà sopra o estendendola agli utenti di Google+.

Come certo saprete gli Hangout sono un potentissimo strumento messo a disposizione da Google nel suo social network Google Plus che si può dire sia la sola funzionalità non direttamente mutuata dalla esperienza di Facebook. Ha avuto un successo immediato anche perché è stata rilasciata una applicazione per dispositivi mobili che oltre ad aver preso il posto di Google Talk e permettere tutto quello che si può fare con WhatsApp può anche essere usata per inviare e ricevere SMS.

È notizia di pochi giorni fa che Hangout è stato integrato su Youtube per permettere agli utenti di trasmettere dal vivo il proprio streaming. Vediamo come sia possibile inserire un pulsante nel nostro sito per iniziare un hangout con i lettori. Google offre diverse modalità di inserimento e di personalizzazione che illustrerò brevemente.

INSERIRE IL BOTTONE HANGOUT CON MARKUP

Se si vogliono fare le cose molto semplici in un blog su Blogger si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla in Sezioni del sito il codice seguente quindi si va su Salva

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><g:hangout render="createhangout"></g:hangout>

Nel caso in cui nel vostro sito come è altamente probabile ci fosse già il pulsante di Google+ basta incollare solo il codice evidenziato di giallo visto che quello evidenziato di verde è già presente nel template.

PULSANTE HANGOUT CON HTML5

Se si vuole usare la più recente tecnologia HTML5 sempre con le stesse modalità si incolla il codice

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><div class="g-hangout" data-render="createhangout"></div>

in cui la riga evidenziata di verde può essere tralasciata se già presente nel modello.

PULSANTE HANGOUT CON JAVASCRIPT ASINCRONO

Per velocizzare il caricamento della pagina è meglio usare la versione asincrona del javascript e creare una applicazione specifica per il nostro hangout in modo da poterlo meglio personalizzare. Per prima cosa bisogna accedere alla pagina della Console APIs da loggati con il nostro account Google. Se non abbiamo mai creato un progetto se ne aprirà comunque uno. Non resta che copiare il Project Number

che si potrà comunque ricavare anche dall'URL della stessa pagina web. Volendo si può andare su API Project > Create per iniziare un nuovo progetto che avrà un altro ID. Adesso si va su Modello > Modifica HTML e con Ctrl+F si cerca la riga </body>. Subito sopra si incolla questo codice 

<script>
//<![CDATA[
window.___gcfg = {
  lang: 'it'
};
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/platform.js?onload=renderButton';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function renderButton(){
  gapi.hangout.render('placeholder-div', {
      'render': 'createhangout',
      'initial_apps': [
        { app_id : '550176567464', start_data : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' } ]    });
}
//]]>
</script>

dopo aver inserito l'ID della nostra applicazione su Google APIs. Si salva il modello.  Si possono modificare anche altri parametri quali la lingua dell'hangout. Se si mette LOCAL_APP al posto di ROOM_APP si lancia una applicazione solo per gli utenti che cliccano sul widget del sito mentre con la prima opzione l'hangout può essere raggiunto anche tramite Google+.

Per visualizzare il bottone basta andare su Layout > Aggiungi un gadget HTML/Javascript e incollare il codice seguente per poi posizionare l'elemento con il trascinamento del mouse

<div id="placeholder-div"></div>

Modificando la parte dello script evidenziata di giallo è anche possibile cambiare la forma del pulsante e le modalità dello Hangout. Per esempio con questo codice

gapi.hangout.render('placeholder-div', {
      'render': 'createhangout',
      'initial_apps': [
        { app_id : '550176567464', start_data : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
    'widget_size': 72

Si riduce la larghezza del widget a 72 pixel.

mentre con quest'altro codice

gapi.hangout.render('placeholder-div', {
    'render': 'createhangout',
    'hangout_type': 'onair',
    'initial_apps': [{'app_id' : '550176567464', 'start_data' : 'dQw4w9WgXcQ', 'app_type' : 'ROOM_APP' }],
    'widget_size': 175

si visualizzerà un bottone di questo tipo

con l'abilitazione di un Hangout on Air. Per altre personalizzazioni e opzioni consultate la documentazione sui Bottoni di Hangout corredata anche da esempi pratici. Concludo ricordando che se avete già inserito nel template lo script di Google Plus in modo asincrono si può modificare aggiungendo le righe mancanti.