Beranda Tutorial Memasang Emoji Facebook di Blogger

Memasang Emoji Facebook di Blogger

15 Okt 2019 Add Comment Edit

Hai kawan tertarik memasang emoji facebook di blogger kalian...? nah untuk iu akan saya sajikan tutorialnya secara lengkap. namun dalam tutorial ini ada bberapa hal yang harus kalian siapkan diantaranya  adalah menyiapkan Hosting dan Database (MysQl) karena kita akan mengupload file PHP. namun tenang kalian hanya perlu cari hosting gratisan saja sih. ok cekidot langsung ke tutorial .

Langkah Pertama buatlah file PHP yang berisikan script di bawah (untuk membuatnya bisa menggunakan Notepad ++) 
<?php
session_start();
$baomat = strpos($_SERVER['HTTP_REFERER'],'blogscpot.com'); //blogscpot.com ganti dengan nama web anda.
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 = ""; //jangan lupa isi dari mysql
$password = ""; // jangan lupa isi dari mysql
$dbname = ""; // jangan lupa isi dari mysql
$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 !');
}
?>
harap perhatikan :

  • Ganti blogscpot.com dengan nama blog anda
  • Isi $username ,$password , $dbname  yang diambil dari MysQl anda

kemudian setelah berse simpan file dengan nama reaction.php
Langkah selanjutnya adalah simpan kode di bawah sebelum tag </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>

Jangan Lupa Tambahkan CSS Berikut
.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/AVvXsEi1Wds7lXIvURjfN4HHKfv64svj6MgYBJOYCS42P9RFbDhYhWwH5bRY9zjTWdi1j-Xnf3kdlnarew2sHZrGK7ZhDqHPtNrc8RMA85KpWldhr6ldi9DHMD64s7jeYeBmopLX3-1_kMRDUKHR/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/AVvXsEi1Wds7lXIvURjfN4HHKfv64svj6MgYBJOYCS42P9RFbDhYhWwH5bRY9zjTWdi1j-Xnf3kdlnarew2sHZrGK7ZhDqHPtNrc8RMA85KpWldhr6ldi9DHMD64s7jeYeBmopLX3-1_kMRDUKHR/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
}

Terakhir Letakan kode berikut dibawah kode <data:post.body/>
<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>
Save dan lihat hasilnya
<data:post.body/> mungkin banyak silahkan kalian cek satu persatu saja ya.. nah gaes mungkin sekian dlu yang dapat saya berikan semoga tutorial ini bermanfaat. Terimakasih
Berbagi tips tentang dunia Blogger
  • Facebook
  • WhatsApp
  • Instagram

    • Related Posts

    Show Comments
    Hide Comment

    0 Response to "Memasang Emoji Facebook di Blogger"

    Posting Komentar

    Langganan: Posting Komentar (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel