neonfelix
Anime Frame-by-Frame Artist
LEVEL 1
400 XP
If you are looking for a source code on How To Create Facebook Style – Like Unlike Using PHP then you are at the right place. This sample work is very familiar to us. Today, most of us are using Facebook, and the interesting part in Facebook is to like the post of your friend, family, and etc.
In this article, we create a simple like unlike using PHP. For updating likes count in our database, we used jQuery. And, you can be used this source code in your simple SNS or it's called a Social Networking Site.
HTML Like Unlike Form
This source code where you can like and unlike the posts.
jQuery Script Like Unlike
This script will be run after you click the Like Unlike Icon.
And, this is the result.
Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Download
In this article, we create a simple like unlike using PHP. For updating likes count in our database, we used jQuery. And, you can be used this source code in your simple SNS or it's called a Social Networking Site.
HTML Like Unlike Form
This source code where you can like and unlike the posts.
- <center
>
- <table
class
=
"demo-table"
>
- <tbody
>
- <tr
>
- <th
><strong
>
Sourcecodes In Sourcecodester</
strong
></
th
>
- </
tr
>
- <?php
- if(
!empty(
$result)
)
{
- $ip_address =
$_SERVER[
'REMOTE_ADDR'
]
;
- foreach (
$result as $tutorial)
{
- ?>
- <tr
>
- <td
valign
=
"top"
>
- <div
class
=
"feed_title"
><?php echo $tutorial[
"title"
]
; ?></
div
>
- <div
id
=
"tutorial-<?php echo $tutorial["
tutorial_id"]; ?>
">
- <input
type
=
"hidden"
id
=
"likes-<?php echo $tutorial["
tutorial_id"]; ?>
" value="<?php echo $tutorial[
"likes"
]
; ?>
">
- <?php
- $query =
"SELECT * FROM ipaddress_likes_map WHERE tutorial_id = '"
. $tutorial[
"tutorial_id"
]
. "' and ip_address = '"
. $ip_address . "'"
;
- $count =
$db_handle->
numRows($query);
- $str_like = "like";
- if(!empty($count)) {
- $str_like = "unlike";
- }
- ?>
- <div
class
=
"btn-likes"
><input
type
=
"button"
title
=
"<?php echo ucwords($str_like); ?>
" class="<?php echo $str_like; ?>
" onClick="moreLikes(<?php echo $tutorial[
"tutorial_id"
]
; ?>
,'<?php echo $str_like; ?>
')" /></
div
>
- <div
class
=
"label-likes"
><?php if(
!empty(
$tutorial[
"likes"
]
)
)
{
echo $tutorial[
"likes"
]
. " Like(s)"
; }
?></
div
>
- </
div
>
- <div
class
=
"desc"
><?php echo $tutorial[
"description"
]
; ?></
div
>
- </
td
>
- </
tr
>
- <?php
- }
- }
- ?>
- </
tbody
>
- </
table
>
- </
center
>
jQuery Script Like Unlike
This script will be run after you click the Like Unlike Icon.
- <
script>
- function
moreLikes(
id,
action)
{
- $(
'.demo-table #tutorial-'
+
id+
' li'
)
.each
(
function
(
index)
{
- $(
this
)
.addClass
(
'selected'
)
;
- $(
'#tutorial-'
+
id+
' #rating'
)
.val
(
(
index+
1
)
)
;
- if
(
index ==
$(
'.demo-table #tutorial-'
+
id+
' li'
)
.index
(
obj)
)
{
- return
false
;
- }
- }
)
;
- $.ajax
(
{
- url:
"more_likes.php"
,
- data:
'id='
+
id+
'&action='
+
action,
- type:
"POST"
,
- beforeSend:
function
(
)
{
- $(
'#tutorial-'
+
id+
' .btn-likes'
)
.html
(
"<img src='LoaderIcon.gif' />"
)
;
- }
,
- success:
function
(
data)
{
- var
likes =
parseInt(
$(
'#likes-'
+
id)
.val
(
)
)
;
- switch
(
action)
{
- case
"like"
:
- $(
'#tutorial-'
+
id+
' .btn-likes'
)
.html
(
'<input type="button" title="Unlike" class="unlike" onClick="moreLikes('
+
id+
',\'
unlike\'
)" />'
)
;
- likes =
likes+
1
;
- break
;
- case
"unlike"
:
- $(
'#tutorial-'
+
id+
' .btn-likes'
)
.html
(
'<input type="button" title="Like" class="like" onClick="moreLikes('
+
id+
',\'
like\'
)" />'
)
- likes =
likes-
1
;
- break
;
- }
- $(
'#likes-'
+
id)
.val
(
likes)
;
- if
(
likes>
0
)
{
- $(
'#tutorial-'
+
id+
' .label-likes'
)
.html
(
likes+
" Like(s)"
)
;
- }
else
{
- $(
'#tutorial-'
+
id+
' .label-likes'
)
.html
(
''
)
;
- }
- }
- }
)
;
- }
- </
script>
And, this is the result.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.
Download
You must upgrade your account or reply in the thread to view hidden text.