###################
Socialní komponenty
###################


=====================
Facebook Share button
=====================

Tlačítko pro sdílení na Facebooku (viz dokumentace__). Atribut **href** obsahuje objekt, který se má na Facebook sdílet. Nevyplňuje se URL, ale přímo objekt - URL se vygeneruje automaticky.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://developers.facebook.com/docs/plugins/share-button

.. csv-table:: Atributy **facebook-share**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    **layout**, "box_count, button_count, button, link, icon_link, icon", vzhled

.. code-block:: html+twig

    <i:facebook-share href="zbozi" layout="button_count" /> {# minimální zápis #}
    <i:facebook-share href="zbozi" layout="button_count" class="button_facebook" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="fb-share-button" data-href="https://example.org/category/product-link" data-layout="button_count"></div>

    <!-- s vlastní třídou -->
    <div class="fb-share-button button_facebook" data-href="https://example.org/category/product-link" data-layout="button_count"></div>


====================
Facebook Like button
====================

Tlačítko pro like/recommend na Facebooku (viz dokumentace__). Atribut **href** obsahuje objekt, který se má na Facebook sdílet. Nevyplňuje se URL, ale přímo objekt - URL se vygeneruje automaticky.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

Atribut *href* může případně obsahovat místo objektu přímo URL stránky na Facebooku (tzn. musí začínat *https://www.facebook.com/...*). Místo této možnosti ale doporučujeme využít spíš rovnou Page Plugin (níže).

    __ https://developers.facebook.com/docs/plugins/like-button

.. csv-table:: Atributy **facebook-like**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    **layout**, "standard, button_count, button, box_count", vzhled
    action, like/recommend, popisek tlačítka
    colorscheme, light/dark, vzhled boxu
    share, true/false, přidat "share" tlačítko
    show-faces, true/false, zobrazit profilové fotky
    small-header, true/false, zobrazit menší hlavičku
    width, *number*, šířka
    lazy, true/false, browser's lazy-loading, **default = "true"**


.. code-block:: html+twig

    <i:facebook-like href="zbozi" layout="standard" /> {# minimální zápis #}
    <i:facebook-like href="zbozi" layout="standard" class="button_facebook" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="fb-like" data-href="https://example.org/category/product-link" data-layout="standard"></div>

    <!-- s vlastní třídou -->
    <div class="fb-like button_facebook" data-href="https://example.org/category/product-link" data-layout="standard"></div>

======================
Facebook Follow button
======================

Tlačítko pro follow na Facebooku (viz dokumentace__). Atribut **href** obsahuje adresu stránky/profilu.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://developers.facebook.com/docs/plugins/follow-button

.. csv-table:: Atributy **facebook-like**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    **layout**, "standard, button_count, box_count", vzhled
    colorscheme, light/dark, vzhled boxu
    size, large/small, vzhled boxu
    show-faces, true/false, zobrazit profilové fotky
    width, *number*, šířka


.. code-block:: html+twig

    <i:facebook-follow href="https://www.facebook.com/simplia.cz" layout="standard" /> {# minimální zápis #}
    <i:facebook-follow href="https://www.facebook.com/simplia.cz" layout="standard" class="button_facebook" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="fb-follow" data-href="https://www.facebook.com/simplia.cz" data-layout="standard"></div>

    <!-- s vlastní třídou -->
    <div class="fb-follow button_facebook" data-href="https://www.facebook.com/simplia.cz" data-layout="standard"></div>

====================
Facebook Page Plugin
====================

Box se stránkou eshopu na Facebooku (viz dokumentace__). Atribut **href** obsahuje adresu stránky na Facebooku - pouze základní URL bez dalších parametrů.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://developers.facebook.com/docs/plugins/page-plugin

.. csv-table:: Atributy **facebook-page**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *string*, URL stránky na Facebooku
    href-config, *string*, název proměnné slave configu pro *href*
    width, *number*, šířka (180-500)
    height, *number*, výška (130+)
    hide-cover, true/false, skrýt cover
    show-facepile, true/false, zobrazit profilové fotky
    show-posts, true/false, zobrazit příspěvky stránky
    lazy, true/false, browser's lazy-loading, **default = "true"**


.. code-block:: html+twig

    <i:facebook-page href="https://www.facebook.com/simplia" /> {# minimální zápis #}
    <i:facebook-page href="https://www.facebook.com/simplia" class="button_facebook" /> {# vlastní třída (jakákoliv) #}
    <i:facebook-page href-config="facebookUrl" /> {# adrese se doplní dle configu z proměnné facebookUrl #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="fb-page" data-href="https://www.facebook.com/simplia"></div>

    <!-- s vlastní třídou -->
    <div class="fb-page button_facebook" data-href=https://www.facebook.com/simplia"></div>


=================
Facebook Comments
=================

Facebook komentáře (viz dokumentace__). Atribut **href** obsahuje objekt, který se má na Facebook sdílet. Nevyplňuje se URL, ale přímo objekt - URL se vygeneruje automaticky.

    __ https://developers.facebook.com/docs/plugins/comments

.. csv-table:: Atributy **facebook-comments**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    width, "*number*, 100%", šířka
    colorscheme, light/dark, vzhled boxu
    order-by, "social, reverse_time, time", způsob řazení
    num-posts, *number*, počet příspěvků
    mobile, true/false, zjednodušené zobrazení

.. code-block:: html+twig

    <i:facebook-comments href="zbozi" /> {# minimální zápis #}
    <i:facebook-comments href="zbozi" class="comments_facebook" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="fb-comments" data-href="https://example.org/category/product-link" ></div>

    <!-- s vlastní třídou -->
    <div class="fb-comments comments_facebook" data-href="https://example.org/category/product-link" ></div>


===================
Facebook Message Us
===================

Tlačítko "Message Us" (viz dokumentace__). **Pro zobrazení je potřeba vyplnit App Id a Page Id v nastavení eshopu.**

    __ https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us

.. csv-table:: Atributy **facebook-message-us**
    :header: "Atribut", "Hodnota", "Popis"

    color, blue/white, vzhled tlačítka
    size, standard/large/xlarge, velikost tlačítka

.. code-block:: html+twig

    <i:facebook-message-us /> {# minimální zápis #}
    <i:facebook-message-us class="message_facebook" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="fb-messengermessageus" messenger_app_id="APP_ID" page_id="PAGE_ID"> </div>


=====================
Facebook Login button
=====================

Tlačítko pro přihlášení přes Facebook. Automaticky se doplní nastavené texty GDPR pod tlačítko.

.. csv-table:: Atributy **facebook-message-us**
    :header: "Atribut", "Hodnota", "Popis"

    button-img, url, adresa obrázku tlačítka
    button-text, string, text tlačítka
    button-class, string, třída přihlašovacího formuláře

.. code-block:: html+twig

    <i:facebook-login /> {# minimální zápis #}
    <i:facebook-login button-img="/images/facebook-button.png" class="facebook_login" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->
    <div>
        <a href="https://facebook.com/xxx" class="global-facebook-login-button"><img src="/images/facebook-button.png"/></a>
        <div>
            <p class="global-gdpr-form-description">Informace o zpracování najdete <a href="">tady</a></p>
        </div>
    </div>

===========
Google Plus
===========

Tlačítko +1 Google (viz dokumentace__). Atribut **href** obsahuje objekt, který se má na Google+ sdílet. Nevyplňuje se URL, ale přímo objekt - URL se vygeneruje automaticky.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://developers.google.com/+/web/+1button/

.. csv-table:: Atributy **google-plus**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    width, *number*, šířka
    size, "small, medium, standard, tall", velikost tlačítka
    annotation, "none, bubble, inline", zobrazit popisek
    recommendations, true/false, zobrazit doporučení
    count, true/false, zobrazit počet sdílení


.. code-block:: html+twig

    <i:google-plus href="zbozi" /> {# minimální zápis #}
    <i:google-plus href="zbozi" size="tall" class="button_googleplus" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <div class="g-plusone" data-href="https://example.org/category/product-link" data-size="tall"></div>

    <!-- s vlastní třídou -->
    <div class="g-plusone button_googleplus" data-href="https://example.org/category/product-link" data-size="tall"></div>

=============
Twitter Share
=============

Tlačítko pro odeslání tweetu (viz dokumentace__). Atribut **href** obsahuje objekt, který se má na Twitter sdílet. Nevyplňuje se URL, ale přímo objekt - URL se vygeneruje automaticky.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://dev.twitter.com/web/tweet-button

.. csv-table:: Atributy **twitter-share**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    size, "medium, large", velikost tlačítka
    count, "none, horizontal, vertical", zobrazit počet sdílení
    via, *string*, účet
    text, *string*, text tweetu
    related, *string*, související účty


.. code-block:: html+twig

    <i:twitter-share href="zbozi" /> {# minimální zápis #}
    <i:twitter-share href="zbozi" class="button_twitter" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <a class="twitter-share-button" data-url="https://example.org/link" href="https://twitter.com/share?url=https%3A%2F%2Fexample.org%2Flink" data-text="example name" data-lang="cs">Tweet</a>

    <!-- s vlastní třídou -->
    <a class="twitter-share-button button_twitter" data-url="https://example.org/link" href="https://twitter.com/share?url=https%3A%2F%2Fexample.org%2Flink" data-text="example name" data-lang="cs">Tweet</a>

==============
Twitter Follow
==============

Tlačítko pro sledování Twitter účtu (viz dokumentace__). Atribut **href** obsahuje název účtu.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://dev.twitter.com/web/follow-button

.. csv-table:: Atributy **twitter-follow**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *string*, název účtu
    size, "medium, large", velikost tlačítka
    show-count, "true, false", zobrazit počet sdílení
    show-screen-name, "true, false", zobrazit název účtu
    align, "left, right", zarovnání
    width, *number*, šířka v procentech nebo px


.. code-block:: html+twig

    <i:twitter-follow href="simplia" /> {# minimální zápis #}
    <i:twitter-follow href="simplia" class="button_twitter" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <a class="twitter-follow-button" href="https://twitter.com/simplia" data-lang="cs">Follow @simplia</a>

    <!-- s vlastní třídou -->
    <a class="twitter-follow-button button_twitter" href="https://twitter.com/simplia" data-lang="cs">Follow @simplia</a>

======================
Pinterest Share button
======================

Tlačítko pro sdílení na Pinterest.com (viz dokumentace__). Atribut **href** obsahuje objekt, který se má na Pinterest sdílet. Nevyplňuje se URL, ale přímo objekt - URL se vygeneruje automaticky.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://business.pinterest.com/en/widget-builder#do_pin_it_button

.. csv-table:: Atributy **pinterest-share**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *object*, objekt ke sdílení
    type, "**rect**, round", typ tlačítka
    size, "**large**, small", velikost tlačítka
    color, "**red**, gray, white", barva tlačítka
    count, "**none**, above, beside", počet sdílení
    icon, **true**/false, zobrazit ikonku

Při použití typu tlačítka *circular* nelze zobrazit počet sdílení, ani změnit barvu.

.. code-block:: html+twig

    <i:pinterest-share href="zbozi" type="rectangular" /> {# minimální zápis #}
    <i:pinterest-share href="zbozi" type="rectangular" class="button_pinterest" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" /></a>

    <!-- s vlastní třídou -->
    <a class="button_pinterest" href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above" data-pin-color="red" data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png" /></a>

================
Pinterest Follow
================

Tlačítko pro sledování Pinterest účtu (viz dokumentace__). Atribut **href** obsahuje název účtu.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://business.pinterest.com/en/widget-builder#do_follow_me_button

.. csv-table:: Atributy **pinterest-follow**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *string*, název účtu

.. code-block:: html+twig

    <i:pinterest-follow href="simplia" /> {# minimální zápis #}
    <i:pinterest-follow href="simplia" class="button_pinterest" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <a  href="https://www.pinterest.com/simplia/" data-pin-do="buttonFollow" >Simplia</a>

    <!-- s vlastní třídou -->
    <a class="button_pinterest" href="https://www.pinterest.com/simplia/" data-pin-do="buttonFollow" >Simplia</a>

=================
Pinterest Profile
=================

Tlačítko pro vložení widgetu s Pinterest prpfilem (viz dokumentace__). Atribut **href** obsahuje název účtu.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

    __ https://business.pinterest.com/en/widget-builder#do_embed_user

.. csv-table:: Atributy **pinterest-follow**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *string*, název účtu
    image-width, *int*, šířka obrázku
    board-width, *int*, šířka widgetu
    board-height, *int*, výška widgetu

.. code-block:: html+twig

    <i:pinterest-profile href="simplia" /> {# minimální zápis #}
    <i:pinterest-profile href="simplia" class="button_pinterest" /> {# vlastní třída (jakákoliv) #}
    <i:pinterest-profile href="simplia">Sledujte nás na Pinterest.com!</i:pinterest-profile> {# vlastní fallback zpráva #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <a href="https://www.pinterest.com/simplia/" data-pin-do="embedUser" data-pin-scale-width="130" data-pin-scale-height="120" data-pin-board-width="100">Visit Pinterest's profile on Pinterest.</a>

================
Instagram Follow
================

Tlačítko pro sledování Instagram účtu. Atribut **href** obsahuje název účtu.

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je tlačítko zobrazeno.

.. csv-table:: Atributy **instagram-follow**
    :header: "Atribut", "Hodnota", "Popis"

    **href**, *string*, název účtu

.. code-block:: html+twig

    <i:instagram-follow href="simplia" /> {# minimální zápis #}
    <i:instagram-follow href="simplia" class="button_instagram" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <!-- minimální zápis -->
    <a  href="https://instagram.com/simplia?ref=badge" data-pin-do="buttonFollow"><img src="//badges.instagram.com/static/images/ig-badge-16.png" alt="Instagram"></a>

    <!-- s vlastní třídou -->
    <a class="button_instagram" href="https://instagram.com/simplia?ref=badge"><img src="//badges.instagram.com/static/images/ig-badge-16.png" alt="Instagram"></a>


==========
Trustpilot
==========

Zobrazení skóre z Trustpilot

Není potřeba do šablony vkládat nic dalšího - javascript se vloží automaticky na všech stránkách, kde je widget zobrazen.

.. csv-table:: Atributy **instagram-follow**
    :header: "Atribut", "Hodnota", "Popis"

    **theme**, *string*, vzhled widgetu
    **width**, *string*, šířka (včetně jednotek nebo procent)
    **height**, *string*, výška (včetně jednotek nebo procent)

.. code-block:: html+twig

    <i:trustpilot /> {# minimální zápis #}
    <i:trustpilot height="25px" width="100%" theme="light" class="button_instagram" /> {# vlastní třída (jakákoliv) #}

.. code-block:: html

    <!-- vygenerovaný kód - může se měnit! -->

    <div class="trustpilot-widget" data-locale="en-US" data-template-id="5419b6a8b0d04a076446a9ad" data-businessunit-id="5c4719c7745e98000197e08b" data-style-height="24px" data-style-width="100%" data-theme="light"> <a href="https://www.trustpilot.com/review/gentlemanstore.hu" target="_blank" rel="noopener">Trustpilot</a> </div>