Saturday, July 7, 2012

Simple Twitter like Follow button System using Php and jQuery

Twitter has been connecting millions of people by its Follow button. Not only Twitter, but almost every social network has got there own Follow buttons (may be, named differently), Even blogs like Mashable has introduced this recently into their website. Hence we can see, that how useful this small button is.

Today we will be accomplishing this, with some simple codes, using Php, Javascript, jquery and Ajax.
Do not worry if you are not a pro in these languages because neither am I one. We will use some very basic concepts for doing this.



Download the Script



Below is a summary of the script, what we have done and how you can very easily accomplish it on your platform.

Database Design

 Users Table: 

CREATE TABLE users(                                                  
uid INT PRIMARY KEY AUTO_INCREMENT,                                  
name VARCHAR(50),                                                 
image VARCHAR(1000));                                             


 Follow_user Table :  Storing user ids

CREATE TABLE follow_user(                                                  
fid INT PRIMARY KEY AUTO_INCREMENT,                                  
user_id INT,                                                 
uid_fk INT,
PRIMARY KEY (uid_fk),
);

Adding data to Database

You can either add data yourself into the users table, we will advice you to add 3 rows to the table with uid as 1,2,3 and names and image. Or else you can just copy the query in data.sql(enclosed in the zip folder of script) into your MySql query browser.


  db.php  

In db.php you must change the SERVER_NAME, USERNAME, PASSWORD and DATABASE to your own MySql settings.
<?php

define('DB_SERVER', 'SERVER_NAME');
define('DB_USERNAME', 'USERNAME');
define('DB_PASSWORD', 'PASSWORD');
define('DB_DATABASE', 'DATABASE');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());

?>


  Index.php  

This contains the code to display the list of users, with Follow buttons, we have used Twitter's Bootstrap CS to style the buttons similar to twitter buttons. When Follow $(".follow").click(function(){} ] is clicked, javascript (follow.js) is triggered , and we have used element.attr("id") to POST $userid to javascript. 

<?php

//fetching data of users from table to display

$command=mysql_query("SELECT * from users");
while($data=mysql_fetch_row('$command'))
{
$userid=$data[0];
?>
<div class="box">
<div class="picture"><img src="<?php echo $data[2];?>"></div>
<div class="user_data">

<div class="follow_box">
<?php

//checking whether current user follows them or not

$follow_check="select * from follow_user WHERE uid_fk='$uid' and user_id='$userid' ";
$user_sql=mysql_query($follow_check);
$count=mysql_num_rows($user_sql);
if($count==0)
{
echo "<div id='follow$userid'><a href='' class='follow' id='$userid'><span class='btn'style='width:70px;'><b> Follow </b></span></a></div>";

echo"<div id='remove$userid' style='display:none'><a href='#' class='remove' id='$userid'><span class='btn btn-info' style='width:70px;'><b> Following </b></span></a></div<";
}
else
{
echo "<div id='follow$userid' style='display:none'><a href='' class='follow' id='$userid'><span class='btn'style='width:70px;'><b> Follow </b></span></a></div>";

echo"<div id='remove$userid'><a href='#' class='remove' id='$userid'><span class='btn btn-info' style='width:70px;'><b> Following </b></span></a></div<";
}
?>
</div>
<div><b><?php echo $data[1];?></b></div>
</div>
</div>
<?php
}
?>

In the above line of coding initially we have called the list of user from the database, and then we have checked into the follow_user table , to check whether the current user already follows the respective users or not, and as per that the Follow or Following buttons are displayed.


We have give the basic CSS styling to the interface in the script, while you can change it as per your requirements.

  Follow.js  

This contains the javascript to collect user id from the Follow/Following button and post it to add_follow_user.php/remove_follow_user.php. It also hides the button which is being clicked and displays the other one.

// follow class
$(function() {
$(".follow").click(function()
{
var user_id = $(this).attr("id");
var datastring = 'user_id='+ user_id ;
 $.ajax({
   type: "POST",
   url: "add_follow_user.php",
   data: datastring,
   success: function(html){}
 });
    $("#follow"+user_id).hide();
    $("#remove"+user_id).show();
    return false;
});
});

//remove class
$(function() 
{
$(".remove").click(function()
{
var user_id = $(this).attr("id");
var datastring = 'user_id='+ user_id ;
 $.ajax({
   type: "POST",
   url: "remove_follow_user.php",
   data: datastring,
   success: function(html){}
 });
   $("#remove"+user_id).hide();
   $("#follow"+user_id).show();
    return false;
});
});


Rest the add_follow_user.php and remove_follow_user.php are just used to collect data from the POST, and INSERT into the sql table using mysql queries.

If you face any kind of problem in implementing this tutorial, do share your problem in comments, and I will try my best to help you out. We love to help you.

20 comments:

  1. Great share friend. I have read all your post here and found it interesting to read. In fact i was able to take note all of the valuable information i was gathered. Thanks

    ReplyDelete
  2. Thanks for your share. Love it D:

    ReplyDelete
  3. how to hide follow and remove follow when viewing my own userid?

    ReplyDelete
    Replies
    1. Then you will have to compare the session ID with the userID, if they match, that means you are the user, and for else condition include the Follow and Unfollow buttons.

      Delete
    2. can you show me that condition in javascript?
      i already install the script but it cant view the image, only the username

      Delete
    3. dude, please help mee.. can you give me the condition and the image doesn't show.. only the username shows

      Delete
  4. thanks good share.

    but, i have problem. var datastring can't send the value to the url. why is it?

    ReplyDelete
  5. Thanks, following for login requirement??
    (I'm sorry for my english)

    ReplyDelete
  6. Sir, how could change follow and remove follow when my profile was viewed. Change it as "YOU"

    ReplyDelete
  7. Dudde, is this right? Hope your response soon

    If($count==1)
    {
    Echo"You";
    }
    Else if($count==0)
    {
    echo "Follow";

    echo"Following";
    }
    else
    {
    echo "etc.....

    ReplyDelete
    Replies
    1. The code is fine but that depends on what $count is for. You simply need to check that whether the session id and the userid matches.

      Here "sessionid" is the ID of the current logged in user, and "userid" is the ID of the user for which the Follow/UnFollow button is there.

      If the ID matches, then display "YOU",
      else display the "Follow/UnFollow" button.

      Delete
    2. What should I do sir, can you teachh me a little of tutorial? I hope you will just like the name of your web TUTS.wtfdiary. just a little tutoorial..

      Delete
    3. You said sir "WE LOVE TO HELP YOU"

      If you face any kind of problem in implementing this tutorial, do share your problem in comments, and I will try my best to help you out. We love to help you.

      You said that message Sir, look above on the first first comment, above the image og google + and your name, I hope you help me

      Delete
    4. Its difficult to explain here in comment, but i will take out some time to create a script and will mail you the script by tommorow evening. I hope thats fine.

      Delete
    5. Thank you sir, tuts.wtfdiary is very helpful, ok sir I will wait for it tomorrow evening, just mail me at nickrezza_0427@yahoo.com.. thank you sir.

      Delete
  8. hello sir, send me also the script.

    ReplyDelete
  9. dude, how will know if user loggin is the same as user's id and it ecgo as 'you'
    thannks, i hoping you will response ASAP

    ReplyDelete
  10. i've already solve the problem with this script and i made more expansion. thanks for not helping

    ReplyDelete
  11. hi please help when i m trying to add follow_user table i m getting this error
    #1068 - Multiple primary key defined
    whats wrong?

    ReplyDelete
  12. it worked fine and i started following my friend, and when i checked follow_user table in my db, user_id is 2 which is id of my friend i am following but uid_fk is 0, i think it should be 1 i.e, my id

    ReplyDelete