Framer Tutorial: Creating Like Counters Using a No-Code Database
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to add real like button component to your Framer website without any code. I'll show you how you can design a like button, set up a database, and then connect the two.
Project remix:
framer.university/resources/r...
0:00 - Introduction
0:23 - The roadmap
0:53 - Designing our like button
7:31 - Setting up a free no-code database
10:05 - Connecting the database to the like button
13:48 - Bonus like button design
17:05 - Closing thoughts & additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
This is great, thanks Nandi!
I could totally replicate the workings of this. I'm counting not pages but games however, so the ability to name each button is super useful because I have multiple on each page.
One thing is that the interface of Supabase has changed a little bit compared to what you show and I wasn't sure I'm doing it right. There is some wizard thing going on now, but anyway I could handle it. I've never heard of Supabase so thanks for that as well, it seems like I will be able to connect a bunch of other things to it as I scale my site.
I don't have the like counter in my assets how is that?
I’m doing a project with this right now!
Thanks for the support and for everything you do for the Framer community!
Love to hear it! Thanks for the kind words :)
First, thank you so much for this component and tutorial!
Secondly, I'd like to add this information for those who might be having the same problem I had:
If you are using the like button inside a card component that it is inside a list of cards, your like button will show the same amount for all of them. To fix that, open the like button component and in the "button_id" create a variable. Then, you change the id from 01 to a different number for each card you have.
I hope it helps!
Thanks William!
Yes this is a perfect solution to set unique IDs even if the component is within a component. :)
I didn't get the different number for each card. 01 on the first card, 001 on the second? Or 02? May I ask for enlightenment?
@@KaizenUI If you have 10 cards, after transforming the "button_id" in a variable, you start numbering each one by the order you want, like 1, 2,3,4,5... The goal is having each card within a card list with its own id, so the plugin interpret them separately.
@@willianmatiola Thanks, William.
This is such a powerful tool. Thank you so much for sharing!
My pleasure! :)
You are a Gift for framer community !
Appreciate your support :)
Thanks buddy! great tutorial
Glad it helped!
This is really powerful. Thanks.
Please could you do a tutorial or share a resource on how to search within a list, maybe a list of names.
Thanks!
What exactly you want to achieve and did you not find success with the built in search component from the insert panel?
@@framer.university for instance, on a page with a list of registered participants, I want to be able to search for and filter names through a search bar.
@@framer.university what I'm trying to achieve is pull data from database (e.g airtable or google sheets) into Framer CMS so I can be able to search the list directly in Framer
So helpful as always. Could this be used to save positions in a database? For example if I use the drag effect, move an element and then have that final position is stored in the db so the next visitor would see the change and could make their.
Maybe yes. But that would require a completely different code component
How would I turn it into a progress bar? I love the concept of live interaction but want to change the visual aspect of it
Thanks for sharing! If I use it on blog post via cms, do I need to change each button-id?
You only need to use unique IDs when adding multiple buttons to the same page on your site.
Remember, we created a "slug" column in the database. This means that even if you apply the same ID to two buttons on separate pages, they'll be counted individually.
In summary: it's quite easy to utilize the button on CMS detail pages. Just make sure to set unique IDs, particularly if you need a few more like buttons on the same CMS detail or any other page.
@@framer.university Got it! I really appreciate what you’ve done to our community by keep sharing fantastic resources!
Thanks so much for this awesome component, would love to implement it on my site. I have followed the directions to a tee but when I connect the component it doesn't display anything. I've tried reloading Framer/the project a few times. Do you have any other solutions to this issue? Thanks!!
Nice
thanks :)
Nandi, you should have a tutorial teaching how to build a multilingual website without using the locale feature. At $40 a month is daylight robbery. There must be another to do this without breaking the bank., like build pages with a different language with translation from ChatGPT, and then building the links on the menu bar
What’s $40?
Incredible powerfull component, Thanks a lot!
I have a problem that I don't know why it happens. If I press the button on one device, turns to "Liked" variant with number 1, but when I go to press this button with another device, the button appears as "Liked" and it doesn't stack the likes, it turns to "Default" variant with 0 likes. The columns on Supabase are added correctly and also the URL and Keys. The component have the Default variant and Liked variant and the Number Text with the Amount Variable. I don't know how to fix it :(
It has spam protection so users from the same ip address can only like 1x on a button.
Ask your friends to check and like it.
🔥🔥🔥
Hello, currently I'm working on spin the wheel project for my ecommerce. The concept is customer could redeem voucher so they can spin the wheel and get the rewards.
My question is how can I custom code and integrate with my API and database for the customers data and rewards?
Or is there any simple way to achieve this in framer? Because I like the way framer handle all the animation. Thank you
You can do this by writing a code component with React Typescript.
How did you code the thing to use components?
Hey Nandi, can you make a tutorial on how to setup authentication with supabase, for a membership site with gated content?
for that I'd use something like Outseta: www.outseta.com/guides/how-to-build-a-membership-site-with-outseta-framer
or FramerAuth: framerauth.com/
Hi Nandi. How does this work with cms pages. Will you need to create multiple tables on supabase for each CMS pages?
No. You just place the button on the CMS detail pages and they will count separately.
@@framer.university awesome. Thanks
I don't have the like counter component in my asset. How should i do the next part?
Copy the comp to your project.
Thanks for the video. One question, please. At 12:40, the counter shows 1. If you click it again, I believe it will become 2. So, one user can make multiple likes. Would it be possible to set up so that one user can make only 1 like?
One user can only make one likes, don’t worry.
hello? I'm using your components very well. I copied this component and completed setting it up with supabase, but I found a problem and would like to contact you.
I inserted the component within the cms page and it is visible on tablets, smartphones, and laptops. However, on a desktop connected via LAN cable, the components below do not appear and nothing is displayed. The example homepage or remix file you uploaded does not appear only on the desktop connected via LAN. I don't think it's a problem with my account. I think there may be a problem with the component settings themselves or with supabase settings. Is there any solution?
Can you send a preview or remix link?
Such a great video, but on the websites, the count doesn't really work, when I click on one website the count goes up, but on a different website, when I click the count goes down instead of going up and it's the liked variant instead of the default variant. Does anyone have a solution?
You have unique button ID for each button comp?
is there any database of any shopping platform to do a e-commerce shop with a shopping cart?
You can integrate lemomsqueezy checkout or use Shopify with framercommerce.com
Will this work for CMS Blog pages?
Yes.
I had a problem when i click the like button, the count increases but the color and word changes to liked is not working why..?
1. I used the remix website you provided to add a CMS and insert a like button into it. Then I directly published the website and tested the results.
2. The like button updates synchronously when previewing the website.
3. However, after updating the website and clicking on the live site, the like button does not synchronize across different pages with the same CMS.
Can you advise me on what to do next? 😭😭😭
Buttons will count separately on each page.
Sorry, I already found the problem, I think it's some kind of bug.
When I connect the button, it immediately doesn't appear, I have to disconnect and connect again for it to appear.
I did this and it worked.
I’m glad it works now. You can also try reloading the project in these cases.
Hey, I hate to be a heel, but I believe it's stopped working. The connection to the database still works great but the counter and variant are no longer changing.
Any suggestions please?
Pls try going to assets panel and click the update button next to the Like Counter component.
Framer made an update that broke the comp.
Should be fixed.
@@framer.university This is why you’re the best! Thanks so much!
@@framer.university Thank you so much! That worked!
Hi, i have tried and i have some problems.
I set the table in Supabase and copy the URL, Key, Table, choose my component and set the ID. But the button is not showing up. I have tried with your component but not work at all.
The button only come visible when i connect with your button component and reconnect in my button component. :s
Try reloading the project if this happens.
i am not able to find the like counter in the assets plz help
framer.university/resources/real-like-button-component-for-framer
Here it is!
When I leave the remix link here, my comment keeps getting deleted. Can I have your email address?
However, when the site below provided by Framer University is connected via LAN cable, only a black screen and remix and copy components are displayed, and the components are not visible. If I connect your laptop to Wi-Fi in the same place, I can see like buttons.
This is the first tutorial that didn't work for me from your channel. I published the website, and tried to click on the button, but the cursor doesn't appear, just a text cursor.
Can you send the link to the site? Maybe also a remix link?
@@framer.university Mine stopped working. It worked yesterday...but now neither the counter nor the variant change. I appreciate this tool, I just want to say that. I'm totally grateful for the free resources.
I always wonder why meningful video had less viewrs,.
I also wonder. Gotta keep pushing and improving.
To be completely honest it’s hard to grasp the logic in appeal as I’m simply using someone else’s custom code to avoid coding but costing me still complex (indirect native mimicking via signing up for yet another external product just to accomplish a single task that will guarantee only harm to the perception of the designer). Social cues are not only subjectively ranked in societal classes but also heavily linked to negative emotional tiggers of the associated person. In other words, making a single number go up once looks like a lot of effort to beg for acceptance using passive social influence as a bragging right.
Be my guest, but maybe do this with an emote or something relevant to a story being told l ;)
Do you have discord? If yes than I want to join
I don’t have discord.