DEV Community

Cover image for How to add Like/Unlike button to your Django Blog
Radu-Alexandru B
Radu-Alexandru B

Posted on • Updated on • Originally published at

How to add Like/Unlike button to your Django Blog

In this mini-tutorial, we will add a Like/Unlike functionality to our Django Blog. As a note, we will implement this feature while using a class-based view for our BlogPost DetailView.

2nd NOTE: Unfortunately, we cannot avoid the page refresh after every click of Like/Unlike button. In order to skip the refresh, it is needed to implement the whole functionality of Like/Unlike button inside our blogpost-detail HTML, using Ajax.js. This mini-tutorial will not focus on this type of implementation.

Let's get started, first, in our we need to add to our BlogPost model the following fields:

from django.db import models
from django.contrib.auth.models import User

class BlogPost(models.Model):
    likes = models.ManyToManyField(User, related_name='blogpost_like')

    def number_of_likes(self):
        return self.likes.count()
Enter fullscreen mode Exit fullscreen mode

"likes" is a Many-to-many relationship with our User model, meaning that users (objects) can have multiple likes, and blog posts can have multiple likes. The function number_of_likes will return the number of likes of the current blog post object.

After every change in the file, we need to open our terminal and make the migrations to our database:

# CLI/Terminal
>> cd C:\Projects\...\YourDjangoAppMainFolder
>> python makemigrations
>> python migrate
Enter fullscreen mode Exit fullscreen mode

Let's now make a function-based view for our Like button functionality. In your file, right before (or after) your BlogPost DetailView class, define a BlogPostLike function:

from django.shortcuts import get_object_or_404
from django.http import HttpResponseRedirect
from django.urls import reverse

def BlogPostLike(request, pk):
    post = get_object_or_404(BlogPost, id=request.POST.get('blogpost_id'))
    if post.likes.filter(

    return HttpResponseRedirect(reverse('blogpost-detail', args=[str(pk)]))
Enter fullscreen mode Exit fullscreen mode

'blogpost_id' will be our button identification in our blogpost_detail.html. Every time a logged-in user clicks the Like button, we will retrieve his id and then will check if that user already liked or not the current blogpost (more specifically: if like from user x exists, then remove like from current blogpost, else, add like from user x to current blogpost). Then we will redirect the user to the same blogpost page (like a refresh of that page).

Now, it the same file, where we've implemented our BlogPost DetailView, we need to add to our get_context_data the following:

class BlogPostDetailView(DetailView):
    model = BlogPost
    # template_name = MainApp/BlogPost_detail.html
    # context_object_name = 'object'

    def get_context_data(self, **kwargs):
        data = super().get_context_data(**kwargs)

        likes_connected = get_object_or_404(BlogPost, id=self.kwargs['pk'])
        liked = False
        if likes_connected.likes.filter(
            liked = True
        data['number_of_likes'] = likes_connected.number_of_likes()
        data['post_is_liked'] = liked
        return data
Enter fullscreen mode Exit fullscreen mode

Within our get_context_data function, we will retrieve the current blogpost primary key, and we will check if the currently logged-in user has liked or not this blog post. We will store in a local variable this statement, to send it further as a context to our HTML-based blogpost_detail. We will also retrieve the number of likes (calling the earlier written function) in order to display the number of likes directly in our HTML template.

Let's also add this new function-based view to our

from django.urls import path
from .views import (

urlpatterns = [
    path('blogpost-like/<int:pk>', views.BlogPostLike, name="blogpost_like"),
Enter fullscreen mode Exit fullscreen mode

Finally, to our blogpost_detail.html let's write in the DjangoTemplateLanguage the following:

<!-- LIKES -->
{% if user.is_authenticated %}
  <form action="{% url 'blogpost_like' %}" method="POST">
    {% csrf_token %}

    {% if post_is_liked %}
    <button type="submit" name="blogpost_id" value="{{}}" class="btn btn-info">Unlike</button>
    {% else %}
    <button type="submit" name="blogpost_id" value="{{}}" class="btn btn-info">Like</button>
    {% endif %}
{% else %}
  <a class="btn btn-outline-info" href="{% url 'login' %}?next={{request.path}}">Log in to like this article!</a><br>
{% endif %}
<strong class="text-secondary">{{ number_of_likes }} Like{{ number_of_likes|pluralize }}</strong>
Enter fullscreen mode Exit fullscreen mode

And we are done!

Example of Like Button

Discussion (12)

mahfuzkhandaker profile image

Awesome post. But I have a question, how it will be made ajaxify?

radualexandrub profile image
Radu-Alexandru B Author

Yes... indeed a very good question that I currently don't have an answer to.

I had an intention to make a follow-up of this tutorial using Ajax, but I didn't make time for it... However, there are a very few tutorials on youtube on this matter, so I wish you the best if you will try to implement this feature. Unfortunately for me, I had to change my tech stack to match the jobs in my area.

Have a nice day!

mahfuzkhandaker profile image

Welcome. Please open the link

Sloan, the sloth mascot
Comment deleted
labpeng profile image

A great tutorial!

leandropaolo1 profile image

works great, good job Radu. You saved me a lot of time! Keep up the good work and good content creation

leandropaolo1 profile image

how would you add it to BlogPostListView(ListView)?

enesislam profile image

Excellent! How can I make it using AJAX? Thanks

nareshkanigiri profile image
Naresh Kanigiri

how to create rating

abelbanze profile image

Hello, I did exactly what the this tutorial show but I got this error:

Reverse for 'like_profile' with arguments '('',)' not found. 1 pattern(s) tried: ['accounts/like/(?P[0-9]+)/$']

tagnev profile image

you can log a ticket here some developers will help you out

sanni2712 profile image

How to I get all the posts that a user has liked?
please tell me as soon as possible! as I have a deadline for my project.