This post will updated exactly Twitter style Follow and Unfollow buttons with jQuery and Ajax with fadeOut and fadeIn effect.
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.
jQuery Code
Make sure you have include the latest jquery file in your code before using this code, because if you have not include jquery file, it will not work.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"> </script> <script type="text/javascript" > $(function() { $(".follow").click(function(){ var element = $(this); var I = element.attr("id"); var info = 'id=' + I; $("#loading").html('<img src="loader.gif" >'); $.ajax({ type: "POST", url: "follow.php", data: info, success: function(){ $("#loading").ajaxComplete(function(){}).slideUp(); $('#follow'+I).fadeOut(200).hide(); $('#unfollow'+I).fadeIn(200).show(); } }); return false; }); }); </script> <script type="text/javascript" > $(function() { $(".unfollow").click(function(){ var element = $(this); var I = element.attr("id"); var info = 'id=' + I; $("#loading").html('<img src="loader.gif" >'); $.ajax({ type: "POST", url: "unfollow.php", data: info, success: function(){ $("#loading").ajaxComplete(function(){}).slideUp(); $('#unfollow'+I).fadeOut(200).hide(); $('#follow'+I).fadeIn(200).show(); } }); return false; }); }); </script> |
Html & PHP code
Bellow is the simple and easy code of HTML and PHP. Please a twitter-follow.php page and copy bellow code snippets & paste and save your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php $sql=mysql_query("Some SQL Statement"); while($row=mysql_fetch_array($sql)) { $id=$row["user_id"]; ?> <div id="follow<?php echo $id;?>"> <a href="#" class="follow" id="<?php echo $id;?>"> <span class="follow_b"> Follow </span></a> </div> <div id="remove<?php echo $id;?>" style="display:none"> You Following <a href="#" class="remove" id="<?php echo $id;?>"> <span class="remove_b"> remove </span></a> </div> <?php } ?> |
You can download the complete code from bellow link.
Please don’t forget to subscribe our newsletter or join us on Facebook to be the first to learn the next great thing from freewebmentor.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: Ajax, follow twitter, follow twitter php script, follow twitter script, Jquery, jquery follow twitter
