search

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
427 stars 41 forks source link

Minimal working example #35

Closed azzamsa closed 4 years ago

azzamsa commented 4 years ago

I've try to put it on my blog, but it didn't respect the css file: https://github.com/Pelican-Elegant/elegant/issues/532#issuecomment-560236736

So I try the Minimal Working Example to reproduce it. But I can't get it working.

SyntaxError: import declarations may only appear at top level of a module applause-button.js:1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!-- add the button style & script -->
        <link rel="stylesheet" href="applause-button.css" />
        <script src="applause-button.js"></script>
    </head>

    <body>
        <!-- add the button! -->
        <applause-button style="width: 58px; height: 58px;"/>
    </body>

</html>

​ Thank you

ColinEberhardt commented 4 years ago

Are you sure the CSS file has loaded?

Here's a complete minimal example (the same as your above, but with the applause button code loaded from a CDN network):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!-- add the button style & script -->
        <link rel="stylesheet" href="https://unpkg.com/applause-button@3.3.0/dist/applause-button.css" />
        <script src="https://unpkg.com/applause-button@3.3.0/dist/applause-button.js"></script>
    </head>

    <body>
        <!-- add the button! -->
        <applause-button style="width: 58px; height: 58px; margin-top: 50px;"/>
    </body>
</html>

You can see it working here: https://codepen.io/colineberhardt-the-bashful/pen/MWYWjmV?editors=1000

azzamsa commented 4 years ago

previously I took the js code from: https://github.com/ColinEberhardt/applause-button/blob/master/src/applause-button.js

after I try to use the js from: https://unpkg.com/applause-button@3.3.0/dist/applause-button.js

it works.

Thanks.