facebook live: tuto pour du temps réel

Étiquettes : , , ,

Vous avez déjà vu une de ces vidéos Facebook Live avec des réactions qui s’affichent en temps réel ? Voici un petit tuto pour créer la vôtre !

La nouvelle tendance en vogue sur Internet actuellement consiste à afficher des réactions Facebook en temps réel sur une vidéo Facebook Live ! Mais beaucoup se demandent s’il est vraiment possible de faire cela, et s’il ne s’agit pas de simples fakes…

Eh bien, si certaines de ces vidéos sont en effet des fakes, il n’est cependant pas si difficile de créer ce genre de vidéo interactive. Vous avez « juste » à diffuser une page Web dynamique qui affiche en temps réel les réactions sur votre vidéo live. Voici un tutoriel complet pour créer votre propre Facebook Live Reactions, même si vous n’êtes pas un expert en HTML/Javascript.

1) Creéz votre page web dynamique

Grâce à Open Graph, Facebook vous permet de suivre les réactions sur vos publications. La première chose à faire c’est de créer une page web pour diffuser votre vidéo Facebook Live. A défaut de créer la page vous-même, voici un lien pour télécharger un zip complet (et gratuit). Il contient tous les éléments pour créer votre propre page Web et la diffuser sur Facebook Live. Le dossier comprend :

  • index.html (page principale à diffuser)
  • Logo
  • Arrière plan
  • Emojis (Like, Love, Haha, Triste, Choqué, En colère)
  • Scripts

Dézippez-le sur votre ordinateur. Ouvrez le fichier index.html avec un éditeur de texte. Vous verrez qu’il ya quelques paramètres à configurer. Voyons comment faire cela !

Notez au passage que vous pouvez personnaliser le template comme vous le souhaitez. Il faut juste quelques connaissances en CSS !

2) Générez votre jeton d’accès (Access Token) Facebook

Durée : 7 minutes

Si vous connaissez un peu l’API Facebook, vous devez être familier avec le processus de création d’une application sur Facebook. Cela prend quelques minutes, mais en vaut vraiment la peine. Après, vous serez en mesure de générer votre propre jeton d’accès et accéder à des données Facebook.

Nous n’allons pas expliquer tout le processus de création d’une application. Alors voici une page qui vous montre comment faire.

Important – Votre jeton doit ressembler à quelque chose comme ceci : « 349788035326125|BPmk2PBTHSnzbI8o6CZVLaRJiBY « . Il est composé d’un nombre entier, d’un « | » ET d’une chaîne de caractères. Si à la fin de ce tutoriel, vous ne voyez pas les compteurs augmenter, vérifiez que votre jeton d’accès Facebook est bien valide.

Maintenant, modifiez le fichier index.html (ligne 105) avec votre nouveau jeton d’accès Facebook.

3) Mettez en place votre Facebook Live

Pour diffuser en direct, vous devez utiliser les « Outils de publication » sur votre page Facebook.

Connectez-vous à votre page Facebook et cliquez sur Outils de publication dans le menu en haut de votre page. Cliquez ensuite sur « Vidéos » dans le menu de gauche. Puis sur le bouton « +Live » en haut à droite.

Copiez ensuite la clé du flux dans la fenêtre qui apparaît :

Important : L’URL du Serveur et la Clé du Flux ne peuvent être utilisés que pour une seule connexion de prévisualisation/publication Live. Vous devez utiliser la même URL et la même clé pour prévisualiser et publier. Autrement dit, vous ne pouvez pas prévisualiser, arrêter le flux et reprendre plus tard. L’URL et la clé expirent également 24 heures après la création.

Cliquez sur « Prévisualiser » et entrez les informations vidéo.

4) Configurez votre logiciel de Live Streaming

Durée : 15 minutes

C’est parti. Votre Facebook Live est presque prêt. Vous devez maintenant définir le flux en direct (livestream) de votre page Web dynamique. Pour le faire nous allons utiliser le logiciel libre OBS (Open Broadcaster Software).

A) Téléchargez OBS et installez-le sur votre ordinateur.

B) Cliquez sur « Paramètres » dans OBS puis sur « Flux » dans le menu de gauche.

Sélectionnez « Streaming Services » comme type de flux et « Facebook Live » comme service.

Collez la clé de flux que vous avez obtenue à l’étape précédente (3) dans la zone « Stream Key ».

Cliquez sur Appliquer et sur OK.

C) Ajoutez votre source dans l’interface OBS. Cliquer sur « + » => « Ajouter une source (Browser Source) » => Créer nouveau.

Parcourez et sélectionnez votre fichier index.html (voir l’étape 1) en tant que votre « Fichier local ». Cliquer sur OK.

D) Vous verrez un aperçu de votre page Web. Redimensionnez-la pour la mettre en plein écran.

Cliquer sur « Commencer le streaming ».

5) Publiez votre Facebook Live

Revenez à la fenêtre pop-up de Facebook Live dans votre navigateur. Après quelques secondes, elle doit afficher « Extraction du flux vidéo ». Puis après quelques secondes de plus, vous verrez votre page web ! Mais il y aura un léger décalage de 5 à 7 secondes dans le flux. C’est normal.

Important : Notez qu’on ne connait pas encore votre identifiant de publication (Post ID). C’est la DERNIÈRE info dont nous avons besoin pour terminer votre configuration index.html. Dès que votre vidéo sera publiée, vous pourrez obtenir votre Post ID et faire fonctionner les interactions en temps réel !

Publiez votre Facebook Live en cliquant sur « En direct » (Go Live).

Maintenant votre vidéo est publiée, vous pouvez obtenir le Post ID pour suivre toutes les réactions des utilisateurs.

Il ya plusieurs façons d’obtenir l’ID d’une publication. La façon la plus simple est de visiter votre page Facebook, de cliquer sur le lien de votre poste, puis Copier le lien. Le numéro affiché dans l’URL est votre post ID. Collez ce nombre dans le fichier « index.html » à la ligne 106. Enregistrez la modification.

Important : votre post ID est un nombre entier, et non une URL.

Revenez maintenant à l’interface OBS. Double-cliquez sur votre source. La fenêtre popup de la source va s’afficher. Cliquer sur OK. Votre page Web sera actualisée avec les dernières mises à jour.

6) Publiez la page

Maintenant, nous avons terminé ! Profitez de votre Facebook Live avec les réactions de vos followers en temps réel.


Devenez chroniqueur

Vous souhaitez devenir chroniqueur ou nous soumettre un article? Rien de plus simple.

Ça m'intéresse

#EPW sur Twitter

#EPW sur Facebook

À propos

Votre blog Écrire pour le web en chiffres
  • Plus de 25.000 sessions par mois
  • Plus de 35.000 pages vue chaque mois
  • 1500 abonnés à la newsletter
  • Créé en 2006
  • 1e position dans Google sur des expressions métier
En savoir plus