Programming, Network, Office, Hardware, Software, Design, Photography.. I am just a GEEK
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:123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142<!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 1svar 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 🙂
