Da alcuni giorni stiamo notando sempre di più che le pagine Facebook condividono dirette video su Facebook mostrando in real-time il flusso di reactions che si stanno ricevendo. Questo tipo di dirette le stiamo vedendo soprattutto su pagine Facebook che vogliono interagire con i propri fan tramite sondaggi, richiedendo ai propri followers di mettere una reactions in corrispondenza della preferenza di voto. Facciamo qualche esempio?

La pagine ufficiale Estathé ad esempio ha lanciato una diretta per un sondaggio: preferite il thé alla pesca oppure al limone? [CLICCA PLAY]

La pagina Promon ha lanciato una diretta video su Facebook per un sondaggio in merito alla preferenza tra Amsterdam e Londra. Il voto? Tramite reactions! [CLICCA PLAY]

Praticamente sincronizzano entrambi in real-time le reactions che ricevono, mostrando magari solamente la reaction “Like” e “Love”.

Con queste dirette Live possiamo dirvi che entrambe le pagine Facebook hanno fidelizzato maggiormente con i propri followers e hanno ricevuto tantissimi nuovi mi piace, commenti e condivisioni.

Tornando a noi…

State cercando una guida per le dirette video con le Facebook Reactions?

Abbiamo “solo” bisogno di trasmettere una pagina web dinamica che visualizza in tempo reale le reactions di Facebook del tuo post. Ecco un tutorial completo per creare le proprie reazioni di Facebook dal vivo, anche se non sei un esperto / Javascript HTML.

File Zip

Grazie a Open Graph, Facebook consente di tenere traccia reazioni nei tuoi post. Sappiamo che molti di voi hanno paura di sviluppatori e la loro lingua … così abbiamo fatto un pieno (e gratuito) zip per scaricare dove troverete tutti gli elementi per costruire il proprio sito e in onda su Facebook Live. Contiene:

  • Index.html (pagina principale per lo streaming)
  • Logo
  • Background
  • Emojis (come, Amore, Haha, triste, Shock, Angry)
  • Script

Scarica file .zip da qui

Decomprimerlo sul proprio computer. Ora aprite il file index.html file con un editor di testo. Come si può vedere, ci sono alcune impostazioni da configurare. Vediamo come fare!
Si noti che è possibile personalizzato il modello come si vuole, se si conosce un po ‘di CSS?

Generare Access Token Facebook

Durata: 7 minuti

Se si ha familiarità con le API di Facebook, è necessario avere familiarità con il processo di creazione di un app su Facebook. Ci vogliono pochi minuti ed è sicuramente la pena. Poi, sarete in grado di generare il proprio token di accesso e chiedere i dati di Facebook.

Non spiegare l’intero processo di creazione di un app, quindi si prega di seguire questi 12 semplici passi per generare il token di accesso.

Impostare Live Video

Per andare sulle Live Video, useremo gli ” Strumenti di pubblicazione ” presenti sulla vostra pagina Facebook.
Accedere alla tua pagina di Facebook e cliccare su Strumenti di pubblicazione nel menu in alto. Quindi fare clic sul video nel menu a sinistra. Quindi fare clic sul + live tasto in alto a destra.

live dirette facebook 1 1024x495 - [GUIDA] Facebook Reactions Live VideoQuindi copiare la chiave di flusso nella finestra modale che appare:

configurazione chiave api facebook live

Importante: l’URL del server e la chiave flusso possono essere utilizzati solo per una singola connessione Live Preview / post. È necessario utilizzare lo stesso URL e la chiave per visualizzare in anteprima e post. Cioè, non è possibile visualizzare in anteprima, fermare il flusso, e poi riprendere in un secondo momento. L’URL e la chiave scadono anche 24 ore dopo la creazione o 4 ore all’interno l’anteprima.

Fare clic su Anteprima e compilare il testo di aggiornamento e informazione video:

facebook live diretta

Configurare Software Live Stream

Durata: 15 minuti

Eccoci qui. Il tuo Facebook Live è quasi pronto e ora è necessario impostare il livestream della tua pagina web dinamica. Useremo un software gratuito chiamato OBS per farlo accadere.

a) Scaricare OBS e installarlo sul proprio computer.
b) Fare clic su Impostazioni di OBS e quindi fare clic su “Stream” nel menu a sinistra.
Selezionare ” servizi di streaming ” come tipo di Stream e “Facebook Live” come il servizio.
Incollare la chiave torrente ottenuto dal passaggio precedente (3) nella casella “chiave stream”:

obs live streaming facebook

Fare clic su Applica e OK .

c) Aggiungere la vostra fonte in dashboard OBS. Clicca su “+”> “Browsersource”> Crea nuovo.

facebook live obs

Sfoglia e selezionare il index.html lima (vedi punto 1) come “file locali”. Fare clic su OK.

stream obs facebook live

d) Vedrai un’anteprima della pagina web. Ridimensiona per renderlo a schermo intero.
Clicca su “Start Streaming”.

Pubblicare Diretta Facebook Live

Torna alla finestra pop-up di Facebook Live nel browser. Dopo pochi secondi, si dovrebbe visualizzare “Recupero flusso video”. E poi, dopo qualche secondo, vedrai la tua pagina web! Se vedi che ci sarà un secondo di ritardo nel flusso. E’ normale.

Importante: Si prega di notare che ancora non sappiamo l’ID. Questo ID dobbiamo inserirlo 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.

Pubblica la tua diretta Facebook Live cliccando su ” Go Live “.

Ora che il video viene pubblicato, siamo in grado di ottenere 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, cliccare direttamente sul link momento del tuo post> Copia link . Il numero visualizzato nell’URL è il tuo ID. Incolla questo numero nel file “index.html” nella linea 106. Salvalo.

live facebook

Ora torna alla dashboard OBS. Fai doppio clic sulla sorgente. Verrà visualizzata la fonte. Fare clic su OK. Il software ricaricherà la pagina web con gli aggiornamenti recenti.

Ora abbiamo finito! Godetevi la vostra diretta Facebook con le vostre reacionts.

Un voto su questo articolo? ?

Vota questa pagina
[Totali: 4 Media: 5]
  • anonimo

    Scusa ma non ci capisco, la pagina index perche’ funzioni non bisogna caricarla in un hosting?
    poi ho provato a cambiare le immagini ma non si vedono.

    • AVdesign

      Ciao, la pagina index puoi lasciarla in una cartella del tuo desktop che renderai pubblica (così accessibile a tutti). In questa cartella puoi trascinare tutte cartelle che trovi nel file .zip che hai scaricato. Infine, sul software OBS devi inserire il percorso del file index.html. Per cambiare il background, se modifichi il file index.html tramite Notepad+ puoi personalizzare la pagina al 100%.

      • Emanuele

        Buonasera, ho fatto esattamente tutti i passaggi che avete descritto ma quando clicco Avvia Trasmissione sul pop-up della pagina resta tutto OFFLINE, anche se i valori di streaming su OBS si muovono… come mai?

        • AVdesign

          Ciao @disqus_RviKExrWR2:disqus, sei sicuro di aver settato su OBS, dalle impostazioni “Stream”, la voce “Facebook Live” ed impostato la chiave segreta che ti fornisce Facebook tramite Strumenti di Pubblicazione?

          • Emanuele

            sicurissimo, provato più volte…

          • AVdesign

            Ciao @disqus_RviKExrWR2:disqus, se necessiti di una soluzione professionale, ti invitiamo a contattarci https://m.me/AVdesignCT

      • anonimo

        Ciao, ci sono riuscito però c’e’ un problema. a differenza di altre reactions che ho visto la mia èlenta, poi in obs i valori dei like o cuoricini sono reali invece in facebook ne conta meno come mai ?

  • Matteo Beneggi

    io ho seguito tutti i passaggi il video in diretta parte ma non incrementa da nessuna parte con le reactions, ho inserito sia token che id ed ho riaggiornato la pagina ma non va…

    • Matteo Beneggi

      per meglio spiegare, in obs vedo i dati incrementare ma non li vedo sulla diretta live cosa potrebbe essere?

      • AVdesign

        Ciao @matteobeneggi:disqus hai risolto? Se non si sei riuscito, ti invito a contattarci in privato così da capire la problematica. https://m.me/AVdesignCT

  • Giampiero

    Salve, bella guida complimenti.
    Una domanda, scegliendo avere solo 2 scelte, dove modifico le posizioni dei 2 rettangoli bianchi?

  • Giampiero

    Salve, bella guida complimenti.
    Una domanda, scegliendo di avere solo 2 scelte nel sondaggio, dove modifico le posizioni dei 2 rettangoli bianchi?

    • AVdesign

      Ciao @jamp982:disqus, per mostrare solamente due reactions bisogna modificare il file index.html ed eliminare le righe di codice che non ci interessano. Nel caso in cui vorresti solo Like e Love, dovresti lasciare le prime due righe di codice (se ti può aiutare cerca img oppure emoji). Se hai bisogno di una diretta facebook professionale, non esitare a contattarci privatamente. A presto.

      • Giampiero

        Si ho eliminato le righe che non mi interessano ma come si fa per accentrare i due rattangoli bianchi ? occupano sempre i primi due spazi su 6 restando nelle prime due posizioni quindi non vanno bene per fare un confronto con 2 oggetti.

        • AVdesign

          Ciao @jamp982:disqus, bisogna impostare 50% come dimensione della row. Attualmente, nel file che hai scaricato, dovrebbe essere al 33%.

          • Giampiero

            Grazie. Un’ultima cosa, dove modifico il colore e le dimensioni del font del counter?

          • AVdesign

            Ciao @jamp982:disqus, sul file index puoi modificare il colore e la dimensione dei font. A presto

  • Luca

    Salve, ottima guida e semplice da settare, l’unico problema una volta andato online con la live non vedo i numeri dei conteggi.

    • AVdesign

      Ciao @disqus_btJR1DDyjK:disqus, hai configurato l’access token? Lo trovi qui: https://developers.facebook.com/tools/accesstoken/

      • Luca

        Si ho inserito sia il token che il post id mentre vedo la diretta riesco a vedere anche “svolazzare” le reaction ma affianco alle icone non appaiono i numeri. Grazie

        • Soyana Lanza

          Anche io sto avendo lo stesso problema da ieri, pur avendo inserito token e id post

          • AVdesign

            Ciao @soyanalanza:disqus sei riuscita a risolvere il problema? Qualora necessiti di una soluzione professionale, ti invitiamo a contattarci in privato https://m.me/AVdesignCT

          • Luca

            Stesso problema, non esce il numero degli auto aggiornamenti!

  • Giosuè Caressa

    Salve, come modifico il numero delle reazioni e come modifico lo sfondo?
    (Io ad esempio voglio che la live segua 3 reazioni)

    • AVdesign

      Salve, per modificare il numero di reactions basta eliminare le stringhe contenenti le emoji che non volete mostrare nella Facebook Live. Tutto ciò é possibile editando il file index.
      A presto.

  • Francesca

    Ho utilizzato Like e Love, tutto ok …o quasi 🙁 perché vedo solo il counter dei like e quello del love è come se fosse sparito (ho verificato che ce ne siano ovviamente!!!)

  • valerio

    Ciao, ottima guida complimenti. Ma vorrei chiedere, come faccio ad inserire un testo sopra la reactions?

  • Chiusolo Vincenzo

    In strumenti di pubblicazione non ho la voce “in diretta”.

Maggiori informazioni su:


Inviando la richiesta accetti termini e condizioni d'uso