Create button like twitter follow

Create button like twitter follow

Twitter implements a very good interface. Social networking first started to grow with Twitter. People loved the concept short tweets of 140 characters each. In fact, they still love Twitter and the latter is still one of the leaders of Internet socialization and marketing.

Twitter has a very interesting feature – the follow button. Facebook later implemented something similar to this and then other platforms followed. This button has a very trendy approach of connecting with new friends and people. One click and you are following the person.

Often you would want to implement a similar button in your website as well, wherein you have a button that does a job on click and again cancels it on another click. Interesting? Well, yes it is and so I have dedicated this write-up to create a button like twitter follow.
Initial steps to create a button like twitter follow

What we plan to do is have a button for every individual record. Just like each user finds a button beside unknown connections in Twitter, we shall provide a button. This button will allow us to add a user to our friend list instantly. Once we click, the person gets added.

Another feature that this button has is that when you are already following someone, this button displays the option of removing the connection. So, when you click on it the connection is terminated and that user becomes a stranger again. All of these in just a click of the button like twitter follow, without any page reload or navigation.

We shall implement the same idea and create a similar button like twitter follow. We have a demo data wherein we create four simple follow buttons for four different records. Any change in status of the follow shall be updated in a panel under these records.

We have not included the HTML here. However you can get the full code from the source files.

We have included two classes for each list item. The “follow” class is used to define the changing styles and the “button” class is used to track the clicks. The idea is to track the clicks and check the current status of the button by using its “value” attributes.

Core concepts of creating a button like twitter follow

When we have a “follow” value – if the button is clicked then that means we need to update the database with a follow yes status and show the unfollow button. Also, vive-versa when the value is “unfollow”.

So, using JQuery we track the button’s click function. When the button like twitter follow is clicked, we use AJAX post method to send the data to the database for updates. Through the post method we send two values – the status and the id of the record which was clicked.

Here we need the value for updating the respective status accordingly. The id value is needed because we need to know which id’s status must be changed. Accordingly the database is updated and a confirmation is displayed.

The display part is kept inside the callback function. So, whenever a successful update is made to the database from the button like twitter follow, the panel below shows the new status of the user’s follow.

$(document).ready(function(){
            $(".button").click(function(){
                var thiss = $(this);
                var value = thiss.attr("value");
                var id = thiss.attr("id");

                $.post("update.php", {value:value,id:id}, function(data){
                if(thiss.hasClass("follow")){  
                   thiss.removeClass("follow");
                   thiss.addClass("nofollow");
                   thiss.attr("value","Unfollow");                      
                }
                else{
                   thiss.removeClass("nofollow");
                   thiss.addClass("follow");
                   thiss.attr("value","Follow");
                }    
                $("#bottom").prepend(data);
                });             
            });
        });

Facebook also implements similar kinds of buttons. For example, the Facebook “like” button is similar to this. There are several other hundreds of websites who incorporate this idea.

The most useful feature that this button has is that you can control multiple record data together from a single page without navigating each time for each individual record.

Scope of a button like twitter follow in web development

Web development projects require several varieties of work and functionalities. The button that we just created can be implemented in several places. Suppose you create an online library system or a music store and you need an “add to favorites” button – this can be a very good choice. You can instantly add your favorites and that too for multiple books or songs all at the same place.

Even in e-commerce websites, you can add these buttons beside store items. Users can instantly add or remove items to the cart from anywhere in the website.

So, just buckle up and try it for yourself. Do let me know what you did and how good it was.

Comments are closed.