ColinEberhardt / applause-button

A zero-configuration medium-style button for adding applause / claps / kudos to web pages and blog posts
http://applause-button.com/
MIT License
426 stars 41 forks source link

get-multiple API documentation #19

Closed teamcoltra closed 5 years ago

teamcoltra commented 5 years ago

I really love how your site uses the get-multiple API endpoint to list a bunch of claps on the same page. I was wondering if you could give any documentation on how that works. I tried being simple and just copy/pasting it but not getting any luck with the following added to the bottom of my page (I am running jquery as well).

<script>
            function loadClapCount() {
    var elements = jQuery(".clap").toArray();
    var urls = elements.map(function(el) {
        return el.getAttribute("data-url")
    });
    jQuery.ajax({
        url: "https://ltxkcod9s9.execute-api.us-east-1.amazonaws.com/production/get-multiple",
        method: "POST",
        data: JSON.stringify(urls),
        headers: {
            "Content-Type": "text/plain"
        },
        contentType: "text/plain"
    }).done(function(claps) {
        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)
            }
        })
    })
}
loadClapCount();
</script>
ColinEberhardt commented 5 years ago

Hi @teamcoltra - I've added some documentation to the website which gives some brief details for the API. Hope that is sufficient?

ColinEberhardt commented 5 years ago

Here's a complete example using the browser's native fetch API:

const urls = [
  "ebook.bike/book/ebb-5c5f8d964d438/little-darlings.html",
  "ebook.bike/book/ebb-5c629224a80fc/luck-of-the-devil.html"
];

fetch("https://api.applause-button.com/get-multiple", {
    method: "POST",
    body: JSON.stringify(urls)
  })
  .then(response => response.json())
  .then(json => console.log(json));

You can see it running here: https://codepen.io/ColinEberhardt/pen/KEpLOV?editors=0011

Hope that helps!