# Implement like button(emojis like dislike, love) on each post

**URL:** <https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318>\
**Category:** Ask for Help\
**Created:** [April 13, 2025, 10:01pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318 "2025-04-13T22:01:01Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 13, 2025, 10:01pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/1 "2025-04-13T22:01:01Z")

</div>

l want to implement where users can like or dislike a post…  
And the number of like or dislike should be displayed on each post.

 ![mvp home](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/1/71af96701e384903ef7a3de525067e9a32b232de.png)

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 14, 2025, 8:27am UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/2 "2025-04-14T08:27:46Z")

</div>

You could create a custom collection, insert a button block to the custom collection, set the style to minimal or tiles, hide the labels, and associate an action to each button.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 14, 2025, 2:21pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/3 "2025-04-14T14:21:09Z")

</div>

In addition to what Nathan said, you should have a setup like this on the backend:

- Likes count (basic number column)
- Dislikes count (basic number column)
- Liked (user-specific boolean column)
- Disliked (user-speciifc boolean column)

**1/ No actions taken:**

- Initial state: Liked = false, Disliked = false

**Action: Click Likes**

- Increment Likes count by 1.
- Set Liked to true.
- (Transition to State 2: Liked)

**Action: Click Dislikes**

- Increment Dislikes count by 1.
- Set Disliked to true.
- (Transition to State 3: Disliked)

**2/ Currently Liked:**

Current state: Liked = true, Disliked = false

- **Action: Click Likes (again)** - This acts as an “unlike”.
- Decrement Likes count by 1.
- Set Liked to false.
- (Transition back to State 1: No actions taken)

**Action: Click Dislikes** - This switches the vote from like to dislike.

- Decrement Likes count by 1 (to remove the previous like).
- Increment Dislikes count by 1.
- Set Liked to false.
- Set Disliked to true.
- (Transition to State 3: Disliked)

**3/ Currently Disliked:**

- Current state: Liked = false, Disliked = true

**Action: Click Likes** - This switches the vote from dislike to like.

- Decrement Dislikes count by 1 (to remove the previous dislike).
- Increment Likes count by 1.
- Set Liked to true.
- Set Disliked to false.
- (Transition to State 2: Liked)

**Action: Click Dislikes (again)** - This acts as an “undislike”.

- Decrement Dislikes count by 1.
- Set Disliked to false.
- (Transition back to State 1: No actions taken)

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 1:48pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/4 "2025-04-19T13:48:15Z")

</div>

Thank you guys, you are the best… l implement on the four emojis(Like, fire, cool and love). The challenge is that a user can select more than a emoji which is not good enough.  
Is there any solution to go about this?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 19, 2025, 2:21pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/5 "2025-04-19T14:21:40Z")

</div>

Do you mean you want them to select more than one, or not? What component are you using?

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 2:23pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/6 "2025-04-19T14:23:58Z")

</div>

not more than one but they can always change their emoji…l’m using button block

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 19, 2025, 2:41pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/7 "2025-04-19T14:41:06Z")

</div>

Please connect this component to:

- A basic text that is called “jsonCount”
- A user-specific text called “currentReaction”.

 ![CleanShot 2025-04-19 at 21.40.56](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0eba1d804cc28bf7b5467b5844ccd79dea440462.png)

> **[ReactionButtons - Glide custom component](https://components.glide.info/share/commit::6077769f-5a24-426c-61ec-77c4389135fe)**
>
> Custom component created in Glide

Please note that this is very likely to be subjected to the race condition, i.e two people clicking the reaction component at once. That would still be a problem with the native approach before though.

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 3:16pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/8 "2025-04-19T15:16:16Z")

</div>

l love you bro…  
How did you do that?

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 3:41pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/9 "2025-04-19T15:41:12Z")

</div>

![emojihelp](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/f/3fe6c32967b4e8efb1a0e509e767511a1ea4c826.png)  
Next Challenge l’m trying to figure is how can l display the reactions here since it’s a component.

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 3:54pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/10 "2025-04-19T15:54:13Z")

</div>

l have figured it out using javascript.  
Thank you

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 19, 2025, 10:35pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/11 "2025-04-19T22:35:11Z")

</div>

Wouldn’t you want that component straight on a custom collection so people can react? Or is this another component where the emojis and their counts are read-only?

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 19, 2025, 10:52pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/12 "2025-04-19T22:52:01Z")

</div>

You should really add this to @John_Romano app : [https://ailibrary.glide.page](https://ailibrary.glide.page)

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 10:57pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/13 "2025-04-19T22:57:01Z")

</div>

tell me how l can add it straight on a custom collection so people can react…

l still have a long way to go on this glide app journey.

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [April 19, 2025, 10:58pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/14 "2025-04-19T22:58:17Z")

</div>

There is an issue, clicking a a second emoji is clearing the last one.

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 19, 2025, 10:59pm UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/15 "2025-04-19T22:59:38Z")

</div>

the idea was the user can not select than an emoji

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 20, 2025, 12:11am UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/16 "2025-04-20T00:11:35Z")

</div>

Add a custom collection to the table where you want users to react, and add this component to that collection’s list of components.

---

<div class="post-metadata">

**Author:** ![Teejay\_Oyeniran](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/teejay_oyeniran/32/61251_2.png) [@Teejay\_Oyeniran](https://community.glideapps.com/u/Teejay_Oyeniran)\
**Post date:** [April 23, 2025, 1:46am UTC](https://community.glideapps.com/t/implement-like-button-emojis-like-dislike-love-on-each-post/81318/18 "2025-04-23T01:46:15Z")

</div>

Thank you.
