Jekyll

How to embed LikeCoin button into Jekyll

Thanks to the user PinGuの独り言 for providing the tutorial.

Before adding the LikeCoin button, please register a Liker ID.

Follow the steps below:

Config liker_id in _config.yml

Add liker_id in _config.yml and change [LikerID] into your Liker ID. It should look like this:

# Enter your Liker ID to enable LikeCoin button
liker_id: [LikerID]

Define the variables in _config.yml. The variables can be obtained in the site object using {{site.liker_id}}

https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}

Insert the iframe

Develop the LikeCoin button HTML and use the following code to insert the iframe:

{% if site.liker_id %}
<iframe
  src="https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}">
</iframe>
{% endif %}

Use if to inspect if liker_id exists. Then add the code to the post template, find a place near the end of the post template and add {% include likeco.html %} to include the LikeCoin button.

Build the website, and the LikeCoin button will be added at the end of each article. However, the size may need adjustment. The LikeCoin button will adapt itself to a width of 485px and a height of 240px. Use the following code to align it to the middle and hide the scroll bar.

{% if site.liker_id %}
<iframe
  style="width: 100%; max-width: 485px; height: 240px; margin: auto; overflow: hidden; display: block;"
  src="https://button.like.co/in/embed/{{site.liker_id}}/button?referrer={{ page.url | absolute_url | cgi_escape }}">
</iframe>
{% endif %}