Add Applause Button for Jekyll Post

When I revisted the hydejack’s offical site, I noticed little clapping button that set at the end of the post.
It seems good idea to have light-cost (compare to commenting) way to communicate with visitors. So I gave some research on it and finally made it as above.
@qwtel, the author of this jekyll theme provides a nice applause button service, but unfortunatelly, $5 per month is too expensive to pay for this small blog.
So I ended up with applause. Which is free, (donation for a good service is always an option.) and easy-to-install.(not 100% true, if you ask me. I couldn’t find good guideline on how to customize it.)
Basically, I will add applause button for each-and-every post. Unless author specifically set it otherwise.
4 files to be modified. (check related commit)
/_config.yml
/_includes/head/links-static.html
/_layouts/post.html
_sass/my-style.scss
_config.yml
It’s not really necessary, but I just wanted to avoid inserting applause_button: true
to each and every posts’ frontmatter. If you have a post that doesn’t need applause button, insert applause_button: false
to the frontmatter of that post.
defaults:
# You can use the following to enable comments on all posts.
- scope:
type: posts
values:
# https://applause-button.com/
applause_button: true
links-static.html
Jekyll needs js & css files ready. So here it is.
{% if page.applause_button %}
<link rel="stylesheet" href="https://unpkg.com/applause-button/dist/applause-button.css">
<script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>
{% endif %}
post.html
Applause button(if enabled) seats between contents and post-nodes such as author / comments.
If Applause button is disabled, make sure to prints origina dingbat. I’ve used site’s accent_color (which you can change from _config.yml
), but feel free to choose the best color for your blog.
Make sure to put proper url
for the applause button. If there is more than one applause button in one post…
Sorry, I don’t know to be honest. Please share your ideas for this. {.note}
{% if page.applause_button %}
<applause-button
color={{ site.accent_color | default:'rgb(79,177,186)' }}
url={{ site.url }}{{ page.url }} >
</applause-button>
{% else %}
<hr class="dingbat related" />
{% endif %}
my-style.scss
- Change size
- Make button centered
- Number has same color as applause button
// applause-button
applause-button {
width: 80px;
height: 80px;
margin: 0 auto;
.count-container {
color: inherit;
}
}