# Like Button with page increment

**URL:** <https://forum.getkirby.com/t/like-button-with-page-increment/6494>\
**Category:** Questions\
**Tags:** v2\
**Created:** [February 1, 2017, 1:02pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494 "2017-02-01T13:02:22Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 2, 2017, 3:06pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/21 "2017-02-02T15:06:53Z")

</div>

In nominees i have the Like buttons, not sure what you mean? i have uploaded it here:  
[http://crypto-awards.com/tca\_new/nominees](http://crypto-awards.com/tca_new/nominees)  
Maybe you can see something 😕

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 2, 2017, 3:15pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/22 "2017-02-02T15:15:44Z")

</div>

`.showcase-link` is a div container without an `href` attribute. Where do you want to get the URL from?

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 2, 2017, 3:17pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/23 "2017-02-02T15:17:51Z")

</div>

Not sure if i need it! What i have to put in the href? So i thought in footer function is all i need:

```auto

$(function(){

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

});
</script>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 2, 2017, 3:22pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/24 "2017-02-02T15:22:12Z")

</div>

This does not make sense. You are trying to get the url for the ajax call from the href attribute of the `showcase-link`. But there is no href attribute, so there is no url that can be called by `get()`. That’s why I said use `console.log()` to check the results of your calls.

If you don’t want to link to that page, you can use a button as you do, but then you need to use a route that does the increment.

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 2, 2017, 3:26pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/25 "2017-02-02T15:26:30Z")

</div>

iam really confuse, why i need the attribute and what should be inside the href?  
What you mean with use the console.log() ? how i can use it? do i have to set something up?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 2, 2017, 3:29pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/26 "2017-02-02T15:29:53Z")

</div>

Honestly, this goes far beyond what Kirby support can do for you. It does not have anything to do with Kirby, but is a Javascript problem. Maybe hire a developer to fix this for you?

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 2, 2017, 3:33pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/27 "2017-02-02T15:33:52Z")

</div>

Why this has´t to do something with kirby? I try to use one of your plugin for this, that does´t work. So this is my alternative way with your increment function. Just wanna know a way to call this function, otherwise this function brings me nothing.

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [February 2, 2017, 3:58pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/28 "2017-02-02T15:58:14Z")

</div>

I agree with @texnixe. This will probably take like a 100 questions before you have something that works.

If you don’t know what `console.log` in javascript is, it’s totally fine, but it’s also the very basic of javascript and you should probably start learning the basics first. An alternative can be to get someone to help you with writing the code.

I was also there in the beginning. We all have been there. I also asked 100 questions, well I still ask questions, but now I try to narrow it down to a minimum so that it is a really small question.

Big topics like this, especially when inexperienced, can easily start a chain of questions that almost never stops.

If you still want to ask javascript questions [http://stackoverflow.com/](http://stackoverflow.com/) is a great forum for that. But be aware, they can be really rude if your question(s) does not make sense.

Good luck! 🙂

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 2, 2017, 4:06pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/29 "2017-02-02T16:06:11Z")

</div>

And there is one other reason: If you don’t know what you are doing, you are risking to run into security issues. This is probably not as important if you are working on a private project where it does not matter, but for a client project, it would.

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 2, 2017, 4:18pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/30 "2017-02-02T16:18:50Z")

</div>

where can i read about this function:

```auto

if(r::ajax()) {

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 2, 2017, 4:26pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/31 "2017-02-02T16:26:36Z")

</div>

This is not very much documented, by all it does is check if the request is an Ajax request. It’s the same as [https://getkirby.com/docs/cheatsheet/request/ajax](https://getkirby.com/docs/cheatsheet/request/ajax)

for example, if you’d just put this code into your template:

```auto
<?php
$page->increment('likes');
?>

```

the page would be updated on every page reload, instead of in reaction to an Ajax request.

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [February 7, 2017, 1:25pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/32 "2017-02-07T13:25:22Z")

</div>

If you still want this and have not succeeded yet this could be a solution as well:

> **[Like Button Rating for Website - LikeBtn](https://likebtn.com/en/)**
>
> Add an awesome Like button to your website! Get tons of likes and shares! Get instant statistics and insights!

> Add a Like button widget to your website with just a few lines of HTML-code!

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 7, 2017, 5:04pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/33 "2017-02-07T17:04:49Z")

</div>

thank you very much. I will look into it 🙂

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [February 8, 2017, 10:19am UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/34 "2017-02-08T10:19:58Z")

</div>

I’m considering to use like/dislike buttons instead of stars on one of my websites. Therefor I’ve started with a test:

[https://verktygen.com/like-unlike/](https://verktygen.com/like-unlike/)

![](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/d146eebdfc9281c07ba622cfa9496bcd9ed6ed46.gif)

- Click to like or dislike.
- Click again to remove the like or dislike.

There are no ajax or even Kirby implementations in this test, pure html/css/js.

Maybe this will end up as a Kirby plugin in the future. Feel free to use the code if you want.

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 8, 2017, 12:26pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/35 "2017-02-08T12:26:51Z")

</div>

Looks nice. How i can use the code?

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [February 8, 2017, 12:49pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/36 "2017-02-08T12:49:24Z")

</div>

All the code is here: [https://verktygen.com/like-unlike/](https://verktygen.com/like-unlike/)

Using it with a Kirby site without basic knowledge would probably be a 100+ step tutorial. But at least, there it is, the frontend part of it (as it contains no backend/saving/antispam etc).

Anyway, in your case, [https://likebtn.com/en/](https://likebtn.com/en/) might be better. They have a free plan as well. Or you need to wait until I’ve built a plugin around it, if that will happend.

---

<div class="post-metadata">

**Author:** ![SandroIeva](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SandroIeva](https://forum.getkirby.com/u/SandroIeva)\
**Post date:** [February 8, 2017, 1:04pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/37 "2017-02-08T13:04:13Z")

</div>

Just one question to your solution, where do you store the likes?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [February 8, 2017, 1:06pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/38 "2017-02-08T13:06:27Z")

</div>

If you read carefully, the likes are not perpetuated in this example:

> [@jenstornell](#):
>
> as it contains no backend/saving/antispam etc).

---

<div class="post-metadata">

**Author:** ![wildthing](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/wildthing/32/3457_2.png) [@wildthing](https://forum.getkirby.com/u/wildthing)\
**Post date:** [February 9, 2017, 7:19pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/39 "2017-02-09T19:19:12Z")

</div>

It would be great to create this plugin.  
Im trying to create [http://demo.phpjabbers.com/1486664763\_637/hipark-residence.php](http://demo.phpjabbers.com/1486664763_637/hipark-residence.php) same thing.

I’m already can create posts (reviews) with ratings, and cons/pros but im stuck on like/dislike function.

---

<div class="post-metadata">

**Author:** ![jenstornell](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jenstornell/32/546_2.png) [@jenstornell](https://forum.getkirby.com/u/jenstornell)\
**Post date:** [February 9, 2017, 8:00pm UTC](https://forum.getkirby.com/t/like-button-with-page-increment/6494/40 "2017-02-09T20:00:53Z")

</div>

I’m working on it from time to time. I think it’s like a light version of my [https://github.com/jenstornell/kirby-ratings](https://github.com/jenstornell/kirby-ratings). I’ve got a head start by using many things I’ve learned by creating Kirby Ratings.

If I have the time for it I will probably release it the next week.

[Previous page](https://forum.getkirby.com/t/like-button-with-page-increment/6494.md?page=1)

[Next page](https://forum.getkirby.com/t/like-button-with-page-increment/6494.md?page=3)