Pubblicato il 18/12/13e aggiornato il

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.

avvia-hangout

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

project-number-google-api

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.

widget-hangout

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

bottone-hangout

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. 




4 commenti :

  1. Ciao Ernesto,
    posso chiederti in cosa consistono questi hangouts, ché non l'ho ancora capito?
    Semplici messaggi tipo chat/sms, o vere e proprie conversazioni con videocamera, tipo skype?
    Grazie

    RispondiElimina
    Risposte
    1. Gli hangout sono omnicomprensivi. Servono per gestire gli SMS e hanno anche funzionalità simili a WhatsApp inoltre servono per creare delle Room di Videochat anche di gruppo per videochiamate singole e per streaming. Molto usati dai docenti per lezioni via web
      @#

      Elimina
  2. Salve, ho letto questo articolo e pubblicato il pulsante hangout che funziona benissimo. Avrei solo una esigenza, ovvero quando i visitatori cliccano su "avvia" che non partisse semplicemente l'applicazione, ma direttamente la videochiamata verso una specifica email. E' possibile? Grazie.

    RispondiElimina
    Risposte
    1. Si tratta di un pulsante ufficiale di Google e quindi è difficile una sua personalizzazione superiore a quella già fatta
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.