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

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.

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.

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)
3 Likes

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?

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

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

Please connect this component to:

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

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.

2 Likes

l love you bro…
How did you do that?

1 Like


Next Challenge l’m trying to figure is how can l display the reactions here since it’s a component.

l have figured it out using javascript.
Thank you

1 Like

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?

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

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.

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

the idea was the user can not select than an emoji

1 Like

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

1 Like

Thank you.

1 Like