jQuery Twitter Like Follow and Unfollow | Lessoncup Programming Blog

Sunday, 29 December 2013

jQuery Twitter Like Follow and Unfollow

Hi, today i am going to tell you about Twitter like Follow and UN-Follow, we have seen in twitter at left side the follow and box appear and it is same concept of like Facebook displaying ads at right side i already posted that lesson and now i changed that script and developed same as twitter like follow app. i have used jquery, ajax and php to develop this app. let's see the process of how to implement this app.


HTML

just include the users.php file inside the UL tag, to display the users to make follow and unfollow the user.
<div class="lessoncup">

<ul><?php include('users.php');?></ul>

</div>

JAVASCRIPT

i just write five functions to implement this app. the first function i have wrote on Refresh button to refresh the users data while clicking on refresh button, next write click function to .followbutton as a selector and inside the function while clicking on follow button i just remove the twitter icon from follow button and changed the class and button text by using remove() method and addClass() methods.

now just take the ID value of clicked button and send the value to getusers.php file and just slowly hide the clicked record and replace the new record at same place by using replaceWith() method

later in next i write the mouseover function to change the follow button text to unfollow while over the mouse and one more function to while mouse out the function change the text unfollow to following and last function is to remove the user if you not like
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){

 
 $('body').on("click",".ref",function(){
  
  $('.lessoncup ul').load('users.php');
  
 });
 
 
 $('body').on("click",".follow",function(){
  
  var element = $(this);
  var fid = element.attr("id");
  
  $(this).remove('img').addClass('following').text('Following');
  
  var datasend = "followid="+fid;

  $.ajax({
   
   type:"POST",
   url:"getusers.php",
   data:datasend,
   cache:false,
   success:function(msg){
    
    $('#ad'+fid).delay(2000).fadeOut('slow',function(){
     
     $('#ad'+fid).replaceWith(msg);
     
    });
    
   }
   
   
  });
  
 });
 

$('body').on("mouseover",".following",function(){
  
  $(this).removeClass('follow').addClass('unfollow').text('Unfollow');
  
 });

 
 $('body').on("mouseout",".following",function(){
  
  $(this).removeClass('unfollow').text('Following');
  
 }); 


 $('body').on("click",".remove",function(){
  
  var element = $(this);
  var id = element.attr("id");
 
  $.ajax({
   
   type:"POST",
   url:"getusers.php",
   cache:false,
   success:function(msg){
    
    $('#ad'+id).fadeOut('slow',function(){
     
     $('#ad'+id).replaceWith(msg);
     
    });
    
   }
   
   
  });

 });
     
});


</script>

users.php

in this file just write the query and fetch the records inside the LI tag by using while loop and put the records limit to 3 and in top take refresh button to change the users data while clicking on this button, in the end take follow button to make the user to be follow the user
<li style=" background-color:#f9f9f9; color:#666; height:auto; padding:5px; font-size:14px;">Who to follow . <a class="ref">Refresh</a></li>
<?php
include('db.php');

extract($_REQUEST);

$news=mysql_query('select * from users order by rand() limit 3');

while($full=mysql_fetch_array($news)){

?>

<li id="ad<?php echo $full['nid']?>">

<div id="<?php echo $full['nid']?>" class="remove"></div>

<img src="icons/<?php echo $full['img']?>" align="top"  class="img"/>

<div><b><?php echo $full['news']?></b></div><br/>

<a id="<?php echo $full['nid']?>" class="follow"><img src="t.jpg" width="16" height="14" border="0" align="absmiddle" style="margin-right:3px;" />Follow</a>

</li>

<?php }?>

getusers.php

in this file i just write the query to update the users data while clicking on follow button i just requesting the value from via ajax and updating the record. and at the same time i just sending the new record to ajax response
<?php
include('db.php');

extract($_REQUEST);

mysql_query("update users set fid=1 where nid=$followid");

$news=mysql_query('select * from users order by rand() limit 1');

while($full=mysql_fetch_array($news)){
  
?>

<li id="ad<?php echo $full['nid']?>">

<div id="<?php echo $full['nid']?>" class="remove"></div>

<img src="icons/<?php echo $full['img']?>" align="top"  class="img"/>

<div><b><?php echo $full['news']?></b></div><br/>

<a id="<?php echo $full['nid']?>" class="follow"><img src="t.jpg" width="16" height="14" border="0" align="absmiddle" style="margin-right:3px;" />Follow</a>

</li>

<?php }?>

Live Demo   Download Script

9 comments :

  1. khasim bai where is database of this application

    ReplyDelete
    Replies
    1. it is simple database just need only one user table

      --
      -- Table structure for table `users`
      --

      CREATE TABLE IF NOT EXISTS `users` (
      `uid` int(11) NOT NULL AUTO_INCREMENT,
      `img` varchar(100) NOT NULL,
      `user` varchar(255) NOT NULL,
      `fid` int(11) NOT NULL,
      PRIMARY KEY (`uid`)
      ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

      --

      Delete
    2. where is the follow table??? or does it only need a user for your app to work

      Delete
    3. where is the follow table??? or does it only need a user for your app to work

      Delete
  2. Hi Mohammad Khasim can you help me ? I want to use this script but when i click the refresh button all users lost mustafaozturk.74@hotmail.com I think you are the good person for the help THANKS. I am waiting for your relpy

    ReplyDelete
  3. Replies
    1. See the above comments i have posted in comments

      Delete
    2. See the above comments i have posted in comments

      Delete
  4. Hi! how to hide a person who already has follow.

    ReplyDelete

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

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

Get my Latest Lessons