How to add claps to your blog

You may notice that if you scroll to the bottom of any blog post on my site, you will see a section that asks you if you like this post and if you do to give it some claps. This isn't something you see very often but it is easier than you think.

Personally, I chose to use Lyket, a great bit of indie development. It supports React, HTML and WordPress so perfect for all the cases you might need.

Prefer video content over a blog? Check it out below.

The Setup

For a React based blog you just need a single package, @lyket/react and you are ready to start adding claps to your website.

Next you need to signup for your Lyket account which can be found at https://lyket.dev . Once you signed up grab the Public API token from the settings.

Use settings

Wrap our _app.js

Now that we have all the required pieces, we can wrap our application in a provider so we can use it with Lyket. First you need to import Provider from Lyket but instead of importing as Provider let's use LyketProvider .

import { Provider as LyketProvider} from “@lyket/react”
javascript

Now we need to wrap our application in this provider and pass in our API token so Lyket can know which account to use.

Subscribe to my newsletter

Get emails when I post new articles, new courses and videos and much more!

Your _app.js should look similar to the following:

import '../styles/index.css'
import { Provider as LyketProvider} from “@lyket/react”

export default function MyApp({ Component, pageProps }) {
  return (
    <LyketProvider apiKey="[YOUR-API-KEY]">
      <Component {...pageProps} />
    </LyketProvider>
  );
}

Using Lyket on a page.

Lyket is now available on any page we want. Open up the page you want to use Lyket on and add the follow import import { ClapButton } from '@lyket/react'; then we can use this component wherever we want. For example:

import { ClapButton } from '@lyket/react';

export BlogPost = ({ title,slug, content }) => {
  return (
    <div>
      {title}
      <ClapButton id={slug} namespace="blog-posts" />
      {content}
    </div>
  );
};

That is it, now your readers can clap when they love your post. Give it a shot below!

James Perkins

James is a developer advocate, who helps developers understand the Jamstack, and how it can be used to build a faster web.

Leave a Comment

0 comments
    HomeBlogAnalytics

    © 2022 James Perkins. All rights reserved

    Powered by TinaCMS