applause-button
applause-button copied to clipboard
Code for minimal, non-clapable counts?
Could you please share the code you use to get the small clap icon and number to show up next to each blog post title on your website? https://blog.scottlogic.com
Thanks!
Sure ...
The code on the blog uses the get-multiple
API endpoint. These are documented in the 'Developer API' section of the applause button homepage (https://applause-button.com/)
On the Scott Logic blog, we use the following code, which I have commented:
function loadClapCount() {
// the clap counts for each article are displayed via span elements with the 'clap' class, find all these
var elements = jQuery(".clap").toArray();
// the article that each clap represents is indicates by the data-url attribute
var urls = elements.map(function(el) {
return el.getAttribute("data-url");
});
// send an API request that asks for the clap count of all of these articles
jQuery.ajax({
url: "https://api.applause-button.com/get-multiple",
method: "POST",
data: JSON.stringify(urls),
headers: {
"Content-Type": "text/plain"
},
contentType: "text/plain"
}).done(function(claps) {
// when the response returns, locate each element and update the count
jQuery(".clap").each(function() {
var elem = jQuery(this),
url = elem.attr("data-url").replace(/^https?:\/\//, "");
var clapCount = claps.find(function(c) { return c.url === url; });
if (clapCount && clapCount.claps > 0) {
elem.css("display", "initial")
.find(".count")
.html(clapCount.claps);
}
});
});
Thanks! This is a really useful bit of functionality.
I bet a lot of people would love it being integrated into the main 'applause-button' library :)
Thank you for very helpful code snippet!
I've managed to display similar count on my blog with commit LazyRen/LazyRen.github.io@1b59e1857a596ce4955c201391c42fb70ff26e3a!