Wordpress like button

You have just finished an article on Wordpress and you need a nice like button to draw attention and start getting feedback?

Lyket let's you create and style like buttons in Wordpress in just a few seconds! There is no need to be an expert in HTML or CSS, or to install any plugin, just copy and paste a few lines of code and you'll have all that you need to make your website interactive!

Lyket let's you can create and customize the size and colors of your new buttons and choose among the most famous templates on the web, like the heart like button

or, if you are a fan of Medium, their famous clap button.

0

You can then see the buttons statistics on your private area, in your own dashboard

The official Lyket like button plugin is out!

Finally our official Lyket like button Wordpress plugin is out!

Read our documentation, to know more about the Wordpress like button plugin and see it in action!

To install the plugin go to the Wordpress plugin directory or search for the keyword "Lyket", or the "like button" tag in the "Add new" search form.

And since you are there don't forget to...

Wordpress like button without login

One of the biggest perks of using Lyket is that your visitors don't need to login to leave a token of appreciation, still Lyket is able to detect if a visitor has already liked your content.

This is both great for user experience and for privacy concerns, because your visitors don't have to identify and their data remain in their own hands!

To learn more about how we value privacy, how visitors are recognized and how you can change the privacy settings, read our documentation.

Step-by-step tutorial

Lets's start with a video that explains how to add a Wordpress like button without having to install a plugin

You can easily integrate a like button into your Wordpress blog article by following this really easy steps.

1. Load Lyket's script

First thing we do here is copying this code in our footer to make Lyket available all around our Wordpress site.

<script
    src="https://unpkg.com/@lyket/widget@latest/dist/lyket.js?apiKey=acc0dbccce8e557db5ebbe6d605aaa"
></script>

Be aware that this code uses a test API key that resets all the counters every day so, like I am suggesting in the video, you should register to Lyket to get your own.

To do that just navigate to the registration page, and your personal public API key, copy it and then replace the test one with your own, after the "apiKey=" query parameter

Once you register you will also be able to visit your dashboard where you can see which of your buttons were the most upvoted!

Lets'move on!

2. Create like clap and like/dislike buttons

To create a Wordpress like button you need to specify the type of button you want to create - like, clap or like/dislike - using the data-lyket-type attribute.

Then choose an unique identifier to create a unique button. Use the data-lyket-id attribute to specify the name of the button. For example in Wordpress you can choose the title of your blog post.

data-lyket-namespace is useful to tag or categorize your buttons, and to organize your private dashboard. For example if you are creating like buttons for your Wordpress blog you can choose the namespace "my-wordpress-blog".

In the video we use this code to create a clap button

<div
    data-lyket-type="like"
    data-lyket-namespace="my-wordpress-blog"
    data-lyket-id="my-first-blog-post"
 />

This code will generate this like button on your Wordpress website

3. Customize your buttons

Once you have the hang of how to create a basic like button you can start customizing! The default template can be fully customized choosing your website palette!

Let's see how

Say you want to change the background color of your button to a light blue shade, the color of the icon to a violet, and change the active button color to a light orange. Change the colors by adding the relative data-lyket attributes.

<div
    data-lyket-type="like"
    data-lyket-namespace="my-wordpress-blog"
    data-lyket-id="wordpress-heart-like-button"
    data-lyket-color-background="b8fff3"
    data-lyket-color-text="violet"
    data-lyket-color-primary="rgba(255, 224, 138, 0.4)"
 ></div>

You can read more on how to customize the buttons in the HTML widget documentation.

Wordpress heart like button

Say you want to create a Twitter-like heart like button, nothing easier!

Simply add the template name to the code we wrote earlier

<div
    data-lyket-type="like"
    data-lyket-namespace="my-wordpress-blog"
    data-lyket-id="wordpress-heart-like-button"
    data-lyket-template="twitter"
 ></div>

This code will generate the famous heart shaped like button on your Wordpress website!

What if my Wordpress theme does not support HTML widgets?

Some themes do not support custom HTML widgets, like the one we use in the video tutorial. To fix that you can install a plugin like this one, called Insert headers and footers and then follow the instructions!

Even if you don't want to install the plugin you can still use Lyket! Because of the way Lyket is built you can also directly paste Lyket's script together with each button without impacting your pageviews count or performance!

More on the Wordpress like buttons

To choose and customize the buttons follow the HTML widget documentation.

P.S.: If you’re using Wordpress you are probably accustomed to plugins. We are developing a Lyket Wordpress plugin, write to us if you are interested!