Setting "like" function similar to fb

Need help
1

Hello Bubblers,

I’m currently working on a project where I want to implement a “like” functionality similar to Facebook’s. When a user clicks the “like” button, I’ve got the workflow to handle the likes, but I’m struggling with changing the background color dynamically during the click.

Could anyone guide me on how to achieve thise? I’m using a conditional setup for the background color, but it’s not working as expected.

Thanks in advance for your help!

2

Dozens of threads about creating likes / favourites. The tldr is create a Like data type with a User field and a Thing field that is the Thing the User liked.

3

got it using custom states.thanks

4

Okay but it’ll break when the page is refreshed…

1 Like
5

no, it doesnt…

is there other way, just want to explore for learning purposes…

6

How are you using Custom States for Likes?

Custom states are not permanent data storage… they only persist until the page is refreshed (or navigated away from, or closed)… they can’t be used for permanent data, which is necessary for Likes…

Or do you mean something else by ‘Likes’ (i.e. just some temporary thing in your app?)

The correct way to deal with Likes is by storing them as objects in your database.

7

I’ve successfully implemented a feature to track and display the number of likes using field types in my Bubble database. However, I encountered a challenge with managing the background color based on likes. While custom states have helped me achieve the desired functionality, I’m curious if there are alternative methods for this even not efficient, just want to explore for learning purposes.

I’ve also wondered why Bubble doesn’t provide a straightforward feature to change the background color of an element and make it persist without resorting to custom states or ‘get data from page URL.’ It seems like a basic functionality that could simplify the development process. If there’s a simpler solution that I might have overlooked, I’d appreciate any insights or suggestions.

thanks

8

I’m not too sure I understand the question…

There’s no need to use custom states for this (and certainly not URL parameters)…

If the Current User has liked a particular thing, just change the background colour accordingly (or whatever it is you’re trying to do).

9

i try that in the condition but the background color just blink for seconds and return back to none. the new color doesnt stay

10

Then you’re obviously doing something wrong… but without knowing what you’re doing it’s impossible to guess what that might be…

Share some screenshots of your current set up if you want someone to take a look.

11

when the like button is pressed i set the condition to background color, the color just blink in seconds and gone. i need it to stay until i click it again or unlike
bubble

12

yeah the custom states is gone when i on/off my wifi

13

Well ‘pressed’ is the state of an element whilst the mouse button is being held down by the User… so it will only be true as long as they keep the mouse button pressed.

That’s not what you want here at all.

Your condition should be based on whether or not the User has liked the thing in question (which must be stored as an object in your database).

14

I’ve successfully implemented a like/unlike functionality where the number of likes increases when a user likes and decreases when they unlike. However, I’m currently facing a challenge in changing the background color dynamically based on the user’s interaction.

Specifically, I’m looking for a way to change the background color from ‘none’ to a flat color when a user likes the thing and vice versa.

15

Where are you storing the like?

16

in the database, it has field type under the product name(data type)

17

I’m not too sure what you mean by that…

But if you mean you have a list of Users on the Thing being liked, then ok… (it’s not the recommended appraoach, but it will do for now).

If that’s the case then all you need to use for your condition is this:

when This Thing's Likes Contains Current User and then set the background style/colour accordingly.

18

Try this:

Assume I have a “Product” thing that has a “Liked” field (of type Yes/No).

  1. Select the group that you want the color to change when “liked”.
  2. Set the color to the “unliked” state in the Property sheet on the “Appearance” tab.
  3. On the “Conditional” tab, use “+ Define another condition”, and in the When box, enter 's Liked is “yes”
  4. Change the value of the drop down “Select a property to change when true” to “Background style” to “Flat color”.
  5. Change the value of the drop down “Select a property to change when true” again to “Background color” to the color you want it filled with when the thing is liked.
  6. If the thing you are working with is an icon instead of a group, the “property tochange” will probably be “Icon color” instead of “Background color”.

can be accessed by assigning the thing to the parent of the group or at the Page level.

20

thanks it works!

21

This topic was automatically closed after 70 days. New replies are no longer allowed.