How to develop a like button?

Ask the community
, ,
1

Hi,

i want to develop like count system that means when anyone clicked the button it liked the content once with showing the no. of how many people liked it on a dynamic page & all likes count will be stored in a database for every item.
Like this: " :heart: 5 Likes "

For ex: Facebook Like buttons works

If it is possible can you provide the code & instructions

#like #count #dynamicpage

1 Like
2

Is it on repeater?

3

Anyway if it’s just a simple dynamic page you can do it like this:
See example: https://jonatandor35.wixsite.com/test/like/2

Code:
Front-end:

//elements: 1. dynamicDataset; 2. likeButton; 3. likesText (connected to likes field in the dataset)
import wixData from 'wix-data';
$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
 let item = $w("#dynamicDataset").getCurrentItem();
        $w("#likeButton").onClick((event) => {
            $w("#likesText").text = (Number($w("#likesText").text) + 1).toString();
            item.likesUpdate = true;
            wixData.update("collectioName", item).then(() => { $w("#dynamicDataset").refresh();})
        })
    })
});

backend/data.js:

import wixData from 'wix-data';//at the top of the entire code

export function collectioName_beforeUpdate(item, context) {
 if(item.likesUpdate){
 return wixData.get(context.collectionName, item._id, {"suppressHooks": true})
        .then(itemToUpdate => {
            itemToUpdate.likes ? itemToUpdate.likes += 1 : itemToUpdate.likes = 1;
 return itemToUpdate;
        })
    }
 return item;
}

(replace the text in red by your real collection name)

4

Thank you for the code but i want that website visitors can only like ones it’s work like increment that means one user can click more than one.

5

So first you have to decide how to recognize a visitor.

  1. by saving data to the browser cache (limitations: the user can clean up the cache/use a different browser or device).
  2. by saving the member data to the DB (limitations: it’s only relevant to logged-in members).
  3. a combination of 1 and 2. If it’s a logged in member, use the DB info, else use the cache info.

And the code depends on your decision.

6

@jonatandor35 Thank you, so i have to set this filters in the dataset? Like
if (owners is login user)
but how to do for cache i hope i understand right?, if not please let me know

& when i like the content repeater item it is showing NaN & on the place of collection name i’m assigning the database name is that correct?

7

@thbewise Yo don’t have to filter the dataset.
Iff you want to save data in the user browser cache, you should the wix-storage:
https://www.wix.com/corvid/reference/wix-storage.html#local
Once the user clicked the Like button, you shopuld do 2 things:

  1. disable the like button, so the user won’t be able to click it again.
  2. save to the local storage the item id and the status (alreadyClicked)

On this dynamic page, get the data from the local cache and if it’s alreadyClicked then disable the like button.

8

@jonatandor35 Thank you for your help

9

@thbewise you’re welcom. Good luck

10

@jonatandor35

Hi JD , your contribution is brilliant, but I have a problem with my likes button. I applied your code on my repeater, the problems are; (1) When I click the like button, each container on the repeater that represents different individual profiles are all influenced by the click and adds to their total likes. I would prefer if it only adds and stores on a specific individual profile or container.(2) I want only logged-in users to be able to click the like button or it it will give the prompt"to only logged-in users".(3)I also want a logged in user to only like a profile once then the button is disabled for that specific logged in user, if the logged-in user clicks again on the button it removes the added like and the button becomes enabled again. Generally this is typically what would be found on facebook or how the like button on this platform works. This is the webpage in question https://chidiejike.wixsite.com/britefruit/send-a-britefruit-to-school . Please I hope you could make out time to assist. Regards

11

@chidiejike

  1. For repeater you’ll need to adjust the code using repeater.onItemReady(): https://www.wix.com/corvid/reference/$w.Repeater.html#onItemReady

  2. So first check if the user is logged in and use an “if” condition to run diffrent codes: https://www.wix.com/corvid/reference/wix-users.html#currentUser

  3. So you’ll have to store the user-itemClicks in your database, retrieve the data every time the user gets into the page and hide the “like” button if it’s already been clicked.

12

@jonatandor35 Thanks for the response, but I think this is just unnecessarily to much just to implement something as common as a like button on Wix. Wix should have a single complete code for a basic like button. It is not going to push people to engage a Wix partner but will push people to other platforms.

13

@chidiejike I think it’s more complicated than you think since different users would like it to work slightly different .
But as it’s indeed a requested feature, maybe Wix has some plans to make it simpler.
(I’m not part of Wix team so I can’t tell).

14

But the most common structure of the like button is what you will find on facebook, on wix blog or even here (corvid) and so many other platforms. The entire code for that can be made available, then for those that want it differently can manipulate its syntax or go to corvid for info etc. J.D I am quite new to JQuery and JS, can you help me out?, at this point I an just trying to store the likes in a database and reload it anytime a user logs in. I have been ale to add a condition to who can click the likes and what happens to the like images. Thanks.