The like button - what it does and does not do

[whole diary]

[thetrout]

Samsung Galaxy S4 it works but is glitchy.

When I click the like button I get taken to this URL in a new tab: http://www.firstgreatwestern.info/coffeeshop/lyke.php?id=158740

Which opens an empty page with just a dot. However if you refresh the "liked" page in the browser the "Like" button has registered.

Haven't tried a samsung tablet though (and don't have one to hand. Know someone who does though )

[grahame]

I have some test / demo code around that identifies the most recently liked articles ... the idea being that if it works nicely over a few weeks, we can have the first few posts identified highlighted at the top of the main page.    Take a look, and please like some posts.  Feedback welcome.

http://www.wellho.net/demo/liked.php

[grahame]

Been looking at some stats since the like button was added, month by month.  This in number of likes registered month by month (and remaining registered - unlikes for people who have changed their mind not included):

482 March 2015
357 February
513 January 2015
512 December 2014
398 November
397 October
369 September
454 August
402 July
209 June
48 May 2014

Total 4141

[Cynthia]

Grahame, when I liked your opening post here I was redirected to a blank page. Is that meant to happen?

That happens to me, too.  But I have learned that although when returning to the 'Home' page, the 'Like' has changed to 'Yum!', eventually my name appears as a 'Like', so although the system seems a bit slow, I know my 'Like' will be acknowledged eventually.  I use Google Chrome as a browser, by the way, as I anticipate this will be Grahame's next question!

[grahame]

Grahame, when I liked your opening post here I was redirected to a blank page. Is that meant to happen?

That happens to me, too.  But I have learned that although when returning to the 'Home' page, the 'Like' has changed to 'Yum!', eventually my name appears as a 'Like', so although the system seems a bit slow, I know my 'Like' will be acknowledged eventually.  I use Google Chrome as a browser, by the way, as I anticipate this will be Grahame's next question!

I'm very much aware that the button is far from perfect in how it operates for some people; there are hard decisions to make as to where to invest scarse time.    Over the next 3 days, I *am* planning to work out best use of time and resources for the next few months, and if we have an HTML^▸ (Hypertext Markup Language) / CSS^▸ (Cascading Style Sheets) / Javascript expert around who has a bit of time to help ...  - it would be greatly appreciated.

[Timmer]

I really like the 'Like' button, very useful.

[thetrout]

Pressing the like button on Google Chrome does indeed do something strange:







I'm no expert in PHP, but I would either suggest this is just a Google Chrome issue, or that it's a feedback of the PHP script throwing up the Asterisk * as a feedback of conclusion.

But without seeing the code or testing on another browser, I am purely speculating

[Brucey]

The like button does two things:
1. An "onClick" changes the text from "like" to "yum!"
2. Redirects the user to /coffeesgop/lyke.php?id=[post-id] - I assume this script adds the like into the database and returns the asterisk

What really needs to change is the redirect should trigger an asynchronous request to the PHP script (i.e. do it in the background without the user ever noticing).  I would choose to do this with jQuery, but without this being installed on the site, it is possible (with slightly more coding) in JavaScript.

[grahame]

The like button does two things:
1. An "onClick" changes the text from "like" to "yum!"
2. Redirects the user to /coffeesgop/lyke.php?id=[post-id] - I assume this script adds the like into the database and returns the asterisk

What really needs to change is the redirect should trigger an asynchronous request to the PHP script (i.e. do it in the background without the user ever noticing).  I would choose to do this with jQuery, but without this being installed on the site, it is possible (with slightly more coding) in JavaScript.

I've looked (still look) to avoid jQuery because of the download bloat - especially for on-train connections; here's the stuff I need to fix (PHP generating JavaScript) ... I know PHP but not Javascript.

Code:

$vv1 = 'onClick='."'".'document.getElementById("txt'."$cache_id".'").innerHTML="yuk!";' ."'";
$vv2 = 'onClick='."'".'document.getElementById("txt'."$cache_id".'").innerHTML="yum!";' ."'";
if ($ilike) {
                $message .= "<div style='text-align: right'>[<a href=/coffeeshop/lyke.php?id=$cache_id $vv1 target='bob'><span id='txt$cache_id'>unlike</span></a>] $ii</div>";
} else {
                $message .= "<div style='text-align: right'>[<a href=/coffeeshop/lyke.php?id=$cache_id $vv2 target='bob'><span id='txt$cache_id'>like</span></a>] $ii</div>";
}

My PHP does indeed return just "*" - I have previously tested it with

Code:

header("HTTP/1.1: 204 No Content");

but (as I recall) that was worser 

If you're able to help with the JavaScript I need / what to return / do in my PHP,  I can see if I can implement that and make this work better for everyone.   What we have at the moment is a quick hack in response to requests and not a proud solution.

[Brucey]

If you're able to help with the JavaScript I need / what to return / do in my PHP,  I can see if I can implement that and make this work better for everyone.   What we have at the moment is a quick hack in response to requests and not a proud solution.

I'll hack something together in the next few days.  Should be quite a simple and lightweight solution really.

[Chris from Nailsea]

What really needs to change is the redirect should trigger an asynchronous request to the PHP script ...

Easy for you to say. 

[Brucey]

Put this into the header:

Code:

<script type="text/javascript">
function likePost(postId) {
var httpreq;
if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        httpreq = new XMLHttpRequest();
} else {
        // code for IE6, IE5
        httpreq = new ActiveXObject("Microsoft.XMLHTTP");
}
httpreq.onreadystatechange = function() {
if(httpreq.readyState == 4  && httpreq.status == 200) {
var elementName = 'txt' + postId;
document.getElementById(elementName).innerHTML = 'yum!';
}
}
httpreq.open('GET', 'http://www.firstgreatwestern.info/coffeeshop/lyke.php?id=' + postId, true);
httpreq.send();
return;
}
</script>

Then replace the like button with this, but use the PHP variables to populate the post ID:

Code:

<a href="javascript:likePost(173763)"><span id="txt173763">like</span></a>

For the less techies, the JavaScript code for the page header creates a function that is called by the like button.  The button sends the post ID to the function, which in turn creates a call (in the background) to the like function on the server.  When the server responds with an "OK" (response code 200), then the like gets changed to yum.

Haven't been able to test this with the Coffee Shop as my browser blocks the cross-domain query.  But tested against a script on my own server and it works fine.

[grahame]

Thanks, Brucey ...

I shall be experimenting over the next hour or so ... please excuse any glitches in the forum and unlikable likes I may sign up to!   When done I'll open the floor for "unwanted feature" [bug] reporting!

[grahame]

I think it SHOULD work with Brucey's code (blame my lack of understanding if it doesn't) for "like"s.   If you unlike, still the old code while we test.

Unexpected bookings / goings on - a quiet day has become busier so I'm not around to code / check as much as I would like, but "open house" now to let me know of bugs!

[JayMac]

Works for me. I'm no longer getting another tab open in Chrome when I 'like' a post.