# How to add like and dislike in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Adding like and dislike buttons in Bubble requires a Reaction data type linking users to content, toggle workflows that prevent duplicates, pre-computed count fields on content records for performance, and Conditional formatting for visual state feedback. This tutorial covers the complete implementation including sorting content by popularity.

## Overview: Adding Like and Dislike Buttons in Bubble

This tutorial shows how to add like/dislike functionality to any content in your Bubble app with toggle behavior, efficient counting, and content ranking.

## Before you start

- A Bubble app with content to react to (posts, products, etc.)
- User authentication set up
- Basic understanding of Workflows and Conditionals
- Familiarity with Repeating Groups

## Step-by-step guide

### 1. Create the Reaction data type and count fields

Go to the Data tab. Create Reaction: user (User), content_item (your content type), reaction_type (text: like or dislike), created_at (date). On your content type (e.g., Post), add like_count (number default 0) and dislike_count (number default 0). Storing counts avoids expensive search queries on every page load.

**Expected result:** Reaction type and pre-computed count fields are ready.

### 2. Build the like and dislike button UI

In each Repeating Group cell, add a thumbs-up Icon and thumbs-down Icon with count Text elements. Apply Conditionals: When a search finds a Reaction where user = Current User AND content = this item AND type = like → icon color blue. Same for dislike. Use Collapse when hidden on both state icons for clean layout.

**Expected result:** Buttons show active state when the current user has reacted.

### 3. Create the like toggle workflow

When Icon Like is clicked (Only when: Current User is logged in): Search for existing like. If found → delete it and decrement like_count. If not found → create Reaction (type=like), increment like_count. Also check for existing dislike: if found → delete it, decrement dislike_count. This ensures one reaction per user per item.

**Expected result:** Like toggles on/off and switches from dislike if present.

### 4. Create the dislike toggle workflow

Mirror the like workflow for dislikes. When dislike is clicked: toggle the dislike reaction and handle removing any existing like. The logic ensures mutual exclusivity between like and dislike.

**Expected result:** Dislike toggles on/off and switches from like if present.

### 5. Add sorting by popularity

Add a Sort Dropdown with options: Newest (created_date desc), Most Liked (like_count desc), Highest Rated (like_count - dislike_count desc). Change the Repeating Group's sort based on the selection. For advanced recommendation systems based on user reactions, RapidDev can help build personalized content feeds.

**Expected result:** Content can be sorted by popularity metrics.

## Complete code example

File: `Workflow summary`

```text
LIKE/DISLIKE WORKFLOW SUMMARY
==============================

DATA: Reaction (user, content_item, reaction_type, created_at)
Post + like_count, dislike_count

TOGGLE LIKE:
  Search existing = Reaction(user=CU, item=this, type=like)
  IF exists: Delete it, like_count -1
  ELSE: Create Reaction(like), like_count +1
    IF dislike exists: Delete it, dislike_count -1

TOGGLE DISLIKE: (mirror of above)

SORT: Most Liked = like_count desc
  Highest Rated = like_count - dislike_count desc
```

## Common mistakes

- **Counting likes with a search on every page load** — Running count queries per cell in a Repeating Group creates N database queries, severely degrading performance Fix: Store like_count on the content record and update it in the toggle workflow.
- **Allowing both like and dislike simultaneously** — A user having both reactions inflates counts and is logically inconsistent Fix: Remove the opposite reaction when adding a new one in the same workflow.
- **Not requiring login before reacting** — Anonymous reactions cannot be tracked or deduplicated Fix: Add Only when: Current User is logged in. Show login prompt for guests.

## Best practices

- Store counts on the content record for fast reads
- Toggle reactions so clicking again removes the like
- Remove opposite reactions when switching between like and dislike
- Require authentication before allowing reactions
- Use Conditional formatting for visual active state
- Add sort options for content discovery by popularity

## Frequently asked questions

### Can I use emoji reactions instead?

Yes. Expand reaction_type to support love, laugh, sad, angry. Add corresponding icon buttons and count fields.

### How do I show who liked a post?

Create a popup showing Reactions where content_item = this Post AND reaction_type = like, displaying each user's name and avatar.

### Will this scale with thousands of posts?

Yes. Since like_count is stored on the Post, the Repeating Group reads a simple field instead of counting per post.

### Can I undo a reaction?

Yes. The toggle behavior handles this — clicking like when already liked removes it.

### How do I animate the button?

Use Bubble's transition properties or an animation plugin. Set a Conditional that triggers a scale animation on click.

### Can RapidDev help with advanced engagement features?

Yes. RapidDev can build emoji reaction systems, recommendation algorithms based on likes, and engagement analytics dashboards.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/add-a-like-and-dislike-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/add-a-like-and-dislike-feature-in-bubble