Nine Point Mulligan

    clapbutton

    1.1.9 • Public • Published

    ClapButton

    An easy to use, open source clap button similar to the one on medium.com. Allows users to clap once, or up to 50 times for a web page. Only requires 3 lines of HTML and an API to function (more below). For a turn key solution checkout https://clapbutton.com.

    Gif Example

    Installation

    It doesn't take much to add the clap button to your site or blog. In the head of your HTML page you'll need to add a reference for a CSS file, and one more for a Javascript file.

    <!-- In the <head> of your HTML page. -->
    <script src="https://unpkg.com/clap-button-com/dist/main.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/clap-button-com/dist/styles.css" />

    Usage

    To use the button it's as easy as a single line.

    <!-- Where ever you want the button -->
    <button class="clap-button"></button>

    Options

    Options can be specified by adding HTML attributes to the button element.

    Dev Mode

    Enable dev mode by adding a data-dev attribute. This will stop the button from making API calls. That way you spam the button as much as you like without effecting clap counts.

    <button class="clap-button" data-dev="true"></button>

    Page URL

    By default the button detects the current page url using window.location.href. If you'd like to override this option it can be done by adding a data-url attribute to the button.

    <button class="clap-button" data-url="yourdomain.com/specific/page"></button>

    Color

    Sample of supported colors

    The button comes in multiple flavors red, green, blue, grey, and white! By default the button will be set to green but it can be easily changed with a data-color attribute.

    <button class="clap-button" data-color="red"></button>
    <button class="clap-button" data-color="green"></button>
    <button class="clap-button" data-color="blue"></button>
    <button class="clap-button" data-color="grey"></button>
    <button class="clap-button" data-color="white"></button>

    API

    For persisting clap counts the button expects an API. By default it's configured to work with https://clapbutton.com, but if you want to roll your own set up the button can accept a backend url as an attribute.

    <button class="clap-button" data-backend-url="yourdomain.com/api/route/"></button>

    Your API will just need to support two endpoints: one to get clap counts, and one to clap for a page.

    GET /clap - Get Clap Count

    GET endpoint that accepts a query string parameter of url that contains a URI encoded URL. Your backend should then be able to lookup the page via it's URL and return back the clap count as the body.

    Example

    To get the clap count for google.com, a request would be routed to https://clapbutton.com/api/clap?url=google.com.

    POST /clap - Clap For Page

    POST endpoint that takes a JSON body of { url:string, claps: number } to add claps to a page. The API doesn't need to return anything back other than 200 OK.

    Example

    If we wanted to clap 12 times for google.com, we would send a POST request to https://clapbutton.com/api/clap with the following payload:

    {
      "url": "google.com",
      "claps": 12
    }

    Resources

    The clap icon was created by Chathura Kudahetti, LK and is available from: https://thenounproject.com/search/?q=clap&i=1471176

    Install

    npm i clapbutton

    DownloadsWeekly Downloads

    0

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    496 kB

    Total Files

    22

    Last publish

    Collaborators

    • eddieabbondanzio