আসসালামু আলাইকুম।আশা করি সবাই ভালো আছেন।আশা করি টাইটেল দেখেই বুঝে গেছেন যে আমি কি নিয়ে এই পোষ্টি করবো হ্যা বন্ধুরা আমি আজ আপনাদের লাভ রিয়াক্ট লাইক & ডিসলাই বাটন এবং শুধু লাভ লাইক বাটনের কোড শেয়ার করবো।
Like & Dislike Button Code
এই বাটনে যা যা থাকছে : সুন্দর লাভ লাইক & ডিসলাভ ডিসলাইক বাটন।
এখানে 1000 লাইক হলে 1k দেখাবে এবং 100000 হলে 1m দেখাবে যেমনটা ফেসবুকে হয়।লাইক বাটন টি যেকোনো ওয়েবসাইট ব্যবহার করতে পারবেন।
Code : এই কোড ট্রিকবিডি তে কাজ করবে না কারন Script ট্রিকবিডিতে কাজ করে না।তাই নিচের মতো করে আপনাদের জন্য কোড রাখা হয়েছে।
Only Love React Like Button
এই কোডে শুধু ডিসলাইক সিস্টেম থাকবে না।বাকি সব আগে যা বলেছি তার মতো ।আগেই বলেছি এই কোড ট্রিকবিডিতে কাড করে না তাই নিচের মতো করে কোড রাখা হলো।
Link : Click Now
আজ এই পর্যন্তই সবাই ভালো থাকবেন ট্রিকবিডির সাথে থাকবেন।
PHP::::-
Like and unlike system
<span class="unlike fa fa-thumbs-up" data-id="”>
<span class="like hide fa fa-thumbs-o-up" data-id="”>
<span class="like fa fa-thumbs-o-up" data-id="”>
<span class="unlike hide fa fa-thumbs-up" data-id="”>
likes
$(document).ready(function(){
// when the user clicks on like
$(‘.like’).on(‘click’, function(){
var postid = $(this).data(‘id’);
$post = $(this);
$.ajax({
url: ‘index.php’,
type: ‘post’,
data: {
‘liked’: 1,
‘postid’: postid
},
success: function(response){
$post.parent().find(‘span.likes_count’).text(response + ” likes”);
$post.addClass(‘hide’);
$post.siblings().removeClass(‘hide’);
}
});
});
// when the user clicks on unlike
$(‘.unlike’).on(‘click’, function(){
var postid = $(this).data(‘id’);
$post = $(this);
$.ajax({
url: ‘index.php’,
type: ‘post’,
data: {
‘unliked’: 1,
‘postid’: postid
},
success: function(response){
$post.parent().find(‘span.likes_count’).text(response + ” likes”);
$post.addClass(‘hide’);
$post.siblings().removeClass(‘hide’);
}
});
});
});
CSS:::-
body {
padding-top: 100px;
}
.post {
width: 30%;
margin: 10px auto;
border: 1px solid #cbcbcb;
padding: 5px 10px 0px 10px;
}
.like, .unlike, .likes_count {
color: blue;
}
.hide {
display: none;
}
.fa-thumbs-up, .fa-thumbs-o-up {
transform: rotateY(-180deg);
font-size: 1.3em;
}