README

Slap a like button on anything in Contao.

This Contao CMS bundle allows you to add like and dislike buttons to any (twig) template, liking or disliking whatever you please to your heart's content.

Features

• Add like and dislike buttons to any template, attached to anything you want, e.g. models or your grandma's favorite knitting patterns
• Cookie-less/session-less association of likes and dislikes to individual user-agents using a tiny anonymous fingerprint
• Presumably GDPR-compliant, as no personal data is stored
• Extensive base template included
• Accessible with translatable title and aria-label attributes
• Rate Limiting to prevent abuse
• CSRF protected API endpoint

Installation

You can install this bundle using Composer:

composer require heimrichhannot/contao-likes-bundle

Then update your database and you're good to go.

Usage

To add a like button to your template, include a like & dislike button template and pass options as likes, preferably created by calling huh_likes() with a namespace and a target (these can be literally any strings you like to reference this likeable thing).

{{ include('@Contao/huh_likes/buttons.html.twig', { likes: huh_likes('knitting-pattern', 'honeycomb-lace') }) }}

On the Matter of liking Models

Most commonly, you will want to add a like button to something related to contao models, like a news article or a calendar event. In this case, we recommend using the model's table name as namespace and the model's ID as target. Or, even better, if you have access to the \Contao\Model instance directly in your template, just pass it in.

The Dislike Button and other Options

In the provided default template, the dislike button is NOT shown by default. If you want to show it, pass more options to the huh_likes() function:

huh_likes(model, null, {
    likes_enabled: true,
    dislikes_enabled: true,
})

Accessing Likes and Dislikes

By using the huh_likes() function, you will get an object with the following getters available:

• namespace (string): The namespace you provided
• target (string): The target you provided
• voted (int): The number of votes the current user has cast on this target (typically 0, 1, or -1)
• likes (int): The total number of likes
• dislikes (int): The total number of dislikes
• likesEnabled (bool): Whether likes are enabled
• dislikesEnabled (bool): Whether dislikes are enabled

Customization

Within the default template @Contao/huh_likes/buttons.html.twig, you will find four blocks that you can override with your custom icons:

• icon_like_neutral
• icon_like_set
• icon_dislike_neutral
• icon_dislike_set

With these blocks, you can easily replace the default icons with your own SVGs or any other HTML content.