Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Code for minimal, non-clapable counts? #33

Open
ZainRizvi opened this issue Aug 7, 2019 · 3 comments
Open

Code for minimal, non-clapable counts? #33

ZainRizvi opened this issue Aug 7, 2019 · 3 comments

Comments

@ZainRizvi
Copy link

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
Copy link
Owner

ColinEberhardt commented Aug 8, 2019

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
Copy link
Author

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
Copy link

LazyRen commented Feb 6, 2022

Thank you for very helpful code snippet!

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants