Facebook Live Videos Made Interactive

Facebook released its new feature: the Live Video.
You’re surely aware that America elected a new president and you may remember the buzz of that night: the live from ABC News asking who will win, by making people vote through the Facebook reactions.
Like the live for Trump, love it for Hillary.

The video had more than a hundred thousands reactions and millions of views.

I want it too!

So some friends and I wanted to try it for our FB page.
There are multiple services online that offer to do it for you.
I’m going to show you how to do it for free :D

How does it work?

Basically you need:

• A Facebook page
• OBS
• A web page you want to stream
• The process

The development of the webpage you want to stream is what takes the longest.
However, very little knowledge is needed to get this working.

How to stream?

For a Facebook live, you need to stream a video right?
We’ll use OBS, a simple tool to stream anything from your webcam, an image, a sound, a local HTML page or a website.
Do you see where this is going?

What to stream?

Well… We’ll stream an HTML page displaying whatever you like but above all: the interactions your viewers had with the video, like reactions (like, love, etc) or comments!

The HTML page

I’m not going to enter into HTML CSS JS details (I’ve done it with JQuery), just the main tips.
If you want to look at some code, here ya go!
Don’t judge!

First you need to get the reactions inside a refreshCounts function:

function refreshCounts() {
  var url = 'https://graph.facebook.com/v2.8/?ids=' + postID + '&fields=' + reactions + '&access_token=' + access_token;
  $.getJSON(url, function(res){
    //do stuff with the result
  }
}

We use the facebook Graph API.
As you see it needs:

• a postID
• an access token
• reactions

For the reactions:

var reactions = ['LIKE', 'LOVE', 'WOW', 'HAHA', 'SAD', 'ANGRY'].map(function (e) {
    var code = 'reactions_' + e.toLowerCase();
    return 'reactions.type(' + e + ').limit(0).summary(total_count).as(' + code + ')'
}).join(',');

You can try the Graph API with one of your post, I let you check on the Internet how to get the ID of a post. for a live its simple, just click on the video and the post id is the last part of url.
For example: https://www.facebook.com/newtrackfr/videos/1240079556075061.
For the access token you can get it on the explorer page.

Now you have something like this:

var postID = 1240079556075061
var access_token = a3very5long36token
function refreshCounts() {
  // stuff
}

Great, you can work with the reactions of a post.
I suggest to work with a random Facebook live, to see if the reactions, the comments, or whatever you want to get from the post is updated on your webpage.
But it’s not very interactive yet… Because it’s not live.

Get Live!

Now let’s walk through the steps to get a live video:

1. on your FB page create a live post
2. get the Stream key of your FB live, save it somewhere
3. open OBS, add a source, like the background of the page you want to stream
4. in OBS preferences -> Stream -> Stream Key : paste your stream key
5. stream with OBS
6. back on Facebook click on next, and when the stream is ok launch the live
7. get the postID of your live and put it in your webpage
8. in OBS, stream the html page (or the website)
9. phase 3: profit