{"id":527,"date":"2017-03-24T16:11:57","date_gmt":"2017-03-24T16:11:57","guid":{"rendered":"http:\/\/www.infotheme.in\/blog\/?p=527"},"modified":"2017-03-24T16:11:57","modified_gmt":"2017-03-24T16:11:57","slug":"make-instagram-like-system-programming","status":"publish","type":"post","link":"https:\/\/infotheme.net\/blog\/make-instagram-like-system-programming\/","title":{"rendered":"How to Make Instagram Style Like System using HTML, CSS, JS"},"content":{"rendered":"

Hey! guys \u201cDo you want to know How<\/a> Instagram Photo & Video Like System Works<\/strong>\u201d. 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<\/strong>. Here i am trying to make a Instagram style photo like system<\/strong>. Instagram\u2019s like system is much better then other social networking sites.<\/p>\n

If you want to see demo before learning about code section of Instagram Like system, then follow below links:<\/p>\n

[BUTTON url=”http:\/\/www.infotheme.in\/blog\/demo\/php\/instagram-style-like-system”]See Live Demo (jQuery)[\/BUTTON]<\/p>\n

[BUTTON url=”http:\/\/www.infotheme.in\/blog\/demo\/php\/instagram-style-like-system\/without-jquery.php”]Live Demo\u00a0(without jQuery)[\/BUTTON]<\/p>\n

[BUTTON url=”http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2017\/03\/Instagram-Style-Like-System.zip”]Download Code[\/BUTTON]<\/p>\n

Instagram Style Photo Like System Using Jquery, PHP<\/h2>\n

Step 1:\u00a0<\/strong>Here i have created an index.php file, here\u00a0you can see html code, so first you have to create a html code.<\/p>\n

\r\n<div class="feed">\r\n<div class="feed_img">\r\n<img src="assets\/demo.jpg" alt="instagram photo system"\/>\r\n<a href="javascript:void(0);" class="feed_img_wrapper like_icon">Like This<\/a>\r\n<\/div>\r\n<div class="like_count"><span class="my_likes_count">1100<\/span> Likes<\/div>\r\n<div class="feed_tool">\r\n<a href="javascript:void(0);" class="feed_icon dislike fav_btn">Like This<\/a>\r\n<\/div>\r\n<\/div>\r\n <\/pre>\n
In this html code i have created a single post \/ feed similar to instagram. Below you can see image\u00a0preview of it:<\/p>\n
\"How
How to Make Instagram Style Photo Video Like System<\/figcaption><\/figure>\n
Step 2:<\/strong>
\nAs we know instagram<\/a><\/strong>\u00a0like 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<\/strong><\/span>.<\/p>\n
\r\n<script>\r\n$(document).ready(function(){\r\nfunction i_like_it(act)\r\n{\r\nif((act == true)){\r\n \r\nvar like = $('.my_likes_count').text();\r\nlike = parseInt(like) + 1;\r\n$('.my_likes_count').text(like);\r\n\/\/make ajax call and add +1 like to database if true\r\n \r\n}else{\r\n\/\/make ajax call and remove 1 like from database if true\r\n \r\nvar like = $('.my_likes_count').text();\r\nlike = parseInt(like) - 1;\r\n$('.my_likes_count').text(like);\r\n}\r\n}\r\n \r\n$('.feed_img img').on('click',function(){\r\nif(!($(".fav_btn").hasClass("like"))){\r\n$('.feed_img_wrapper').fadeIn('slow');\r\n$('.fav_btn').addClass('like');\r\nsetTimeout(function(){\r\n$('.feed_img_wrapper').fadeOut('slow');\r\n},1000);\r\n\/\/Save Like To DataBase\r\ni_like_it(true);\r\n}});\r\n \r\n$('.fav_btn').on('click',function(){\r\nif(!($(this).hasClass("like"))){\r\n\/\/Save Like To DataBase\r\n$(this).toggleClass('like');\r\ni_like_it(true);\r\n}else{\r\n$(this).toggleClass('like');\r\ni_like_it(false);\r\n}\r\n});\r\n});\r\n<\/script>\r\n<\/pre>\n
In this code i have created a custom function with a boolean parameter. If boolean is equal to false<\/strong> means unlike<\/strong> or if boolean is equal to true<\/strong> means like<\/strong>.<\/p>\n
So\u00a0now 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.\u00a0For now we have to move with a css file, yeah! we need to create a css file , named \u201cstyle.css \/ insta_like.css\u201d And include it to head or <head> section of html\u00a0file.<\/p>\n
<\/pre>\r\ndiv.feed_img img{\r\nbackground: #EEE;\r\nwidth:100%;\r\ncursor:pointer;\r\n}\r\n\r\ndiv.feed{\r\nmax-width: 400px;\r\nmargin: 10px auto;\r\ndisplay: block;\r\nborder:1px solid #ccc;\r\npadding:10px;\r\nbackground:#eee;\r\n}\r\n\r\ndiv.feed_img\r\n{\r\noverflow: hidden;\r\nleft: 0;\r\ntop: 0;\r\nbottom: 0;\r\nposition: relative;\r\n}\r\n\r\n.like_count\r\n{\r\ndisplay: block;\r\nfont-size: 15px;\r\nfont-family: arial;\r\nfont-weight: bold;\r\ncolor: #aaa;\r\npadding: 5px;\r\nbackground: #fff;\r\nborder:1px solid #ccc;\r\nborder-bottom:0;\r\n}\r\n\r\n.feed_img_wrapper\r\n{\r\ndisplay:none;\r\nposition: absolute;\r\nwidth: 100%;\r\nheight: 100%;\r\nbottom: 0;\r\nleft: 0;\r\nright: 0;\r\ntop: 0;\r\ntext-align: center;\r\nfont-size:0;\r\n}\r\n.like_icon\r\n{\r\n\r\nbackground:transparent url('heart-1.png')no-repeat center;\r\n}\r\n\r\n.feed_tool\r\n{\r\nbackground: #fff;\r\npadding: 5px;\r\nborder: 1px solid #ccc;\r\nfont-size: 0;\r\n}\r\n\r\n.feed_icon\r\n{\r\ndisplay: inline-block;\r\nwidth: 32px;\r\nheight: 32px;\r\n}\r\n\r\n.dislike\r\n{\r\nbackground: transparent url('heart-dislike32x.png')no-repeat center;\r\n}\r\n\r\n.like\r\n{\r\nbackground: transparent url('heart-like32x.png')no-repeat center;\r\n}\r\n<pre><\/pre>\n
Using this css you can see a perfect look of post \/ feed. Which will look similar to instagram\u2019s feed \/ post<\/strong>. The like system<\/strong> also include a php file to handle the like request over serve<\/strong>r. But surely we will learn later in next session about the php file and database structure of Instagram Photo, Video Like System<\/strong>. \u00a0Here are two versions of this Instagram Like System, the secondary version (without jquery) is built in\u00a0Very.Js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey! guys \u201cDo you want to know How Instagram Photo & Video Like System Works\u201d. As you know we all using Instagram, and hope you […] Read More<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":528,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[135,138],"tags":[204,205,206,207],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/527"}],"collection":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/comments?post=527"}],"version-history":[{"count":0,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/527\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media?parent=527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/categories?post=527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/tags?post=527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}