Vous êtes surement tombé dessus ces derniers jours, le live vidéo avec le compteur de réactions qui s’incrémente en temps réel. C’est une nouvelle tendance à la mode sur Facebook. Je vous apprends étape par étape comment configurer un live de ce type sur votre propre page.
La première fois que j’ai vu ça, c’était pour les élections Américaines. Depuis, beaucoup de pages le mettent en place, que ce soit pour voter pour son chien préféré ou son personnage de Friends favori. C’est un classique, quand une bonne idée est lancée, elle est immédiatement reprise par d’autres. Comme vous vous en doutez surement, ce genre de vidéos est extrêmement pertinent pour faire la promotion de sa page. Deux raisons principale expliquent cela :
Elle renforce l’engagement
Ce n’est un secret pour personne, Facebook mets en avant les vidéos en direct. Cela se traduit d’abord par un « reach » naturel bien supérieur à celui des posts, photos ou liens. Mais surtout, ce genre de vidéo en direct est immédiatement notifiée aux membres de la page. C’est également le cas quand un ami à vous fait un live. Les fans d’une page ont donc une occasion de non seulement venir participer sur la page mais également en faire indirectement la promotion lorsqu’ils réagissent dessus.
Elle est extrèmement virale
Ce type de contenu est, à l’heure actuelle, le meilleur moyen pour faire la promotion de sa page. Que ce soit via des partages directs, ou des actions qui vont indirectement participer à sa promotion, les pages qui mettent ce genre de système en place en tirent un large bénéfice. Certaines pages ont explosé leur nombre de fans en quelques heures grâce à cette astuce.
A titre personnel je vois ça comme une réelle opportunité pour promouvoir sa page. Mais comme tout opportunité qui est reprise de partout, Facebook va sans doute en limiter la portée dans quelques temps. Il faut donc la mettre en place dés à présent et en profiter pendant qu’il en est encore temps.
Alors comment faire ? J’ai repris le tutoriel de Bratza.com que j’ai corrigé sur certains points, traduit et reproduit sur ma propre page Facebook. J’ai ajouté des informations supplémentaires sur des points peu abordés, comme configurer sa page index.html pour que le compteur fonctionne. Je vais essayer d’être le plus clair possible.
Tutoriel – Mettre un Live Vidéo sur sa page
Ce dont vous avez besoin
- Une page Facebook
- Un site hebergée par vos propre soins, et sur lequel vous pouvez ajouter des fichiers et y accéder par une url
- Un nom de domaine
- Une page statique sur laquelle vous allez mettre les éléments diffusés sur votre live (le texte, les photos, et les smileys)*
- OBS Studio, un logiciel utilisé pour le livestreaming
- Optionnel : Le plugin OBS Studio qui permet de l’utiliser sous forme de browser web (inutile si vous l’avez déjà installé avec OBS Studio)
Je vous propose de télécharger mon propre dossier /live/, qui reprend le dossier de Bratza, avec quelques petites modifications techniques, notamment sur le Jquery et le fonctionnement de l’incrémentation du compteur. Pour faire simple, « mon » compteur s’incrémente réellement selon les réactions sur Facebook. Il n’y a pas « faux » votes ajoutés. J’explique plus bas ce que vous devez modifier pour qu’elle fonctionne sur votre propre page.
Le principe de la vidéo live avec compteur
Le compteur de vote en direct n’est pas directement géré par Facebook. Il l’est, mais de manière indirecte. C’est le code de votre page qui va récupèrer les informations de likes via l’Open Graph de Facebook et qui, ensuite, met à jour les votes sur son compteur grâce à Jquery. La page avec toutes les informations (photos + votes correspondants) est filmée par OBS Studio, qui la retransmet en direct sur Facebook.
Alors, comment faire ?
Il faut autour de 60 minutes pour suivre la totalité des étapes. Mais c’est extrêmement simple.
Etape 1 : Savoir comment créer son Live sur Facebook
Rendez vous sur votre page Facebook. Tout en haut vous avez un menu « Page / Messages / Notifications / Insights / Publishing Tools »
Cliquez sur Publishing Tools. Pour le moment ce n’est pas utile, mais ça reste quand même nécessaire pour gagner du temps plus tard.
Etape 2 : Récupérer les informations du stream FB
Sur le menu de gauche, rendez vous sur « Videos », puis sur « Live dans la colonne centrale »
Une fenêtre s’ouvre. Remarquez le « Stream Key », c’est l’information qu’il faudra coller dans le logiciel OBS que vous avez normalement téléchargé. Cliquez ensuite sur « Next »
Etape 3 : Configurer sa vidéo
Sur cet écran vous allez devoir mettre un titre et un tag à la vidéo que vous comptez mettre en place.
Le Stream Key se re-affiche, au cas ou vous ne l’aviez pas déjà copié.
Restez sur l’onglet « Basic », les autres ne servent à rien.
Etape 4 : Aller dans les paramètres de OBS
C’est le moment d’ouvrir le logiciel OBS Studio. Une fois ouvert, allez sur « Fichier / Paramètres »
Etape 5 : Installer son flux dans OBS
Sélectionnez « Flux » dans le menu de gauche
Puis dans le menu déroulant « Service », choisissez « Facebook Live »
Quand vous serez prêt, c’est ici que vous collerez le Stream Key de votre page Facebook pour votre vidéo
Etape 6 : Créer une app Facebook pour sa page
Cette étape est indispensable, vous devez créer une App Facebook. Aucune inquiétude, c’est très facile à faire.
- Rendez vous sur ce lien https://developers.facebook.com/docs/apps/register#create-app
- Cliquez sur le bouton : « Create a Developper account »
- Cliquez sur le bouton « Create new Facebook App »
- Dans catégorie mettez « Apps for a page »
- Allez sur Settings, et dans App domains, Ajouter votre nom de domaine / Idem sur Add platforme
- Allez ensuite sur App Review, ne changez rien d’autre. Les fonctions de login, etc, sont inutiles pour le live video.
- Publiez votre App, aucun danger, elle n’apparait pas encore sur votre page.
Etape 7 : Configurer sa page statique
Téléchargez mon dossier, vous n’aurez qu’a modifier les informations ou les photos pour avoir quelque chose qui colle avec vos besoins.
Ouvrez la page index.html et mettez en place ce que vous souhaitez diffuser. Comme par exemple les photos, les réactions que vous souhaitez proposer à vos membres. Attention, la page est configurée pour les smileys Like / Sad. Si vous voulez en avoir d’autres, il faut modifier les smileys de votre coté, et surtout le code Ligne 188. Pensez évidemment à supprimer les {}, ils ne sont la que pour encadrer le titre de l’élément à modifier, ils ne doivent plus apparaitre dans le code quand tout est complet.
Ligne par ligne
- Ligne 5 : Le titre de votre sondage / vidéo
- Ligne 103 : Idem, le titre de votre sondage / vidéo (peut être différent du premier)
- Ligne 188 / 190 / 192 : Le post ID de votre page Facebook. Il est sous la forme « ID de votre page_ID du post ». Pour mon exemple ça donne 5566565_10604934307. On trouve l’ID de la page via cet outil : http://findmyfbid.com/. Et l’ID du post, est trouvable après publication de la vidéo, en copiant collant le lien sur http://findpostid.com/ (10604934307). Donc le post_id dans ce cas présent serait 52436220766_10604934307
- Ligne 189 : Pour le access_token, il faut aller sur cette url : https://developers.facebook.com/tools/explorer/. Puis cliquer sur get token / get page access token. Ensuite vous copiez coller la grande chaîne de caractère, qui est votre access_token. C’est une très longue série de chiffres / lettres.
Divers
- Les images font 512 x 512, les vôtres doivent avoir le même format si vous voulez pas avoir à modifier le design.
- Les smileys font 50 x 50
- Pensez à adapter le code des lignes 189 / 191 selon le type de smileys que vous mettez.
- Pour avoir un compteur truqué, modifiez les valeurs en ligne 114 et 124. Remplacez le 0 par le chiffre initial que vous souhaitez avoir
- Par défaut, le mécanisme de comptage ajoutait au fur et à mesure des votes de façon artificielle. Même si aucun vote n’a lieu sur votre statut, vous en aurez quand même sur la page. Pour ma part j’ai décidé de partir sur un mode plus sain, seuls les vrais votes apparaissent. Le flux se raffraichi toutes les 30 secondes, c’est un délai imposé par Facebook. Pour augmenter artificiellement les votes, mettez 1 au lieu de 0 sur les lignes 196 et 202.
Etape 8 : Configurer le plugin OBS Studio
L’idée ici est de mettre l’url de votre page fixe (celle qui sera diffusée sur votre live) sur votre hébergement.
- Ouvrir OBS
- Cliquer sur le + en bas de la fenêtre « Sources »
- Choisir « BrowserSource »
- Ne rien modifier, cliquer sur OK
- Placer l’url de la page index dans URL
- Dimensions : 1280 x 720 (se modifie ensuite automatiquement)
Pensez à étirer la fenêtre si elle ne rempli pas complètement la partie noire.
Etape 9 : Démarrer le live
Retournez en etape 3, vérifiez bien que vous avez copié collé le Stream Key de la vidéo live, et quand c’est le cas, cliquez sur « Commencer le streaming » dans OBS. Le bouton « Go Live » sur votre page Facebook devrait devenir clicable au bout de 15 – 20 secondes. Quand c’est le cas, cliquez sur Publish et c’est parti ! Attention, on entend les sons de chez vous sur le stream. Pensez à couper les enregistrements en baissant le son du micro au maximum sur OBS Studio.
Récapitulatif quand c’est un peu plus clair
- Configurez votre page index.html (téléchargement). Récuperez votre access_token sur cette page et mettez le dans votre fichier index.html
- Postez la sur un FTP, de sorte que vous ayez un lien http://www.mondomaine.com/folder/index.html
- Ouvrez OBS, configurez la source, en choisissant « BrowserSource »
- Configurez « BrowserSource »
- Rendez vous sur votre page, cliquez sur « Vidéos » / « Live »
- Copiez Collez le Stream_key sur OBS, et publiez le stream
- Quand le stream apparait sur la page FB, publiez la vidéo
- Copiez le lien de votre page sur http://findmyfbid.com/ (si ça ne marche pas, allez sur votre page FB, onglet About et allez tout en bas)
- Collez l’ID qui ressort dans la page index.html, à la place indiquée pour le « post_id » (ex : 511414141)
- Copiez le lien de votre video sur http://findpostid.com/
- Collez l’ID qui ressort dans la page index.html, à la place indiquée pour le « post_id », juste après celui indiqué plus tot suivi d’un underscore (ex : 511414141_1242322424). Votre post_id final est donc la combinaison 511414141_1242322424
- Remplacez le fichier index.html sur votre serveur par celui que vous venez juste de compléter
MAJ 17/11/2016
Sur le Jquery
Concernant le Jquery, modifiez le comme bon vous semble. L’auteur original ajoutait entre +1 et +25 toutes les 5 / 10 secondes et mettait ensuite le vraie decompte toutes les 30secs
Pour les pages pas hyper reactives ça provoquait une incohérence dans les votes (compteur qui monte, puis descend). J’ai donc gardé uniquement le refresh toutes les 30 secs mais avec le vrai décompte.
Non rafraichissement du compteur
Si votre compteur ne se mets pas à jour, deux options possibles
- Soit il se met à jour sur la page index.html, mais pas sur OBS (votre flux).
Dans ce cas, le problème vient du cache de ObsBrowser. Une astuce consiste à aller sur le dossier de ce plugin dans son ordinateur (chez moi c’est « C:\Users\MonID\AppData\Roaming\obs-studio\plugin_config ») supprimer tous les fichiers de ce dossier et le mettre en lecture seule. En faisant ça vous êtes sur que chaque changement sur la page sera reproduite sur le stream
- Soit il ne se met pas à jour sur votre page index.html.
La je vous conseille d’utiliser Google Chrome, clic droit, inspecter la page, Console, et regarder l’erreur que vous avez. Il est fort probable que votre access_token ne soit pas valable. Vous devez re-installer votre token.
Par ailleurs j’ai modifié un peu le fichier en ajoutant un refresh auto en bas de page pour être sur que ça fonctionne bien.
<script type="text/javascript">
setTimeout(function () { location.reload(true); }, 40000);
</script>
J’espère que ça vous sera utile, n’hésitez pas si vous avez des questions.
Note finale : Vous pouvez reprendre les fichiers que j’ai modifié et les reproposer pour votre audience. Si c’est le cas, je vous demande simplement de mettre un lien (en Dofollow) vers cette page 😉 Merci