Code for minimal, non-clapable counts?

[ZainRizvi]

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!

[ColinEberhardt]

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);
            }
        });
    });

[ZainRizvi]

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 :)

[LazyRen]

Thank you for very helpful code snippet!

I've managed to display similar count on my blog with commit LazyRen/LazyRen.github.io@1b59e1857a596ce4955c201391c42fb70ff26e3a!