Integration

Depending on your preferences, web platform and technical skill, you may opt for either an out-of-box solution, or go for a more "hands-on" approach.

Out-of-box solutions

These are ready-to-use solutions for integrating the "Líbí se" social button easily into some platforms:

Custom integration how-to

First, include the client script. Please use the appropriate script for the given environment:

Production:

<script src="//pocitadlolibise.seznam.cz/pocitadlolibise.js" async></script>

Staging:

<script src="//staging.libise.seznam.cz/pocitadlolibise.js" async></script>

Dev:

<script src="//client.libise.seznamdiskuze.dev.dszn.cz/pocitadlolibise.js" async></script>

The script will handle and manage all <seznam-pocitadlolibise> elements once loaded, rendering the "Líbí se" button in every one. The required and optional attributes of the <seznam-pocitadlolibise> element are document below.

Seznam.cz login integration

The client script has opt-in support for integration with the Seznam.cz's login script (if available). This improves UX of signed-in users in browsers blocking 3rd party cookies (e.g. Safari).

The integration is enabled by adding the use-social-token search parameter to the script's URL, for example:

<script src="//pocitadlolibise.seznam.cz/pocitadlolibise.js?use-social-token" async></script>

Enabling the login integration is strongly recommended on all sites that use the Seznam.cz login script.

Required <seznam-pocitadlolibise> attributes

The section contains the required attributes for every <seznam-pocitadlolibise> element. Elements not having these attributes set are ignored by the integration script until all the required attributes are present.

The client script automatically handles changes made to the values of these attributes.

entity

The URL referencing the entity (article, video, ...), for example: https://www.seznam.cz/.

Optional <seznam-pocitadlolibise> attributes

This section documents the optional attributes supported by the <seznam-pocitadlolibise> element, providing additional configuration options.

layout

Configures the layout of the button's UI. These are the supported values:

size

Configures the size of the button's UI. Please note that not all values are compatible with all layout settings (this is primary due to backwards compatibility and extraneous requirements for some layouts):

Color configuration

The seamless layout supports color configuration via custom CSS properties (also known as CSS variables). This feature is not currently supported in IE11.

This section refers to the button as being in active state if the current user has submitted an upvote.

Demo

A demo demonstrating all configuration options can be found at the following URL: https://jsfiddle.net/82hvb1or/.

A demo for previewing color configuration of the seamless layout is available at the following URL: https://jsfiddle.net/6esvz9ux/.