Like Button with page increment

The CMS Questions
1

Hello,

i am searching for a Like Button, so already implement a visitor function with: page>increment
so how can i use this with click function? The user should just be able to increment 1 time,
so he can´t give 100 Likes at ones.

Any help?

2

Did you see this post?

1 Like
3

You need an Ajax call to do that. As regards preventing multiple user clicks, the easiest would be to disable the button after the first click (but then the user would still be able to click on reload)

Other option:

  • cookies (can be deleted as well)
  • record the IP (can be changed as well)
4

How would i make a Ajax call? So cookie is OK, when people delete than its a hack, i just wanna prevent multiple clicks at ones

5

See the post @thguenther linked to.

There are some cookbook examples with Ajax calls as well. If you don’t know anything about Ajax, you’ll find some tutorials on the web, I guess.

6

I tried this code in my footer, but does´t work

$(function(){

  $('.showcase-link').on('click', function(e) {
    var url   = $(this).attr('href');
    $.get(url);
  });

});
</script>

and this in my template:

if(r::ajax()) {
  $page->increment('likes');
}

why it does´t work?

7

I also tried the Kudos Plugin, but this also does´t work…Any help?

8

I think it would be nice if someone want to built a plugin around this feature.

I like how it looks on https://moz.com/blog. I would prefer the thumbs to be a bit stronger but I like the idea in general.

On a plugin I think it would be great if it has as little css and js as possible. Just a great core.

I also like this article: https://www.smashingmagazine.com/2016/11/true-lies-of-optimistic-user-interfaces/ With optimistic UI, there will be no loading time at all when clicking the thumb.

9

Hello,

iam searching for a solution for a simple like Button? Please help…

10

Didn’t you ask this already?

1 Like
11

yes, but no solution for my problem

12

Instead of double post, I would recommend to give it a week. If no more replies at that time, maybe write again in that same post. I think it’s called bump and make your post move up again.

To make a simple like button contains a few steps and it involves PHP, JS, Ajax, Panel and spam protection.

As far as I can see no one have done a plugin for it but I made a similar one. Not sure if it will help you but maybe some reverse engineering would work from this plugin: https://github.com/jenstornell/kirby-ratings

2 Likes
13

thank you! Will look into it

14

I suggest you do some JS debugging to find out why your first solution does not work. We can’t do that for you. Add a console.log()command wherever necessary, for example to check if the button was clicked in the first place etc. The basic example you posted should in fact work (if it does not, there’s something wrong), although it is very basic. It would in fact make more sense to use a route to handle the increments.

15

I made a alert so the Button was clicked, but nothing happens…

What you mean with:

It would in fact make more sense to use a route to handle the increments.

16

Please see the link to the post in my last reply.

17

Another tool to help you debug this is Chrome Dev Tools, specific the Network tab.

Press Command+Option+I (Mac) or Control+Shift+I (Windows, Linux) to open DevTools on the page. Then select the Network tab.

Pasted image2150×1626 245 KB

If the button is being clicked, the next step is knowing if the request is being sent to your site and how the site responds back.

2 Likes
18

Thanks for any help so far, but do not get why this function does´t work.
Why i have so make the function to increment in the template?

Iam just a designer , but i need a solution like maybe this:

when clicked …page(“XY”)>increment Likes…
Is this possible?

Also try this in my template:

if(r::ajax()) {
	
echo "<script type='text/javascript' langeuage='javascript'>n"; 
echo "<!--n"; 
echo " alert('".$fehlertext."');n"; 
echo "//-->n"; 
echo "</script>";  
	
	
  $page->increment('likes');
}
19

i have opened the network tab, where i can see some infos about the click event?

Bildschirmfoto 2017-02-02 um 14.41.28.png1286×1344 191 KB

20

You won’t see the click event in the Networks tab, there you can see the HTTP request originated by this snippet you posted earlier in this thread:

$(function(){

  $('.showcase-link').on('click', function(e) {
    var url   = $(this).attr('href');
    $.get(url); // this should initiate a HTTP request
  });

});

But I think the request is at least being sent, do you see the last item nominees? Is that the URL you want to send likes to? Click on nominees to see what the server response was.