Love Like Dislike API and Javascript
<h3>Working Example Full Page</h3>
<p>You can check it out below, just include the script and it records the details based on the current URL. </p>
<p><a class="btn btn-info" href="https://kruxor.com/lovelike/" target="blank" rel="noopener">Love Like API Demo</a></p>
<p><a href="https://kruxor.com/lovelike/"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/fFq6wFA.png" /></a></p>
<h3>Quick Embed</h3>
<p>Add this to the page where you would like the icons and likes to appear. </p>
<h4>HTML</h4>
<pre><code class="html hljs xml"><div id="lovelike">&nbsp;</div><script src="https://api.kruxor.com/js/lovelike.js"></script></code></pre>
<h3> </h3>
<h3>The Idea</h3>
<p>An API that allows a url to have love, like or dislike's attached to it. </p>
<p>Quite simple layout. </p>
<p>url, lovenum, likenum, dislikenum</p>
<p>then have a way to send the nums, and update the buttons with the number. </p>
<p>just include a script on the page and it will do the rest, show the buttons, and current stats. </p>
<h3>Demo</h3>
<p><img src="https://i.imgur.com/2zcnqqx.gif" /></p>
<h3>Structure</h3>
<p><img src="https://i.imgur.com/ndM1CTV.png" /></p>
<h3>Script</h3>
<p><a href="https://api.kruxor.com/js/lovelike.js">/js/lovelike.js</a></p>
<p>This script needs to, write to the page the love, like dislike buttons.</p>
<p>allow turning on and off of buttons</p>
<p>send click data to the api, will need a way of updating this via php callback via ajax.</p>
<p>load the existing values from the api data for the url</p>
<h3>Get the Icons</h3>
<p>Try icons from : <a href="https://heroicons.com/">https://heroicons.com/</a> </p>
<p>Love: </p>
<p><code><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"></code><br /><code> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /></code><br /><code></svg></code></p>
<p>Like: </p>
<p><code><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"></code><br /><code> <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" /></code><br /><code></svg></code></p>
<p>Dislike: </p>
<p><code><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"></code><br /><code> <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" /></code><br /><code></svg></code></p>
<h3>Write the buttons to the page</h3>
<p><code>/ draw the buttons on the page /</code><br /><code>/ <div id="lovelike">&nbsp;</div> /</code><br /><code>function kxdrawbuttons() {</code><br /><code> var kxbuttons = <style>.kx-buttons {</code><br /><code> padding:10px;</code><br /><code> border-radius:5px;</code><br /><code> background:#000;</code><br /><code> position:absolute;</code><br /><code> }</code><br /><code> </style></code><br /><code> <div class='kx-buttons'></code></p>;</code><br /><code> document.getElementById("lovelike").innerHTML = kxbuttons;</code><br /><code>}</code><br /><code>window.onload = function() {</code><br /><code> kxdrawbuttons();</code><br /><code>}</code></p>
<p><code> </div>
<h3>Include Test Script</h3>
<p><code><div id="lovelike">&nbsp;</div><script src="https://api.kruxor.com/js/lovelike.js"></script></code></p>
<p>Just adding text to start with, with the values.</p>
<p><span id="kxll" class="kx-love-label">Love: </span><span id="kxlv" class="kx-love-value">0</span> <span id="kxlil" class="kx-like-label">Like:</span> <span id="kxliv" class="kx-like-value">0</span> <span id="kxdl" class="kx-dislike-label">Dislike:</span> <span id="kxdv" class="kx-dislike-value">0</span></p>
<p><span class="kx-dislike-value">Then attach click events to each item, to allow a callback to the api to write the data back to the database. </span></p>
<p><span class="kx-dislike-value">Testing here: <a href="https://kruxor.com/view/code/OSUTE/test-love-like-dislike-script-from-api/">https://kruxor.com/view/code/OSUTE/test-love-like-dislike-script-from-api/</a> </span></p>
<h3><span class="kx-dislike-value">Read and Write Class Values</span></h3>
<p><span class="kx-dislike-value">Add a php script that loads the love like class and allows reading and writing to it. </span></p>
<p>callback.php</p>
<p><code><?php</code></p>
<p><code>errorreporting(EALL);</code><br /><code>iniset( 'displayerrors','1');</code></p>
<p><code>/ accept callbacks for api js's /</code></p>
<p><code>/ ?class=lovelike&calltype=read</code></p>
<p><code>https://api.kruxor.com/callback.php?class=lovelike&calltype=read</code><br /><code>https://api.kruxor.com/callback.php?class=lovelike&love=1&like=0&dislike=0&url=test</code></p>
<p><code>Allowed Vars</code><br /><code>class = lovelike</code><br /><code>calltype = write, read ?? does need this? prob not.</code></p>
<p><code>/</code></p>
<p><code>if(!isset($GET['class'])) {</code><br /><code> return false;</code><br /><code>} else {</code><br /><code> // only allow certain classes to be called, otherwise anything can be written...</code><br /><code> $class = $GET['class'];</code><br /><code> // add additional allowed classes here...</code><br /><code> if($class === "lovelike") {</code><br /><code> // add additional classes to this if...</code><br /><code> } else {</code><br /><code> return false;</code><br /><code> }</code><br /><code>}</code></p>
<p><code>/</code><br /><code>if(!isset($GET['calltype'])) {</code><br /><code> return false;</code><br /><code>} else {</code><br /><code> $calltype = $GET['calltype'];</code><br /><code>}</code><br /><code>/</code></p>
<p><code>// try and start the class with no global inc</code><br /><code>include("class/core.class.php");</code><br /><code>include("class/functions.class.php");</code><br /><code>include("class/db.class.php"); // ???</code></p>
<p><code>// start required classes. </code><br /><code>$functions = new functions;</code></p>
<p><code>// check if the class exists for $class extend load.</code><br /><code>$classfilename = "class/extends/" . $class . ".extend.php";</code><br /><code>if(fileexists($classfilename)) {</code><br /><code> include($classfilename);</code><br /><code>} else {</code><br /><code> return false;</code><br /><code>}</code></p>
<p><code>$classstart = new $class;</code><br /><code>$classstart->start();</code></p>
<p><code>if($class === "lovelike") {</code></p>
<p><code> if(isset($GET['url'])) {</code><br /><code> $url = $GET['url'];</code><br /><code> } else {</code><br /><code> return false; // need a url to continue</code><br /><code> }</code><br /><code> if(isset($GET['love'])) {</code><br /><code> $love = $GET['love'];</code><br /><code> // these must equal 1 only</code><br /><code> if($love > 1) {</code><br /><code> return;</code><br /><code> }</code><br /><code> } else {</code><br /><code> $love = 0;</code><br /><code> }</code><br /><code> if(isset($GET['like'])) {</code><br /><code> $like = $GET['like'];</code><br /><code> if($like > 1) {</code><br /><code> return;</code><br /><code> }</code><br /><code> } else {</code><br /><code> $like = 0;</code><br /><code> }</code><br /><code> if(isset($GET['dislike'])) {</code><br /><code> $dislike = $GET['dislike'];</code><br /><code> if($dislike > 1) {</code><br /><code> return;</code><br /><code> }</code><br /><code> } else {</code><br /><code> $dislike = 0;</code><br /><code> }</code></p>
<p><code> // load from any match url.</code><br /><code> $fieldsarray = [</code><br /><code> "url" => $url,</code><br /><code> ];</code><br /><code> if($classstart->loadfromfieldsarray($fieldsarray, $max = 1)) {</code><br /><code> // we have a record and its loaded, otherwise add it.</code><br /><code> $classstart->love = $classstart->love + $love;</code><br /><code> $classstart->like = $classstart->like + $like;</code><br /><code> $classstart->dislike = $classstart->dislike + $dislike;</code><br /><code> $classstart->update();</code><br /><code> } else {</code><br /><code> $classstart->url = $url;</code><br /><code> $classstart->love = 0 + $love;</code><br /><code> $classstart->like = 0 + $like;</code><br /><code> $classstart->dislike = 0 + $dislike;</code><br /><code> $classstart->add();</code><br /><code> }</code></p>
<p><code> // return this data as an array that can be used to update the page.</code></p>
<p> </p>
<p><code>}</code></p>
<p><br /><code>echo $classstart->nicename;</code></p>
<p> </p>
<p><code>?></code></p>
<p>Callback is now writing data, just needs to return something useful. </p>
<p><a href="https://api.kruxor.com/callback.php?class=lovelike&love=1&like=0&dislike=0&url=http://kruxor.com">https://api.kruxor.com/callback.php?class=lovelike&love=1&like=0&dislike=0&url=http://kruxor.com</a></p>
<h3>Love Like Javascript</h3>
<p><code>/ draw the buttons on the page /</code><br /><code>/ <div id="lovelike">&nbsp;</div> /</code><br /><code>function kxdrawbuttons() {</code><br /><code> var kxbuttons = <style>.kx-buttons {</code><br /><code> position:relative;</code><br /><code> }</code><br /><code> .kx-buttons span {</code><br /><code> cursor:pointer;</code><br /><code> }</code><br /><code> .kx-icon svg {</code><br /><code> height:22px;</code><br /><code> width:22px;</code><br /><code> }</code><br /><code> .kx-love-label svg {</code><br /><code> fill:#cd4343;</code><br /><code> }</code><br /><code> .kx-like-label svg {</code><br /><code> fill:#4d9d4d;</code><br /><code> }</code><br /><code> .kx-dislike-label svg {</code><br /><code> fill:#564e4e;</code><br /><code> }</code><br /><code> .kx-value {</code><br /><code> margin-right:8px;</code><br /><code> display:inline-block;</code><br /><code> position:relative;</code><br /><code> top:2px;</code><br /><code> line-height:1;</code><br /><code> }</code><br /><code> </style></code><br /><code> <div class='kx-buttons'></code><br /><code> <span class='kx-icon kx-love-label' id='kxll' title='Love This'><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"></code><br /><code> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" /></code><br /><code></svg></span></code><br /><code> <span class='kx-love-value kx-value' id='kxlv'>0</span></code><br /><code> <span class='kx-icon kx-like-label' id='kxlil' title='Like'><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"></code><br /><code> <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" /></span></code><br /><code> <span class='kx-like-value kx-value' id='kxliv'>0</span></code><br /><code> <span class='kx-icon kx-dislike-label' id='kxdl'><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"></code><br /><code> <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" /></code><br /><code></svg></span></code><br /><code> <span class='kx-dislike-value kx-value' id='kxdv'>0</span></code><br /><code> </div>;</code><br /><code> document.getElementById("lovelike").innerHTML = kxbuttons;</code><br /><code>}</code><br /><code>window.onload = function() {</code><br /><code> kxdrawbuttons();</code></p>
<p><code> let kxlove = 0;</code><br /><code> let kxlike = 0;</code><br /><code> let kxdislike = 0;</code><br /><code> let kxclicked = false;</code></p>
<p><code> document.getElementById("kxll").onclick = function(){</code><br /><code> kxlove = 1;</code><br /><code> kxlike = 0;</code><br /><code> kxdislike = 0;</code><br /><code> if(kxclicked === false) {</code><br /><code> kxgetdata(kxlove,kxlike,kxdislike);</code><br /><code> }</code><br /><code> kxclicked = true;</code><br /><code> }</code><br /><code> document.getElementById("kxlv").onclick = function(){</code><br /><code> kxlove = 1;</code><br /><code> kxlike = 0;</code><br /><code> kxdislike = 0;</code><br /><code> if(kxclicked === false) {</code><br /><code> kxgetdata(kxlove,kxlike,kxdislike);</code><br /><code> }</code><br /><code> kxclicked = true;</code><br /><code> }</code><br /><code> document.getElementById("kxlil").onclick = function(){</code><br /><code> kxlove = 0;</code><br /><code> kxlike = 1;</code><br /><code> kxdislike = 0;</code><br /><code> if(kxclicked === false) {</code><br /><code> kxgetdata(kxlove,kxlike,kxdislike);</code><br /><code> }</code><br /><code> kxclicked = true;</code><br /><code> }</code><br /><code> document.getElementById("kxliv").onclick = function(){</code><br /><code> kxlove = 0;</code><br /><code> kxlike = 1;</code><br /><code> kxdislike = 0;</code><br /><code> if(kxclicked === false) {</code><br /><code> kxgetdata(kxlove,kxlike,kxdislike);</code><br /><code> }</code><br /><code> kxclicked = true;</code><br /><code> }</code><br /><code> document.getElementById("kxdl").onclick = function(){</code><br /><code> kxlove = 0;</code><br /><code> kxlike = 0;</code><br /><code> kxdislike = 1;</code><br /><code> if(kxclicked === false) {</code><br /><code> kxgetdata(kxlove,kxlike,kxdislike);</code><br /><code> }</code><br /><code> kxclicked = true;</code><br /><code> }</code><br /><code> document.getElementById("kxdv").onclick = function(){</code><br /><code> kxlove = 0;</code><br /><code> kxlike = 0;</code><br /><code> kxdislike = 1;</code><br /><code> if(kxclicked === false) {</code><br /><code> kxgetdata(kxlove,kxlike,kxdislike);</code><br /><code> }</code><br /><code> kxclicked = true;</code><br /><code> }</code></p>
<p><code> kxgetdata(0,0,0);</code></p>
<p><code>}</code></p>
<p><code>/</code><br /><code>function kxsendlike() {</code><br /><code> alert("likeclicked, send like and update value. ");</code><br /><code>}</code><br /><code>function kxsendlove() {</code><br /><code> alert("love clicked, send love and update value. ");</code><br /><code>}</code></p>
<p><code>function kxgetdata() {</code><br /><code> const data = null;</code><br /><code> const xhr = new XMLHttpRequest();</code><br /><code> xhr.withCredentials = false;</code><br /><code> xhr.addEventListener("readystatechange", function () {</code><br /><code> if (this.readyState === this.DONE) {</code><br /><code> // console.log(this.responseText);</code><br /><code> // var data = JSON.parse(this.responseText);</code><br /><code> }</code><br /><code> });</code><br /><code> xhr.open("GET", "https://api.kruxor.com/callback.php?class=lovelike&love=0&like=0&dislike=0&url=test");</code><br /><code> xhr.send(data);</code><br /><code> let datajson = JSON.parse(data);</code><br /><code>}</code><br /><code>/</code></p>
<p><br /><code>function kxgetdata(kxlove,kxlike,kxdislike) {</code><br /><code> console.log("kxlove:"+kxlove);</code><br /><code> var path = "https://api.kruxor.com/callback.php?class=lovelike&love="+kxlove+"&like="+kxlike+"&dislike="+kxdislike+"&url="+window.location.href;</code><br /><code> kxloadjson(path,"");</code><br /><code>}</code><br /><code>function kxloadjson(path, callback) {</code><br /><code> var httpRequest = new XMLHttpRequest();</code><br /><code> httpRequest.onreadystatechange = function() {</code><br /><code> if (httpRequest.readyState === 4) {</code><br /><code> if (httpRequest.status === 200) {</code><br /><code> var data = JSON.parse(httpRequest.responseText);</code><br /><code> //console.log(data);</code><br /><code> let loveval = data.love;</code><br /><code> kxupdatevals(data.love, data.like, data.dislike);</code><br /><code> console.log(loveval);</code><br /><code> if (callback) callback(data);</code><br /><code> }</code><br /><code> }</code><br /><code> };</code><br /><code> httpRequest.open('GET', path);</code><br /><code> httpRequest.send();</code><br /><code>}</code></p>
<p><code>function kxupdatevals(love, like, dislike) {</code><br /><code> document.getElementById("kxlv").innerHTML = love;</code><br /><code> document.getElementById("kxliv").innerHTML = like;</code><br /><code> document.getElementById("kxdv").innerHTML = dislike;</code><br /><code>}</code></p>
<h3>Result</h3>
<p><img src="https://i.imgur.com/urChNoJ.png" /></p>
<h3>Test and Working Demo</h3>
<p>Testing, and now its working... yay.</p>
<p><img src="https://i.imgur.com/ibyc1xj.gif" /></p>
<h3>Still To Add</h3>
<p>Styles, and maybe stop it at one click, rather than it sending back over and over again, when each element is clicked. </p>
<h3>Working</h3>
<p>Now just add this to any page and you can record love, like and dislike ratings...</p>
<p><code> <style>.kx-buttons {text-align:right;margin-bottom:10px;}</style></code><br /><code> <div id="love_like">&nbsp;</div><script src="https://api.kruxor.com/js/lovelike.js"></script></code></p>
View Statistics
Add Comment
Other Items in API and Javascript
Related Search Terms
Other Categories in Articles
