UPDATE (2016-11-16): Facebook just updated their guidelines concerning Facebook Live Reactions. Please read these guidelines before beginning this tutorial.
The hot new trend on the Internet this past few days – thank you US Elections! – is displaying Facebook reactions in realtime on a Facebook Live video! We saw many comments and questions about that… “How is it possible?”, “Is it fake?”. Well, if some of these videos are fakes, it’s not that hard to build this kind of interactive video. We “just” need to broadcast a dynamic webpage that will display in realtime the Facebook reactions of your post. Here is a full tutorial to create your own Facebook Reactions Live, even if you’re not an HTML/Javascript expert.
1) Capture Facebook Reactions count
Thanks to Open Graph, Facebook lets you track reactions on your posts. We know that most of you are scared of developers and their language… so we made a full (and free) zip to download where you’ll find all the elements to build your own webpage and broadcast it on Facebook Live. It contains:
– index.html (main page to stream)
– Logo
– Background
– Emojis (Like, Love, Haha, Sad, Shock, Angry)
– Scripts
Unzip it on your computer. Now open the index.html file with a text editor. As you can see, there are some settings to configure. Let’s see how to do it!
Note that you can custom the template as you want if you know a bit of CSS 😉
2) Generate your Facebook Access Token
Duration: 7 minutes
If you’re familiar with Facebook API, you must be familiar with the process of creating an app on Facebook. It takes a few minutes and it definitely worth it. Then, you’ll be able to generate your own Access Token and ask for Facebook data.
We won’t explain the whole process of creating an app, so please follow these 12 simple steps to generate your Access Token.
Important – Your token must look like this: “349788035326125|BPmk2PBTHSnzbI8o6CZVLaRJiBY“. It is composed by a full digit number, a “|” AND a string. If at the end of this tutorial, you don’t see the counters increase, please check that your Facebook Access Token is valid.
Now edit the index.html file (line 105) with your brand new Facebook Access Token.
3) Set your Facebook Live
To go live, we will use the “Publishing Tools” on your Facebook Page.
Log on to your Facebook page and click on Publishing Tools in the top menu. Then click on Videos on the left menu. Then click on the +Live button on the top right.
Then copy the stream key in the modal window that appears:
Important: The Server URL and Stream Key can only be used for a single Live preview/post connection. You must use the same URL and key to preview and post. That is, you cannot preview, stop the stream, and then resume at a later time. The URL and Key also expire 24 hours after creation or 4 hours within the preview.
Click preview and fill in your update text and video information:
4) Configure your Livestream software
Duration: 15 minutes
Here we go. Your Facebook Live is almost ready and now you need to set the livestream of your dynamic webpage. We will use a free software called OBS to make it happen.
a) Download OBS & install it on your computer.
b) Click Settings in OBS and then click “Stream” in the left menu.
Select “Streaming Services” as the Stream Type and “Facebook Live” as the service.
Paste the stream key you obtained from the previous step (3) into the “Stream Key” box:
Click Apply and OK.
c) Add your source in OBS dashboard. Click on “+” > “Browsersource” > Create new.
Browse and select your index.html file (see step 1) as your “Local file”. Click OK.
d) You’ll see a preview of your webpage. Resize it to make it fullscreen.
Click on “Start Streaming”.
5) Publish your Facebook Live
Go back to the Facebook Live pop-up window in your browser. After a few seconds, it should display “Fetching video stream”. And then after a few more seconds, you’ll see your webpage! Please note, there will be a 5-7 second delay in the stream. This is normal.
Important: Please note that we don’t know your Post ID yet. This is the LAST info we need to finish your index.html configuration. As soon as your post will be published, we’ll be able to get your Post ID and make the real time interactions work!
Publish your Facebook Live by clicking “Go Live“.
Now your video is posted, we can get the Post ID to track all users reactions.
There are many ways to get the ID of a post. The easiest way is to visit your Facebook page, click right on the time link of your post > Copy link. The number displayed in the URL is your post ID. Paste this number in the “index.html” file on line 106. Save it.
Important: your post ID is a full digit number, not a URL.
Now go back to OBS dashboard. Double click on your source. The source popup will appear. Click OK. It will reload your webpage with recent updates.
6) Make it public
Now we’re done! Enjoy your Facebook Live featuring your followers reactions ?
A question about this article? Ask us on Twitter: @SocialWallme.
—
