.blog-posts.hfeed.container { display: none !important; } #sb-postleft { width: 100%!important; }
Xem bài viết
Lục Ly
Aphrodi.Sama@facebook.com

Cách Tạo Reaction Giống Facebook 100% Cho Blogspot Cực Nhẹ Đẹp

Terumi Afuro Tác giả:
Xuất bản: tháng 9 27, 2019 -
js reaction facebook, reaction facebook, bày tỏ cảm xúc giống facebook cho blogspot, js reaction blogspot, tạo nút bày tỏ cảm xúc cho blogspot, like cho blogspot
Hi ! chào mọi người đã đến với Blog của tôi, tôi là Sĩ Ben đây sau 1 tháng mấy rồi mới đăng bài lại, thì với tiêu đề như trên mình sẽ viết về js Reaction trên Blog của mình, vì có nhiều bạn hỏi và kêu mình viết bài về cái Reaction trên Blog của mình. Trên mạng hiện củng có nhiều người share về cách để tạo Reaction cho Blog, nhưng cách đó sẽ làm giảm tốc độ tải trang của Blog của bạn, vì nó sử dụng rất nhiều js khác nhau và khó khăn để tuỳ biến. Trong bài này mình sẽ share cách tạo Reaction cực nhẹ và đẹp do mình tự viết và giống Facebook 100% nhé.


Các thứ cần chuẩn bị


  1. Một hosting (host free hoặc $ đều được miễn có mysql và php)
  2. Xác định được chỗ cần gắn Reaction js (lưu ý là mỗi template nó khác nhau nên khó mà xác định được nên mọi người hãy xem cho kỹ template của mình để có thể gắn chính xác)

Tự tạo api reaction cho riêng mình


Vào hosting và tạo 1 file tên là reaction.php nội dụng code như sau: 
<?php
session_start();
$baomat = strpos($_SERVER['HTTP_REFERER'],'siblog.net'); // sửa siblog.net lại domain blog của bạn.
if($_SERVER['HTTP_REFERER'] && $baomat > 0){
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");
if($_GET['id']){
$id_post = $_GET['id'];
$act = $_GET['act'];
$unact = $_GET['unact'];
$host = "localhost";
$username = ""; //phần này tạo database sẽ có và nhập vào thôi.
$password = ""; // nhập...
$dbname = ""; // nhập...
$connect = mysqli_connect($host, $username, $password, $dbname);
if(mysqli_connect_errno()){
  echo "Failed to connect to MySQL: ".mysqli_connect_error();
}
mysqli_query($connect,"SET NAMES utf8");
mysqli_query($connect,"CREATE TABLE IF NOT EXISTS `Poster`(
  `id` bigint(11) NOT NULL AUTO_INCREMENT,
  `LIKE` int(11)  NOT NULL,
  `LOVE` int(11)  NOT NULL,
  `HAHA` int(11)  NOT NULL,
  `WOW` int(11)  NOT NULL,
  `SAD` int(11)  NOT NULL,
  `ANGRY` int(11)  NOT NULL,
  PRIMARY KEY (`id`)
 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;
");
    $check = mysqli_num_rows(mysqli_query($connect,"SELECT id FROM Poster WHERE id = '{$id_post}'"));
    if($check == 0){
    //API lần đầu sử dụng hệ thống
    mysqli_query($connect,"INSERT INTO Poster SET 
    `id` = '".$id_post."',
    `LIKE` = '0',
    `LOVE` = '0',
    `HAHA` = '0',
    `WOW` = '0',
    `SAD` = '0',
    `ANGRY` = '0'");
    }else{
    $get_sql = mysqli_query($connect,"SELECT * FROM Poster WHERE id = '{$id_post}'");
    $data = mysqli_fetch_array($get_sql, MYSQLI_ASSOC);
    //tăng like
    if($act && ($act == 'LIKE' || $act == 'LOVE' || $act == 'HAHA' || $act == 'WOW' || $act == 'SAD' || $act == 'ANGRY'))
    mysqli_query($connect,"UPDATE Poster SET `$act` = '".($data[$act]+1)."' WHERE `id` = '".$id_post."'");
    if($unact && ($unact == 'LIKE' || $unact == 'LOVE' || $unact == 'HAHA' || $unact == 'WOW' || $unact == 'SAD' || $unact == 'ANGRY') && $data[$unact] > 0)
    mysqli_query($connect,"UPDATE Poster SET `$unact` = '".($data[$unact]-1)."' WHERE `id` = '".$id_post."'");
    $get_react = mysqli_query($connect,"SELECT * FROM Poster WHERE id = '{$id_post}'");
    $react = mysqli_fetch_array($get_react, MYSQLI_ASSOC);
    $count = $react['LIKE']+$react['LOVE']+$react['HAHA']+$react['WOW']+$react['SAD']+$react['ANGRY'];
//get top
$get_api = array(
    "LIKE" => (int)$react['LIKE'],
    "LOVE" => (int)$react['LOVE'],
    "HAHA" => (int)$react['HAHA'],
    "WOW" => (int)$react['WOW'],
    "SAD" => (int)$react['SAD'],
    "ANGRY" => (int)$react['ANGRY']);
arsort($get_api);
$dem = 0;
$danhsach[] = '';
foreach($get_api as $name => $value) {
 if($dem < 3 && $value > 0)
    $danhsach[$dem] = $name;
 $dem++;
}
//end top
    if($act !== 'post' && $_SESSION[$id_post] = true){
    $api = array(
    "reaction" => "$act",
    "Reaction" => $get_api,
    "Top" => $danhsach,
    "count" => $count,
    "success" => true);
    }
    if($act == 'post'){
    $_SESSION[$id_post] = true;
    $api = array(
    "Reaction" => $get_api,
    "Top" => $danhsach,
    "count" => $count,
    "success" => true);
    }
    }
}else{
    $api = ["success" => false];
}
die(json_encode($api));
}else{
die('xảy ra lỗi !');
}
?>

Lưu ý là nhớ điền đầy đủ thông tin trong code nhé.

Giờ thì tích hợp vào Blogspot thôi


Bước đầu tên phải khai báo thư viện Jquery nhé, không có thì chẳng làm ăn được gì đâu ! Rồi thêm code sau lên trên thẻ </body>
<script src='//cdn.jsdelivr.net/gh/dangtiensivn/code/reaction.js'></script>
<script>
$(document).ready(function(){
    $(".reaction-hover").hover(function(){
        $(this).find(".post-reaction").addClass("show");
        $(this).find(".post-reaction .react").each(function(index, element) {
            setTimeout(function(){
            $(element).addClass("show");
            }, index * 50);
        });
    }, function() {
        $(this).find(".post-reaction").removeClass("show");
        $(this).find(".post-reaction .react").removeClass("show")
    });
});
$(".post-reaction").each(function(){
 var domain = 'cdn.siblog.net'; //nhớ sửa domain lại và lưu ý nếu file reaction.php nằm trong thư mục thì VD: thư mục siben thì domain.com/siben
 var it = $(this);
 var id_post = $(this).attr("data-post-id");
 getAPI_POST(id_post,it,domain);
 apiReaction(id_post,it,domain);
});
});
</script>

Và sau đó thêm css cho reaction 
.reaction-label i, .comments-label i, .more-label i{
    margin-right: 5px
}
.emoticon{
    cursor: pointer;
    position: relative;
    background: #fff;
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid #ccd0d5;
}
.emoticon:hover{
    background: #f5f6f7;
}
.info-reaction{
    align-items: center;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}
.info-comments{
    display: flex;
    flex-shrink: 0;
}
.reaction-hover:active .reaction-label,.comments-post:active .comments-label,.share-post:active .more-label{
  transition: .3s;
  transform: scale(0.9);
}
.comments-post .comments-label{
    align-items: center;
    color: #606770;
    display: flex;
    flex: 1 0;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    line-height: 14px;
    padding: 0 2px;
    text-decoration: none;
}
.share-post .more-label{
    position:relative;
    align-items: center;
    color: #606770;
    display: flex;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    line-height: 14px;
    padding: 0 2px;
    text-decoration: none;
}
.siben-reaction {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #fff;
}
.post-info {
    align-items: center;
    color: #606770;
    display: flex;
    line-height: 20px;
    padding: 2px 0px 10px 0px;
    border-bottom: 0.5px solid #f3f3f3;
    margin: 0 10px;
}
.info-reaction {
    align-items: center;
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}
.info-comments {
    display: flex;
    flex-shrink: 0;
}
.reaction-hover {
    align-items: center;
    display: flex;
    flex: 1 0;
    justify-content: center;
    position: relative;
}
.reaction-hover .reaction-label {
    position: absolute;
    align-items: center;
    color: #606770;
    display: flex;
    flex: 1 0;
    font-weight: 600;
    height: 32px;
    justify-content: center;
    line-height: 14px;
    padding: 0 2px;
    text-decoration: none;
}
.icon-reaction.like{
    background-position: 0 0;
}
.icon-reaction.love{
    background-position: 0 -20px;
}
.icon-reaction.haha {
    background-position: 0 -40px;
}
.icon-reaction.wow {
    background-position: 0 -60px;
}
.icon-reaction.sad {
    background-position: 0 -80px;
}
.icon-reaction.angry {
    background-position: 0 -100px;
}
.reaction-label i, .comments-label i, .more-label i {
    margin-right: 5px;
}
.icon-reaction {
    width: 20px;
    height: 20px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdD_KTJ_jdxg10kPZvmzE3OfVP29kRxiV1O34-FgSwKTiONuqyYMel7fAkeEAkinSOG7okyLA6jhcJR4o4WQVMrDfPlZVkp730GX-R493L7zrwUqeyeIaqj3PLYD720GGq9J7twf08T-tZ/s1600/fb-reaction.png) no-repeat;
    background-size: 20px;
}
.post-reaction {
    background-color: #fff;
    border: 1px solid #ebebeb;
    -webkit-box-shadow: 0 10px 29px -14px rgba(168,165,168,0.7);
    -moz-box-shadow: 0 10px 29px -14px rgba(168,165,168,0.7);
    box-shadow: 0 10px 29px -14px rgba(168,165,168,0.7);
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    top: -53px;
    left: -5px;
    position: absolute;
    width: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 6;
    padding: 5px 1px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
    transform: translate(0, 0) scale(0);
}
.post-reaction.show {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    visibility: visible;
    opacity: 1;
}
.like-button.like {
    filter: grayscale(0);
}
.love-button.love {
    filter: grayscale(0);
}
.haha-button.haha {
    filter: grayscale(0);
}
.wow-button.wow {
    filter: grayscale(0);
}
.sad-button.sad {
    filter: grayscale(0);
}
.angry-button.angry {
    filter: grayscale(0);
}
div.react:hover {
    transform: scale(1.3);
    transition: all 0.1s;
    transform-origin: bottom;
}
div.react {
    border-radius: 100%;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    border: 0;
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 40px;
    -webkit-background-size: 306px 306px;
    -moz-background-size: 306px;
    -o-background-size: 306px;
    background-size: 306px;
    filter: grayscale(100%);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translate(0, 100px) scale(0);
}
.react.show{
    opacity: 1;
    transform: translate(0, 0) scale(1);
}
div.react:hover .reaction-title {
    visibility: visible;
    opacity: 1;
}
div.react .reaction-title {
    position: absolute;
    top: -23px;
    width: 100%;
    left: 50%;
    text-align: center;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    padding: 3px 0 4px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    visibility: hidden;
    opacity: 0;
}
.like-button {
    background: url(https://assets.medinnna.com/facebook-reactions.gif) no-repeat;
    background-position: -1px 0;
}
.love-button {
    background: url(https://assets.medinnna.com/facebook-reactions.gif) no-repeat;
    background-position: -45px 0;
}
.haha-button {
    background: url(https://assets.medinnna.com/facebook-reactions.gif) no-repeat;
    background-position: -133px 0;
}
.wow-button {
    background: url(https://assets.medinnna.com/facebook-reactions.gif) no-repeat;
    background-position: -89px 0;
}
.sad-button {
    background: url(https://assets.medinnna.com/facebook-reactions.gif) no-repeat;
    background-position: -177px 0;
}
.angry-button {
    background: url(https://assets.medinnna.com/facebook-reactions.gif) no-repeat;
    background-position: -221px 0;
}
.like-button.like .total {
    background: #548dff;
}
.love-button.love .total {
    background: #f55065;
}
.haha-button.haha .total {
    background: #fdda74;
}
.wow-button.wow .total {
    background: #fdda74;
}
.sad-button.sad .total {
    background: #fdda74;
}
.angry-button.angry .total {
    background: #f55065;
}
.reaction-hover .reaction-label::before {
    content: ".";
    opacity: 0;
    display: block;
    width: 115px;
    height: 10px;
    position: absolute;
    top: -10px;
    left: -23px;
}
.post-reaction .total {
    font-size: 8px!important;
    font-family: Arial,Helvetica,sans-serif!important;
    color: #fff!important;
    background: #a9a9a9;
    display: inline-block!important;
    font-weight: 700!important;
    padding: 0 4px!important;
    border-radius: 50px!important;
    box-sizing: border-box!important;
    position: absolute!important;
    line-height: 13px!important;
    max-width: 100%!important;
    width: unset!important;
    overflow: hidden!important;
    top: -1px!important;
    right: -2.7px!important;
    text-decoration: none!important;
    text-overflow: ellipsis!important;
    -webkit-user-select: none!important;
}
span.small-reaction:nth-child(1) {
    z-index: 2;
}
span.small-reaction:nth-child(2) {
    z-index: 1;
}
span.small-reaction:nth-child(3) {
    z-index: 0;
}
.small-reaction.like{
    background-position: 0 0;
}
.small-reaction.love{
    background-position: 0 -20px;
}
.small-reaction.haha {
    background-position: 0 -40px;
}
.small-reaction.wow {
    background-position: 0 -60px;
}
.small-reaction.sad {
    background-position: 0 -80px;
}
.small-reaction.angry {
    background-position: 0 -100px;
}
.small-reaction {
    width: 20px;
    height: 20px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdD_KTJ_jdxg10kPZvmzE3OfVP29kRxiV1O34-FgSwKTiONuqyYMel7fAkeEAkinSOG7okyLA6jhcJR4o4WQVMrDfPlZVkp730GX-R493L7zrwUqeyeIaqj3PLYD720GGq9J7twf08T-tZ/s1600/fb-reaction.png) no-repeat;
    background-size: 20px;
    border-radius: 12px;
    display: inline-block;
    font-size: 11px;
    line-height: 16px;
    margin: 0 0 0 -3px;
    outline: none;
    position: relative;
}
.view-reaction {
    align-items: center;
    margin: 0px 4px 0px 4px;
    display: flex;
}

.post-action{
    padding: 5px 7px;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    order: 1;
}

.reaction-hover:hover,.comments-post:hover,.share-post:hover {
background: #f9f9f9;
}
.comments-post{
    align-items: center;
    display: flex;
    flex: 1 0;
    justify-content: center;
}
.share-post{
    align-items: center;
    display: flex;
    flex: 1 0;
    justify-content: center;
}
.reaction-hover{align-items: center;
    display: flex;
    flex: 1 0;
    justify-content: center;position:relative
}

Bước cuối cùng là khó nhất và quan trọng nhất


Xác định được vị trí cần gắn reaction vào :D thì để xác định được chỗ gắn thì các bạn tìm thẻ <data:post.body/> sau đó chọn vị trí cần đặt toàn bộ code sau vào: 
<div class='siben-reaction'>
<div class='post-info'><div class='info-reaction'></div><div class='info-comments'><data:post.numComments/> bình luận</div></div>
<div class='post-action'>
<div class='reaction-hover'>
<span class='reaction-label'><i class='fal fa-thumbs-up'></i> Thích</span>
<div class='post-reaction' expr:data-post-id='data:post.id'>
<div class='react like-button' reaction='like'>
<label class='reaction-title'>Like</label>
<label class='total'>0</label>
</div>
<div class='react love-button' reaction='love'>
<label class='reaction-title'>Love</label>
<label class='total'>0</label>
</div>
<div class='react haha-button' reaction='haha'>
<label class='reaction-title'>Haha</label>
<label class='total'>0</label>
</div>
<div class='react wow-button' reaction='wow'>
<label class='reaction-title'>Wow</label>
<label class='total'>0</label>
</div>
<div class='react sad-button' reaction='sad'>
<label class='reaction-title'>Sad</label>
<label class='total'>0</label>
</div>
<div class='react angry-button' reaction='angry'>
<label class='reaction-title'>Angry</label>
<label class='total'>0</label>
</div>
</div>
</div>
<div class='comments-post'>
<span class='comments-label'><i class='fal fa-comment-alt'></i> Bình luận</span>
</div>
<div class='share-post'>
<span class='more-label'><i class='fal fa-share'></i> Chia sẻ</span>
</div>
</div>
</div>

Bước này làm cẩn thận nhé vì nó là chỗ show ra cái reaction.

Lời kết


Chúc các bạn thành công và ủng hộ blog mình thường xuyên để có động lực đăng bài nhé. Nếu có thắc mắc gì xin vui lòng nhận xét phía dưới bài viết để mình học hỏi về từ mọi người nhé các bạn. Vì đây là code mình tự viết nên củng có sai sót :D nếu có cùi bép quá thì đừng có sài nhé.
0 bình luận
Thích
Bình luận
Sắp xếp theo

Bài Viết Có Thể Xem