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.
These are ready-to-use solutions for integrating the "Líbí se" social button easily into some platforms:
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="//pocitadlolibise.seznam.test.dszn.cz/pocitadlolibise.js" async></script>
Dev:
<script src="//pocitadlolibise.seznam.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.
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.
<seznam-pocitadlolibise> attributesThe 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.
entityThe URL referencing the entity (article, video, ...), for example:
https://www.seznam.cz/.
<seznam-pocitadlolibise> attributesThis section documents the optional attributes supported by the
<seznam-pocitadlolibise> element, providing additional configuration
options.
layoutConfigures the layout of the button's UI. These are the supported values:
seamless - layout used for seamless integration into the host website's UI.
This layout and this layout only supports color configuration. This is the
default value.button_count - displays the UI as an opaque button.box_count - displays the UI as a two-section box, with the vote count above
the call to action (the entire UI is interactive).sizeConfigures 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):
minimalistic - displays only the icon and vote count. This is supported
only with the seamless layout.small - displays the UI in regular size. This is the default value.large - displays the UI in a larger scale (approximately 140-145 %).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.
--primary-color - the color of the icon and call to action text when the
button is not in the active state.--background-color - the background color of the button. This may be set to
transparent if so desired.--hover-color - the color of the icon and call to action text when the
button is not in the active state and is hovered by the user's pointer
(usually a mouse cursor).--count-color - the color of the number of upvotes currently registered for
the given entity.--active-color - the color of the icon and call to action text when the
button is in the active state.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/.