Tutto il mondo
Sicuramente su Facebook avrete notato che negli ultimi giorni, come una vera e propria mania, stanno impazzendo su tantissime pagine che condividono le dirette video su Facebook con le reazioni live. Tali pagine in real-time mostrano il flusso di reactions che si stanno ricevendo.
L’obiettivo delle pagine Facebook che mettono live questi video è quello di interagire con i propri fan tramite sondaggi, richiedendo agli stessi followers di mettere una reactions in corrispondenza della preferenza di un opzione proposta (voto).
La pagine ufficiale Estathé ad esempio ha lanciato una diretta qualche giorno fa per un sondaggio: sostnzialmente veniva chiesto se si preferiva il thé alla pesca oppure al limone?
Indipendentemente dalla domanda in sostanza queste pagine sincronizzano in real-time le reactions che ricevono dai propri fans, ad esempio, nel caso di 2 potenziali scelte, mostrando magari solamente la reaction “Like” e “Love”.
Grazie a questa stretegia sono tantissimi i casi di pagine facebook che hanno visto fidelizzare i propri followers, ricevendo inoltre tantissimi nuovi mi piace, commenti e condivisioni.
Oggi il nostro obiettivo è proprio quello di fornirvi una guida per le dirette video con le Facebook Reactions che possa rispondere a quello che tantissime persone si stanno chiedendo proprio in questi giorni: come posso fare una diretta video su Facebook utilizzando le reazioni di Facebook?
Quello di cui abbiamo bisogno è sostanzialmente trasmettere una pagina web dinamica che visualizza in tempo reale le reactions di Facebook del nostro post pubblicato. Di seguito una guida completa per creare le proprie reazioni di Facebook dal vivo, anche se non siamo dei massimi esperti di Javascript HTML.
Il contatore di reazioni Facebook (File Zip)
Grazie all’utilizzo di Open Graph, Facebook ci permette di tenere traccia delle reazioni nei nostri post. Dal momento che capiamo non sia facile sviluppare il tutto in allegato trovare un file zip gratuito da scaricare dove potrete trovare tutto ciò che vi occorre per costruire la propria pagina da mettere in onda su Facebook Live.
Il file zip contiene:
- Index.html (pagina principale per lo streaming)
- Logo
- Background
- Emojis (come, Amore, Haha, triste, Shock, Angry)
- Script
[sociallocker id=12658]Scarica file .zip da qui[/sociallocker]
Una volta scaricato basta decomprimere il file sul vostro computer. All’interno troverete diversi file: aprite il file index.html con un editor di testo (esempio notepad). Come potrete vedere all’interno ci sono alcune impostazioni da configurare. Vediamo ora come poter fare.
Notare il fatto che qualora si abbiano delle conoscenze di CSS è possibile personalizzare il modello come si vuole 😉
Generare Access Token Facebook
Durata: 7 minuti
Per questa fase occorre avere un minimo di familiarità con le API di Facebook per permettervi di creare un app su Facebook. Per fare tutto ciò ci vogliono pochi minuti ed è veramente facile. Questa fase vi permetterà di generare il vostro token di accesso e chiedere i dati di Facebook.
Non vi spiegheremo l’intero processo di creazione di un app, quindi qualora non siate in grado di farlo basta semplicemente seguire questi 12 semplici passi per generare il token di accesso.
Come impostare il Live Video
Per poter impostare un Live Video, useremo gli ”Strumenti di pubblicazione” presenti su qualunque vostra pagina Facebook.
Basta accedere alla vostra pagina di Facebook e cliccare su ”Strumenti di pubblicazione” nel menu che vedete in alto. A questo punto fare clic su “Video” nel menu alla vostra sinistra. Quindi fare a questo punto clic sul “+ in diretta” in alto a destra.
Dalla schermata successiva copiare la “Chiave per lo streaming” e conservarla su un notepad:
Importante: Non rivelare la chiave per lo streaming. Chiunque può usarla per trasmettere in streaming un video nel tuo post. Questa chiave per lo streaming è valida per 7 giorni. Dopo aver visualizzato l’anteprima del video, hai fino a 5 ore di tempo per trasmettere in diretta. Se hai bisogno di più tempo, crea una nuova chiave per lo streaming poco prima della diretta.
Fare clic a questo punto su “Avanti” e visualizzerete l’Anteprima del vostro video. Compilate i campi “Titolo del Video“, “Tag del video” secondo le vostre preferenze e importante annotarsi la “Chiave per lo Streaming” (se non già fatto):
Importante: NON chiudete questa schermata. Da notare come al momento, essendo in assenza di un Software di Streaming configurato (che spiegheremo nelle fasi successive), vedremo nella precedente schermata la dicitura “Offline“.
Configurare Software Live Stream
Durata: 15 minuti
A questo punto mancano li ultimi passaggi: ormai il vostro Live Facebook è quasi pronto. Sarà necessario impostare il livestream della vostra pagina web dinamica. Per raggiungere lo scopo utilizzeremo un software gratuito chiamato OBS.
a) Scaricare OBS e installarlo sul proprio computer.
b) Fare clic su “Impostazioni di OBS” e successivamente su “Stream” nel menu a sinistra.
c) Selezionare ”Servizi di streaming ” come tipo di Stream e “Facebook Live” come servizio.
d) Incollare la “Chiave per lo Streaming” precedentemente annotata nel passaggio precedente all’interno della casella “Chiave Stream”:
Fare clic prima su “Apply” e poi su “OK”.
c) Aggiungere a questo punto la vostra fonte in dashboard OBS. Cliccare su “+”> “Browsersource”> Crea nuovo.
A questo punto dopo aver cliccato “OK” nella precedente schermata, selezionare “Local File” (vedere freccia rossa) e dopo aver cliccato su “Browse” andare a selezionare il file “index.html” che avevamo salvato precedentemente al punto 1. A questo punto fare clic su “OK”.
d) A questo punto vedrete un’anteprima della pagina web (occorre ridimensionarla per renderla a schermo intero).
Cliccare a questo punto su “Start Streaming”.
Pubblicare la Diretta Facebook Live
Manca un ultimo passo e finalmente avremo la possibilità di terminare il lavoro. Ritorniamo alla finestra pop-up di Facebook Live (quella che vi avevamo detto di non chiudere nel paragrafo del presente articolo con il nome di “Come impostare il Live Video“).
Dopo qualche secondo si dovrebbe visualizzare “Recupero flusso video”. E poi, dopo qualche altro secondo, vedrete finalmente la vostra pagina web configurata con OBS! Se vi accorgete di qualche secondo di ritardo nel flusso non preoccupatevi perchè è tutto normale.
Importante: Fino a questo momento non conosciamo il nostro ID. Questo ID va inserito nel file index.html tramite un software di modifica file in html: consigliamo Notepad. Non appena il post verrà pubblicato, saremo in grado di ottenere l’ ID e trasmettere in tempo reale le reactions.
A questo punto Pubblica la tua diretta Facebook Live cliccando su ” Go Live “.
Ora che avete pubblicato il vostro video, siamo in grado di visualizzare l’ID per tenere traccia di tutte le reactions degli utenti.
Ci sono molti modi per ottenere l’ID di un post. Il modo più semplice è quello di visitare la vostra pagina di Facebook, con il mouse andare sul link del video, fare tasto destro del mouse, e copiare l’url del Link (“Copy Link Location“). Il numero visualizzato nell’URL è il vostro ID. Incollate questo numero nel file “index.html” (apritelo con editor di testo, esempio Notepad) nella linea 106 e salvare il file (troverte nel file “index.html la riga “var postID = ‘POST_ID_HERE’; // PASTE HERE YOUR POST ID“).
Ora tornate alla dashboard OBS. Fate doppio clic sulla sorgente. Verrà visualizzata la fonte. Fare clic su OK. Il software ricaricherà la pagina web con gli aggiornamenti recenti.
A questo punto abbiamo finito! Godetevi la vostra diretta Facebook con le vostre facebook live reactions.
Questa guida in parte prende spunto dall’articolo del sito inglese Socialwall sull’argomento.
Ciao, io ho seguito tutta la guida, mandato il video in diretta live, provato a far mettere qualche reactions dagli amici, ma in video non spunta nessun contatore delle reactions. Dove sbaglio?
Ciao Davide,
capire dove sbagli non è facile perchè seguendo la guida alla lettera sia noi che chiunque l’abbia provata non ha segnalato problematiche di questo tipo.
Ho risolto, grazie della risposta. Il tempo di latenza tra ciò che registra OBS e ciò che arriva a fb è veramente altissimo nel mi caso.
Sicuramente conviene impostare un bitrate video molto più basso per favorire un trasferimento dati più stabile.
Ottima giuda, tutto chiaro. Non sono riuscito a capire come sia possibile far durare il sondaggio senza limite di tempo, cinque ore sono decisamente poche per un sondaggio. Altra cosa…..mettere in pausa il sondaggio, per esempio la notte.
Ancora complimenti, tutti meritati.
Ciao Valter,
hai provato più volte e ti è durata sempre 5 ore? Abbiamo testato una diretta per 6,5 ore circa ed è andata, non vorrei si fosse bloccata per altri motivi.
In pratica ogni volta che spengo il pc devo ricominciare tutto da capo ed il conteggio che avevo prima me lo perdo?
Ciao abbiamo provato la diretta oggi, ed è durata esattamente 4 ore, facebook ha messo qualche limitazione?
Ciao, non ci risulta Facebook ha inserito delle limitazione particolarei anche se Facebook stessa ha cominciato a guardare l’eventuale uso improprio delle dirette.
Ciao, io ho seguito alla lettera tutti i passaggi, ripetendo più volte il processo. Quello che succede è che su OBS il sondaggio è aggiornato seduta stante, mentre nella diretta di facebook non si vedono gli aggiornamenti sotto le emoticon.
C’è forse qualcosa che sbaglio è che potete indicarmi?
Grazie dell’aiuto 🙂
Ciao Raffaella,
c’è un delay nell’indicazione delle reactions nella diretta o non si vedono proprio?
Ciao, più o meno ci sono riuscito ma qualcosa mi sfugge. Nel parametro POST ID e ACCESS TOKEN che bisogna modificare, si devono incollare in entrambi gli spazi? POST ID HERE // PASTE HERE YOUR POST ID
Ciao Alex, devi indicare il tuo codice ID univoco
Ciao intanto vi faccio i complimenti per la guida.
Come faccio a tener traccia delle reazioni se il live viene fatto con l’inserimento dell’url anziche con il local file?
Grazie
Ciao Vincenzo,
se segui la guida alla lettera sarà lui a tracciare tutto automaticamente, possiamo lasciare il taccuino da parte 😀
Io ho seguito la vostra guida passo passo, ho fatto tutto!
Quando sono andato live, ho messo il numero ID, torno su OBS, rifaccio ricaricare il file index, ma alla fine non vengono mostrati i numeri autoaggiornati di fianco i like!
Consigli?
Ciao Luca,
riprova a seguire la guida perchè è stata testata (la usiamo abitualmente) e funziona tutto. Eventualmente prova a cambiare anche browser e facci sapere.
Riesco in tutto tranne a mettere il contatore, forse sbaglio a mettere id o token. Una volta generato il token lo devo mettere solo nel file html?
Ciao Giuseppe, è fondamentale che metti il numero ID corretto e poi tornando su OBS dovresti riuscire a vedere tutto. Facci sapere.
Se volessi tenere la diretta aperta per giorni?
C’è un modo per hostare il video su un server senza dover tener per forza di cose aperto il pc?
Ciao Massimiliano,
è un qualcosa che non abbiamo testato ma probabile che si possa fare, tecnicamente alla fine si può fare tutto 😀 Se ci proverai facci sapere come hai risolto. Grazie!
Grazie per la guida, finalmente qualcuno che ha reso chiaro come si fa il tutto.
Guida utilissima. Solo una cosa: come posso mettere solo il “like” e il “cuore”?
Ciao Giovanni,
contenti che la guida ti sia utile.
Quando scarichi il file zip all’interno, tra i vari file, oltre a trovare index.html, trovi anche le immagini d’esempio.
Per fare ciò che chiedi basta che sostituisci le immagini d’esempio con quelle che desideri tu e le stesse poi devi “richiamarle” dal file index.html (apri quest’ultimo con un classico notepad per l’etiding)
ciao scusate ma non riesco ho il mac e non riesco a modificare il file index per avere solo due reactions.
come devo fare?
Ciao Matteo,
su Mac puoi usare un qualunque Software che ti dia la possibilità di andare in edit tipo Notepad per Windows. Puoi provare Jedit o TextWrangler entrambi free e per Mac