How to Add Functionality to a Like Button with Javascript

In this article, we're going to show how to add frontened functionality to a like button with Javascript.

Javascript is the frontend language of the web in terms of adding functionality to items on a web page that a user can see.

Javascript is heavily used on the web on pretty much all of the largest websites in the world.

Large websites such as google and youtube use Javascript heavily.

What do websites such as youtube use Javascript for?

Well, several things. One thing youtube uses Javascript for is to change the image of the like button for a video when a user likes a video.

If you go to youtube and go to a video page that you have never liked, you will see the following like button shown under the video below.

So you see the like button underneath.

Now after I click the like button, the like button changes to a lit up or brightened version of the previous image. This is shown below.

So you can see the difference between the button in the original unliked video and the liked video.

This is done with Javascript.

Javascript gives the frontend functionality so that the original like button gets converted to the clicked like button.

So let's now go into the Javascript code that allows this conversion.

Javascript Code for Like Button

So below is a video shown I put and underneath this video I have a like button.

So this is what we have.

Basically to have a like button on a site such as youtube or any other website, it looks simple, but there is a lot of functionality involved with it.

We're just dealing with the frontend in this code, but there's also a server-side aspect.

So we have an image that's basically acts a form element.

To this input element, we add the function, onclick="likevideo();"

What this line does is when the element is clicked, the likevideo() function is called.

The code in the likevideo() function is shown below.

<script> function likevideo() { document.getElementById("likebutton").src= "/images/Youtube-like-button-clicked.png"; } </script>

In this function, likevideo(), we get the HTML element with the id of likebutton and change the image to the clicked version when clicked.

This is just an extremely basic version of a like button with frontend functionality of a like button. Notice how you can't click the button again to unlike the video.

We will show how to do this soon.

Related Resources

How to Create Dynamic URLs in Django

How to Create a Video Uploader with Python in Django

How to Create an Image Uploader with Python in Django