Facebook new like system | Lessoncup Programming Blog

Saturday, 26 March 2016

Facebook new like system

Recently Facebook have introduced new like system with emotions, this is very good implement with Facebook developers, in previous version of like system we have chance to give like only but now we can express our opinion on user posts with few emotions and Facebook completely redesigned the like system, we can also implement the Facebook new like system using jquery, Facebook new like emotions lets see how to work on this concept


the system is simple before writing a code we must arrange it an order, mean in the above picture we have seen a bar with few emotions, to store all emotions take one DIV inside the div keep the all emotion pictures in list items along with title associated with picture see the bellow html code

HTML

<div id="layout">

<ul class="posts">
<li><h1>Mohammad Khasim</h1></li>
<li><span>Lessoncup Programming Blog
lessoncup programming blog, html, css, xml, javascript, dom, jQuery, php, sql, colors, tutorial, programming, development, training, learning,facebook
LESSONCUP.COM|BY MOHAMMAD KHASIM</span></li>
</ul>

<div id="like_bar">

<ul>
<li><div>like</div><img src="icons/likee.jpg" width="38" height="38" title="like"></li>
<li><div>love</div><img src="icons/love.jpg" width="38" height="38" title="love"></li>
<li><div>haha</div><img src="icons/haha.jpg" width="38" height="38" title="haha"></li>
<li><div>wow</div><img src="icons/wowo.jpg" width="38" height="38" title="wow"></li>
<li><div>sad</div><img src="icons/sad.jpg" width="38" height="38" title="sad"></li>
<li><div>angry</div><img src="icons/angry.jpg" width="38" height="38" title="angry"></li>
</ul>

</div>

<div id="like_but" style="cursor:pointer; text-transform:capitalize; width:80px;">
<ul class="likes">
<li><img src="icons/like.jpg" width="18" height="17" align="top"></li>
<li><span>Like</span></li>
</ul>
</div>

</div>

the next step is to write the code, now we must observe the system how it is working, the Facebook like system is completely associated with mouse events when we mouse over the Like button we show the #like_bar div which we stored the all Facebook emotions

after open the Facebook emotions div we can see few emotions, while mouse over the each emotion we display the title of emotions which we stored in the same #like_bar div,

now when we click the each emotion we need to replace the like symbole along with there name

in the bellow code use mouse over function to display the like_bar div using show() method, the next step is when you leave the like_bar div you just hide the Facebook emotions bar,  use mouse leave function to body tag

now when you click on the emotion just get the content of the clicked element using attr() method and store it in an variable later just replace the new content to old content uisng replaceWith() method, see the bellow code

jQuery

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 $('#like_but').mouseover(function(){
  
  $('#like_bar').show();
  
 });
 
 
 $('body').mouseleave(function(){
  
  $(this).find('#like_bar').fadeOut('slow');
  
 });
 
 
 
 $('#like_bar li').mouseover(function(){
  
  $(this).find('div').show();
  
 });
 
 
 
 $('#like_bar li').mouseout(function(){
  
  $(this).find('div').hide();
  
 });
 
 
 
 $('#like_bar img').click(function(){
  
  var img_name=$(this).attr('src');
  var img_title=$(this).attr('title');
  
  $('.likes li img').replaceWith( "<img src="+img_name+" width=18 height=17 align=top>" );
  $('.likes li span').text(img_title);
  
  $('#like_bar').fadeOut('slow');

  
 });


});
</script>


Live Demo   Download Script

1 comment :

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons