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.
Prerequisites
- 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
Create the Reaction data type and count fields
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.
Build the like and dislike button UI
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.
Create the like toggle workflow
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.
Create the dislike toggle workflow
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.
Add sorting by popularity
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 working example
1LIKE/DISLIKE WORKFLOW SUMMARY2==============================34DATA: Reaction (user, content_item, reaction_type, created_at)5Post + like_count, dislike_count67TOGGLE LIKE:8 Search existing = Reaction(user=CU, item=this, type=like)9 IF exists: Delete it, like_count -110 ELSE: Create Reaction(like), like_count +111 IF dislike exists: Delete it, dislike_count -11213TOGGLE DISLIKE: (mirror of above)1415SORT: Most Liked = like_count desc16 Highest Rated = like_count - dislike_count descCommon mistakes when adding like and dislike in Bubble
Why it's a problem: Counting likes with a search on every page load
How to avoid: Store like_count on the content record and update it in the toggle workflow.
Why it's a problem: Allowing both like and dislike simultaneously
How to avoid: Remove the opposite reaction when adding a new one in the same workflow.
Why it's a problem: Not requiring login before reacting
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need like and dislike buttons for posts in my Bubble.io app with toggle behavior, duplicate prevention, stored counts, and sorting by popularity. How do I build this?
Add like and dislike buttons to posts in my app with toggle behavior, stored count fields, visual active states, and the ability to sort by most liked.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation