Let's get the first question out of the way: why should you add a clap button to your site?
In my opinion, it provides good analytics on which posts do well and which could use some work. Also, you can use Google Tag Manager to track the clicks overall in more depth, let me know if you would like a tutorial on how to do this, but as of now, it goes a little bit out scope.
Also, ever since Medium integrated them, they are pretty much common place on blogs. Luckily, the great people at https://applause-button.com/ have done most of the heavy lifting for us!
Lets get started.
First, pull up your post code. In my case, I'm using Ghost with a custom theme, so I will open my post.hbs file.
...
<article class="postauthor">
<article class="about">
<img src="{{primary_author.profile_image}}">
<article class="info">
<article>
<p class="name">{{primary_author.name}}</p>
<p class="bio">{{primary_author.bio}}</p>
</article>
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" class="twitter"><i class="fab fa-twitter"></i> {{primary_author.twitter}}</a>
</article>
</article>
<article class="support">
<a href="https://paypal.me/kentonv" target="_blank" alt="Support"><i class="fas fa-donate"></i></a>
</article>
</article>
</article>
</section>
{{/post}}
Here, you can see the very bottom of the file. We simply need to make one small modification of adding the following code into the page:
<section id="clapper">
<applause-button style="width: 58px; height: 58px" color="#3f9dff"></applause-button>
<article>
<h2>Enjoy the article?</h2>
<p>a clap is much appreciated if you enjoyed. No sign up or cost associated :)</p>
</article>
</section>
Overall, the bottom of my file now looks as such:
<section id="clapper">
<applause-button style="width: 58px; height: 58px" color="#3f9dff"></applause-button>
<article>
<h2>Enjoy the article?</h2>
<p>a clap is much appreciated if you enjoyed. No sign up or cost associated :)</p>
</article>
</section>
<article class="postauthor">
<article class="about">
<img src="{{primary_author.profile_image}}">
<article class="info">
<article>
<p class="name">{{primary_author.name}}</p>
<p class="bio">{{primary_author.bio}}</p>
</article>
<a href="https://twitter.com/{{primary_author.twitter}}" target="_blank" class="twitter"><i class="fab fa-twitter"></i> {{primary_author.twitter}}</a>
</article>
</article>
<article class="support">
<a href="https://paypal.me/kentonv" target="_blank" alt="Support"><i class="fas fa-donate"></i></a>
</article>
</article>
</article>
</section>
{{/post}}
Wahoo! We're almost there. Now, we simply need to add the Applause Button CDN into our header. Most blogging platforms have header injection options, so lets go look at our Ghost admin dashboard.
On the side, you can see "Code Injections." Let's check there first.
Perfect! A place we can simply place our CDN code. Let's give it a shot!
Place the following in that textfield:
<script src="https://unpkg.com/applause-button/dist/applause-button.js"></script>
<link rel="stylesheet" href="https://unpkg.com/applause-button/dist/applause-button.css">
Yay! Now, if you go back to your ghost site, after restarting it, you should see the following at the bottom of your header:
Cool, now, let's give it a shot by trying to hit the clap at the bottom of this page! You can also test it on your own site :)
Make sure to make sure it still works by clicking on the clap below. Hopefully, I helped you learn something!
Top comments (0)