Hey! guys “Do you want to know How Instagram Photo & Video Like System Works”. As you know we all using Instagram, and hope you all enjoying it. But are you curious to know about Instagram photo & video like system. Here i am trying to make a Instagram style photo like system. Instagram’s like system is much better then other social networking sites.
If you want to see demo before learning about code section of Instagram Like system, then follow below links:
[BUTTON url=”http://www.infotheme.in/blog/demo/php/instagram-style-like-system”]See Live Demo (jQuery)[/BUTTON]
[BUTTON url=”http://www.infotheme.in/blog/demo/php/instagram-style-like-system/without-jquery.php”]Live Demo (without jQuery)[/BUTTON]
[BUTTON url=”http://www.infotheme.in/blog/wp-content/uploads/2017/03/Instagram-Style-Like-System.zip”]Download Code[/BUTTON]
Instagram Style Photo Like System Using Jquery, PHP
Step 1: Here i have created an index.php file, here you can see html code, so first you have to create a html code.
<div class="feed"> <div class="feed_img"> <img src="assets/demo.jpg" alt="instagram photo system"/> <a href="javascript:void(0);" class="feed_img_wrapper like_icon">Like This</a> </div> <div class="like_count"><span class="my_likes_count">1100</span> Likes</div> <div class="feed_tool"> <a href="javascript:void(0);" class="feed_icon dislike fav_btn">Like This</a> </div> </div>
In this html code i have created a single post / feed similar to instagram. Below you can see image preview of it:
Step 2:
As we know instagram like system is an event based system, It works with double click event. So if we want an effect similar to instagram like system, we have to create some Javascript code to do this. Here below i have created a simple code which will work as Instagram Like System.
<script>
$(document).ready(function(){
function i_like_it(act)
{
if((act == true)){
var like = $('.my_likes_count').text();
like = parseInt(like) + 1;
$('.my_likes_count').text(like);
//make ajax call and add +1 like to database if true
}else{
//make ajax call and remove 1 like from database if true
var like = $('.my_likes_count').text();
like = parseInt(like) - 1;
$('.my_likes_count').text(like);
}
}
$('.feed_img img').on('click',function(){
if(!($(".fav_btn").hasClass("like"))){
$('.feed_img_wrapper').fadeIn('slow');
$('.fav_btn').addClass('like');
setTimeout(function(){
$('.feed_img_wrapper').fadeOut('slow');
},1000);
//Save Like To DataBase
i_like_it(true);
}});
$('.fav_btn').on('click',function(){
if(!($(this).hasClass("like"))){
//Save Like To DataBase
$(this).toggleClass('like');
i_like_it(true);
}else{
$(this).toggleClass('like');
i_like_it(false);
}
});
});
</script>
In this code i have created a custom function with a boolean parameter. If boolean is equal to false means unlike or if boolean is equal to true means like.
So now here we are moving to final step of development where php code is unavailable for this session, we will read about php file in next session. For now we have to move with a css file, yeah! we need to create a css file , named “style.css / insta_like.css” And include it to head or <head> section of html file.
</pre>
div.feed_img img{
background: #EEE;
width:100%;
cursor:pointer;
}
div.feed{
max-width: 400px;
margin: 10px auto;
display: block;
border:1px solid #ccc;
padding:10px;
background:#eee;
}
div.feed_img
{
overflow: hidden;
left: 0;
top: 0;
bottom: 0;
position: relative;
}
.like_count
{
display: block;
font-size: 15px;
font-family: arial;
font-weight: bold;
color: #aaa;
padding: 5px;
background: #fff;
border:1px solid #ccc;
border-bottom:0;
}
.feed_img_wrapper
{
display:none;
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
right: 0;
top: 0;
text-align: center;
font-size:0;
}
.like_icon
{
background:transparent url('heart-1.png')no-repeat center;
}
.feed_tool
{
background: #fff;
padding: 5px;
border: 1px solid #ccc;
font-size: 0;
}
.feed_icon
{
display: inline-block;
width: 32px;
height: 32px;
}
.dislike
{
background: transparent url('heart-dislike32x.png')no-repeat center;
}
.like
{
background: transparent url('heart-like32x.png')no-repeat center;
}
<pre>Using this css you can see a perfect look of post / feed. Which will look similar to instagram’s feed / post. The like system also include a php file to handle the like request over server. But surely we will learn later in next session about the php file and database structure of Instagram Photo, Video Like System. Here are two versions of this Instagram Like System, the secondary version (without jquery) is built in Very.Js