blogg.se internal widgets

The likes button is a simple click-count button for visitors to "like" your entries. An entry-id and timestamp is required, so only entries can get likes (not blogurl, pages, profile or anything else at the moment).

The default like button inserted into the DOM will look like this:

Implementing the button in your design

The widget can be insterted into your HTML template simply by copying and paste the following code snippet:

Customizing the button

There are a number of toggles for end-users to use, for quick and easy customization of the like button look. Add the toggle to the script tag. More than one toggle can be used at the same time.

data-size="large"

data-theme="..."

Adding the toggle data-theme="blue" will give the like button a blue appearance if that is preferred. All available color themes are as follows:

data-bubblepos="right"

Advanced customization

The like button is constructed from a few basic HTML elements, enabling easy styling for artists and designers that wish to personalize the like buttons even further. The HTML the script creates for each like button looks like this:

WARNING: DO NOT COPY THIS CODE. EXAMPLE ONLY.
<div id="like-oid" class="like-container">
  <div class="likebtn">
    <span class="likebtn__count" data-likes="123">123</span>
    <a class="likebtn__btn" href="#" title="Gilla inlägget">Gilla</a>
  </div>
</div>

It's as easy as overriding the styling in your own stylesheet with the changes you prefer.

Example implementation

Insert the script-tag found in the top of the page where you want the like button to appear in your HTML template - inside of a entryloop if on startpage/categorypage or archivepage. Like this:

{% block content %}
 <div id="content">
 {% block entry_loop %}
   {% for entry in entries %}
      <article class="entry">
      ... article template ...
      <script type="text/javascript" src="/static/widgets/likes.js" class="likewidget" data-timestamp="{{ entry.timestamp }}" data-entryid="{{ entry.id }}" async></script>
    </article>
   {% endfor %}
 {% endblock entry_loop %}
 </div>
 {% endblock %}