How to add a like button to any Gatsby website with Lyket

Lyket is the ultimate tool to quickly implement GDPR-compliant like buttons on any Gatsby project, NextJS, Gatsby, Gatsby Native and any other framework that uses Gatsby. From the moment you create the button our server will keep track of every visitor interaction without storing their personal data.

To get started you just need to signup to Lyket and get your personal public API key. It is just a matter of seconds then to start receiving feedback on your website!

Installation using Gatsby

To install the Gatsby component run

yarn add @lyket/react

or

npm install @lyket/react

Configuration

Set up the provider

The provider is in charge of loading the client that will be used to make requests to Lyket's server using your personal public API key.

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

GatsbyDOM.render(
  <Provider apiKey="[YOUR-API-KEY]">
    <App />
  </Provider>,
  document.getElementById('root')
);
Required props
  • apiKey: you can get your public API key by registering on lyket.dev
Optional props
  • theme: This prop allows you to provide your own style to the default theme. Read more about it in the Styling like buttons section at the end of this article

  • recaptchaSiteKey: if you enabled reCAPTCHA you need to provide your public key. Read more at the end of this document

Create a like button

When the Gatsby component is mounted, a fetch request is made to retrieve info about the like button with that certain id and namespace. If no button is found, a new resource is created with the id/namespace identifier.

Notice that the server will create a new resource for every different and unique identifier, so if you change id or namespace the new button won’t inherit the votes.

Every time a user clicks on a button, the Gatsby component will update the likes counter and flag that the user has already voted. Visitors don't have to signup to any third party service.

Like buttons behave like Twitter buttons. Users can only like once and a subsequent call from the same user will remove the user's like. Here is an example of a like button with id "how-to-beat-me-at-chess", namespace "post" and a Twitter-like template.

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

export default BlogPost = ({ title, content }) => {
  return (
    <div>
      {title}
      <LikeButton
        id="how-to-beat-me-at-chess"
        namespace="post"
        component={LikeButton.templates.Twitter}
      />
      {content}
    </div>
  );
};
Required like button props
  • id: The API uses the ID to determine which resource you want to interact with. It should be unique. It accepts an alphanumeric string with maximum 50 characters.
Optional props
  • namespace: Giving a namespace is useful to keep buttons organized, and can be used to fetch statistics on your buttons filtering by namespace. Check the API docs for more information.

  • hideCounterIfLessThan: You may not want to show a counter if you are not getting enough feedback. Specify the number of likes you want to receive before showing the counter.

  • component: To change the aspect of the default button you can either provide one of the ready-made templates that Lyket provides or a custom Gatsby component in the component attribute. Let's go deeper on this crucial prop.

Templates

A number of like button templates are provided to use Lyket out-of-the-box. You can see all the available options on the demo section

  • Simple: default LikeButton - supports themes prop
  • Twitter: Twitter style LikeButton

Import templates directly from the button component. Here is an example of using templates.

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

export default StandingOvation = () => {
  return (
    <>
      <h2>Do you like pizza?</h2>
      <LikeButton
        id="do-you-like-pizza"
        component={LikeButton.templates.Twitter}
      />
    </>
  );
};

Children or custom component

You may want to give a different aspect to a button, for example using your logo as icon or add a callback after a user clicks. You can do that by providing your own component!

Here are a few examples of using children for each button type. You can pass a component also through the component prop. Here is an example

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

export default Faq = () => {
  return (
    <>
      <h2>Do you like pizza?</h2>
      <LikeButton id="do-you-like-pizza" namespace="faq" hideCounterIfLessThan=10>
        ({ onClick, totalLikes, userHasVoted, isLoading, isCounterVisible }) => {
          return (
            <>
              <button onClick={onClick} disabled={isLoading}>Of course! πŸ•πŸ•πŸ•</button>
              {isCounterVisible && <div>Total: {totalLikes}</div>}
              {userHasVoted && <div>Thanks for your vote!</div>}
            </>
          )
        }
      </LikeButton>
    </>
  )
};

Styling buttons

Resizing

Like buttons can be resized by wrapping them in a container and changing the font-size.

Applying your own theme to the default template

Lyket uses the theme-ui library, allowing you to provide your own theme to the buttons through the theme prop in the provider.

These are the default values, you can change any of these parameters by passing your own object:

const defaultTheme = {
    colors: {
      background: '#e0e0e0',
      text: '#292929',
      primary: '#22c1c3',
      secondary: '#ff00c3',
      accent: '#fcff4b',
      highlight: '#e095ed',
      muted: '#aaa',
    },
    fonts: {
      body: 'inherit',
      heading: 'inherit',
      monospace: 'inherit',
    },
    fontWeights: {
      body: 400,
      bold: 700,
    },
  };

The Provider component makes a deep merge, so you can overwrite the theme object totally or partially.

There are a few templates that support theming. Read the templates detail to know which ones.

reCAPTCHA

Lyket is integrated with Google reCAPTCHA V3 to handle malicious use without interrupting human users. To enable it you need to provide your Google reCAPTCHA secret key in the user settings in the private area and add your recaptcha site key through the recaptchaSiteKey prop in the Provider. The key will be encrypted.