Thống kê tương tác thực trong Live Stream Facebook

ngoton 21/11/2016 HTML Leave a comment 4,156 Views

Chào các bạn, lâu rồi Ngô Tôn không ra bài viết mới thì hôm nay mình xin chia sẻ một bài mà cũng đang được mọi người quan tâm trong thời gian gần đây.
Từ khi Facebook ra mắt Live stream nó đã mang lại rất nhiều ứng dụng thiết thực cho mọi người đặc biệt với Social Marketing. Gần đây mọi người cũng đang thắc mắc làm thế nào để hiện thị số lượt like hay bày tỏ cảm xúc trực tiếp trên video live stream của mình. Sau đây mình xin hướng dẫn các bạn thực hiện, trong bài viết này mình sẽ lấy ví dụ cho 1 fanpage.

Chuẩn bị
Đầu tiên bạn cần tạo 1 ứng dụng của facebook để lấy access token:
– Các bạn vào https://developers.facebook.com/ để tạo ứng dụng.
– Tiếp theo, các bạn vào https://developers.facebook.com/tools/explorer/ sau đó chọn vào ứng dụng vừa tạo rồi copy đoạn mã access token (để dành cho bước sau).

Bây giờ các bạn sẽ tiến hành cài đặt phần mềm live stream trên desktop, ở đây mình dùng XSplit Broadcaster:
– Bạn vào trang chủ https://www.xsplit.com đăng ký 1 account rồi download về tiến hành cài đặt khá đơn giản.

Bước chuẩn bị cuối cùng, các bạn download source code này về giản nén ra để sử dụng: http://www.mediafire.com/file/ldtgb62bbdp6bfb/live.rar
Cấu hình
Đầu tiên, các bạn mở XSplit lên sau đó đang nhập vào rồi tạo 1 màn hình để live stream:
– Các bạn vào mục Sources->Screen capture.., sau đó kéo vùng quay lại trên màn hình. (ở đây mình sẽ mở file index.html ở source trên vừa down về- mình quên chưa giới thiệu trong file các bạn down về có gì, nó chỉ có 3 phần là file index.html và 2 folder image và js cụ thể trong đó có gì thì chúng ta tính sau).

Các bạn thấy khung màu đỏ chính là vùng mình sẽ quay video live stream lên facebook.
Tiếp đến các bạn vào mục Outputs->Set up a new output->Custom RTMP
Các bạn thấy có 2 mục: RTMP URL và Stream Name , 2 thông tin này ta sẽ lấy từ facebook

Các bạn quay trở lại trang fanpage của các bạn rồi tiến hành tạo 1 video live stream trong mục Công cụ đăng:

Sau đó bạn lấy 2 thông tin URL máy chủ và Khóa luồng paste vào trong XSplit đặt tên cho output này là Facebook rồi Ok bạn cho chạy live stream khi đó bạn sẽ xem được preview trên facebook.
Sau khi đăng video lên bạn tiến hành lấy URL của video bằng cách nhấp phải vào chọn Show URL rồi copy chuỗi số cuối cùng ví dụ: https://www.facebook.com/ngoton.it.fanpage/videos/1102250076558543/ (ta sẽ dùng sau).

Tùy chỉnh
Trong source bạn down về có 3 mục:
– image: chứa hình ảnh nền, emoji (các bạn thay file background.jpg theo hình của các bạn nhớ giữ nguyên tên file)
– js: các bạn không cần quan tâm
– index.html
Bây giờ ta mở file index.html bằng Notepad tiến hành chỉnh sửa:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Thống Kê tương tác Livestreams</title>
	<style>
        html {
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          margin:0;
          padding:0;
          background-position: center;
          background-repeat: no-repeat;
          background-attachment: fixed; /* YOUR BACKGROUND URL HERE */
          -webkit-background-size: cover; 
          background-size: cover; 
        }
		*, *:before, *:after {
		  box-sizing: inherit;
		}
		body{
			margin: 0;
            font-family: 'Open Sans', sans-serif;
            color: #333;
            width: 100%;
            height: 100%;
		}
        header { 
            text-align: center; 
        }
        header .logo { 
            position: relative; 
            margin:100px auto 20px; 
            width:250px;
        }
        h1 { 
            text-align: center; 
            width:100%; 
            font-size: 50px; 
            padding: 30px 0; 
            margin:0; 
            color:#fff;
        }
		#wrap{
			position: relative;
			margin: 0px auto;
			width: 1280px;
			height: 720px;
		}
        .tc { 
            text-align: center; 
            font-size: 3rem; 
            font-weight: bold; 
        }
        .wf { 
            width: 28%; 
        }
        .wf img.illu {
            width:80%;
            display: block;
            margin: 20px auto;
            position: relative;
        }
        .wf img.emoji  {
            width:100px;
            display: inline-block;
        }
        .wf { 
            float:left; 
            margin:30px 2%;
            background:none;
            border-radius: 8px;
            position: relative; 
            text-align: center; 
            text-shadow: 2px 2px 2px #000;
        }
        .left{
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .right{
            float: right;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .c{
            bottom: 70px;
        }
        .counter{
            color: white;
            font-weight: bold;
        }
	</style>
</head>
<body>
    <!-- REACTIONS -->
	<div class="tc wf likes left c"><img class="emoji like" ></div>
    <div class="tc wf likes left"><span class="counter"></span></div>
    <div class="tc wf happy right c"><img class="emoji love" ></div>
    <div class="tc wf happy right"><span class="counter"></span></div>

    <script src="js/jquery.min.js"></script>
    <script src="js/lodash.min.js"></script>
    <script>
        $('html').css('background-image','url(image/background.jpg)');
        $('.like').attr("src",'image/like.png');
        $('.love').attr("src",'image/love.png');
    </script>
    <script>
    "use strict";
    var access_token = 'EAADxM8gqNaQBAB7nb3jeThZA1PfZApfEMxIv1yA06YkX24aSUozdvfz13t6JIJqt6vj16tXQn5Lkybs7095H3ZCzazQa476dZB9NIHhARDDOPbqI4BQgoFA72Ice3E1ZB9xIwuBeiVDgLctBEem7lSoKgRZC3o3X1NZCm6BPmBTPAZDZD'; //mã tokken của app.
    var postID='657017147803440'; // ID của bài đăng.
    var refreshTime = 1; // Thay đổi số lượng trong 1s 
    var defaultCount = 0; // Bắt đầu đếm từ bao nhiêu .

    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(',');

    var	v1 = $('.likes .counter'),
    	v2 = $('.happy .counter');

    function refreshCounts() {
        var url = 'https://graph.facebook.com/v2.8/?ids=' + postID + '&fields=' + reactions + '&access_token=' + access_token;
    	$.getJSON(url, function(res){
    		v1.text(defaultCount + res[postID].reactions_like.summary.total_count);
    		v2.text(defaultCount + res[postID].reactions_love.summary.total_count);
    	});
    }

    $(document).ready(function(){
        setInterval(refreshCounts, refreshTime * 1000);
        refreshCounts();
    });
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<!DOCTYPE html>

<head>

<title>Thống Kê tương tác Livestreams</title>

<style>

html {

box-sizing: border-box;

width: 100%;

height: 100%;

margin:0;

padding:0;

background-position: center;

background-repeat: no-repeat;

background-attachment: fixed; /* YOUR BACKGROUND URL HERE */

-webkit-background-size: cover;

background-size: cover;

}

*, *:before, *:after {

box-sizing: inherit;

}

body{

margin: 0;

font-family: 'Open Sans', sans-serif;

color: #333;

width: 100%;

height: 100%;

}

header {

text-align: center;

}

header .logo {

position: relative;

margin:100px auto 20px;

width:250px;

}

h1 {

text-align: center;

width:100%;

font-size: 50px;

padding: 30px 0;

margin:0;

color:#fff;

}

#wrap{

position: relative;

margin: 0px auto;

width: 1280px;

height: 720px;

}

.tc {

text-align: center;

font-size: 3rem;

font-weight: bold;

}

.wf {

width: 28%;

}

.wf img.illu {

width:80%;

display: block;

margin: 20px auto;

position: relative;

}

.wf img.emoji {

width:100px;

display: inline-block;

}

.wf {

float:left;

margin:30px 2%;

background:none;

border-radius: 8px;

position: relative;

text-align: center;

text-shadow: 2px 2px 2px #000;

}

.left{

float: left;

position: absolute;

bottom: 0;

left: 0;

}

.right{

float: right;

position: absolute;

bottom: 0;

right: 0;

}

.c{

bottom: 70px;

}

.counter{

color: white;

font-weight: bold;

}

</style>

</head>

<body>

$('html').css('background-image','url(image/background.jpg)');

$('.like').attr("src",'image/like.png');

$('.love').attr("src",'image/love.png');

</script>

"use strict";

var access_token = 'EAADxM8gqNaQBAB7nb3jeThZA1PfZApfEMxIv1yA06YkX24aSUozdvfz13t6JIJqt6vj16tXQn5Lkybs7095H3ZCzazQa476dZB9NIHhARDDOPbqI4BQgoFA72Ice3E1ZB9xIwuBeiVDgLctBEem7lSoKgRZC3o3X1NZCm6BPmBTPAZDZD'; //mã tokken của app.

var postID='657017147803440'; // ID của bài đăng.

var refreshTime = 1; // Thay đổi số lượng trong 1s

var defaultCount = 0; // Bắt đầu đếm từ bao nhiêu .

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(',');

var v1 = $('.likes .counter'),

v2 = $('.happy .counter');

function refreshCounts() {

var url = 'https://graph.facebook.com/v2.8/?ids=' + postID + '&fields=' + reactions + '&access_token=' + access_token;

$.getJSON(url, function(res){

v1.text(defaultCount + res[postID].reactions_like.summary.total_count);

v2.text(defaultCount + res[postID].reactions_love.summary.total_count);

});

}

$(document).ready(function(){

setInterval(refreshCounts, refreshTime * 1000);

refreshCounts();

});

</script>

</body>

</html>

Các bạn thay đổi 2 đoạn này
var access_token = ‘EAADxM8gqNaQBAB7nb3jeThZA1PfZApfEMxIv1yA06YkX24aSUozdvfz13t6JIJqt6vj16tXQn5Lkybs7095H3ZCzazQa476dZB9NIHhARDDOPbqI4BQgoFA72Ice3E1ZB9xIwuBeiVDgLctBEem7lSoKgRZC3o3X1NZCm6BPmBTPAZDZD‘; //mã tokken của app.
– Bạn thay vào đoạn mã token của ứng dụng của bạn đã lấy trong phần 1.
var postID=’657017147803440‘; // ID của bài đăng.
– Thay số bằng ID của video đã copy ở phần 2.

Xong, bạn load lại file index trên trình duyệt và thử like trên facebook xem lượt tương tác trực tiếp nhé.

Chúc các bạn thành công 🙂

User Rating: 4.7 ( 1 votes)

Programming, Network, Office, Hardware, Software, Design, Photography.. I am just a GEEK

Hi, I am

Ngô Tôn

I am a programmer.

Thống kê tương tác thực trong Live Stream Facebook

About ngoton

Related Articles

Check Also

Welcome Back

Leave a Reply Cancel reply

Chia sẻ mẫu giấy khen, bằng khen AI – Corel

Tổng hợp bài viết lập trình React Native cho người mới học

Lập trình ứng dụng di động đa nền tảng với React Native

Tổng hợp icon Facebook, các biểu tượng cảm xúc Facebook

Thiết kế game multi resolution với engine cocos2dx

Tổng hợp 1000 bài tập lập trình C/C++ từ cơ bản tới nâng cao

Hàm làm tròn số ROUND, FLOOR, CEIL – Nhật ký lập trình [Chapter 7]

Xác định góc phần tư thứ mấy trên đường tròn lượng giác

Hướng dẫn tạo Chat Bot tự động trả lời tin nhắn Facebook

Tìm vị trí phần tử có giá trị x xuất hiện cuối cùng trong mảng

Chia sẻ mẫu giấy khen, bằng khen AI – Corel

Tổng hợp bài viết lập trình React Native cho người mới học

Lập trình ứng dụng di động đa nền tảng với React Native

Tổng hợp icon Facebook, các biểu tượng cảm xúc Facebook

Thiết kế game multi resolution với engine cocos2dx

Bài 3 – Hiệu chỉnh văn bản

Bài 1: Giới thiệu giao diện – Photoshop CS6

Tính tổng tất cả các phần tử xung quanh trong mảng