Add Applause Button for Jekyll Post

22 Dec 2020 in Devlog on Blog, Github Pages, Jekyll

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
• links-static.html
• post.html
• 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.

# file: "/_config.yml"
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.

<!-- file: "/_includes/head/links-static.html" -->
{% 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}

<!-- file: "/_layouts/post.html" -->
{% 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

/* file: "/_sass/my-style.scss" */
// applause-button

applause-button {
  width: 80px;
  height: 80px;
  margin: 0 auto;

  .count-container {
    color: inherit;
  }
}