Add Applause Button for Jekyll Post

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

When I revisited the Hydejack official 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 unfortunately, $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
/_includes/components/dingbat.html
/_sass/my-style.scss

• _config.yml
• links-static.html
• dingbat.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’ front matter. If you have a post that doesn’t need applause button, insert applause_button: false to the front matter 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. Add below code to the end of the file.

<!-- 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 %}

dingbat.html

Applause button(if enabled) seats between contents and post-nodes such as author / comments.
If Applause button is disabled, make sure to prints original 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.

<!-- file: "/_includes/components/dingbat.html" -->
{% if page.applause_button %}
  <applause-button class="mb6"
    color={{ site.accent_color | default:'rgb(79,177,186)' }}
    url={{ site.url }}{{ page.url }} >
  </applause-button>
{% else %}
  <!-- original content of dingbat.html -->
{% endif %}

my-style.scss

Add below code to the end of the file.

• 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;
  }
}