Blogger like button

Blogger like button with Lyket + video tutorial

Creating a blog with Blogger is really a piece of cake, but unfortunately there is no out-of-the-box way to add a Blogger like button, or, a Medium-like clap button.

Lyket is a new tool that integrates perfectly with Blogger to let you add like buttons on any of your blogs in a matter of seconds.

In this video tutorial I will try to show how to add a Blogger like button in just 1.40 minutes! Read on to follow the video step-by-step.

As seen in the video

Lets's go through the video steps!

In the video we use this code to create a clap button. But you can create a like button, or a like/dislike one, by changing the "data-lyket-type" attributes.

<div
  data-lyket-type="like"
  data-lyket-namespace="testing-widget"
  data-lyket-id="everybody-like-now"
/>

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

Basically, to create a Blogger like button you need to:

  • Specify the type of button you want in your Blogger blog -like, clap or like/dislike - using the "data-lyket-type" attribute.
  • Choose an unique ID for your button using the "data-lyket-id" attribute.
  • "data-lyket-namespace" is useful to tag or categorize your buttons once you see them listed in your dashboard in the private area.
<!-- minimal settings -->
<div data-lyket-type="like" data-lyket-id="blogger-like-button"></div>

<!-- with namespace -->
<div
  data-lyket-type="like"
  data-lyket-namespace="blogger"
  data-lyket-id="blogger-like-button"
></div>

Just like I am suggesting in the video, this snippet uses a test API key that resets all the button counters every day so you should register to Lyket to get your own! ;)

To do that just navigate to the registration page, fill out the form and get your personal public API key. Then replace the test key 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 Blogger like buttons were the most upvoted!

Customize the buttons

Let's go back to our button. Lyket is super simple to customize. The best way to do it is by following the instructions you can find in the official HTML widget documentation.

To customize a Blogger like button you can:

  • Your blog color palette to decorate the button's background, font and active color, using the "data-lyket-color-" attributes.
  • <!-- with non-default template -->
    <div
      data-lyket-type="like"
      data-lyket-namespace="blogger"
      data-lyket-id="blogger-like-button-colors"
      data-lyket-color-primary="violet"
      data-lyket-color-background="#333"
      data-lyket-color-text="grey"
      data-lyket-color-highlight="#ff00c3"
    ></div>
  • Choose a template from our template gallery using the "data-lyket-template" attribute.
  • <!-- with non-default template -->
    <div
      data-lyket-type="like"
      data-lyket-namespace="blogger"
      data-lyket-id="blogger-like-button-heart"
      data-lyket-template="twitter"
    ></div>

That's it! Easy, right? Write to us if you had any problems using the widget or if you want to suggest any improvement!