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.

Atributy facebook-share
Atribut Hodnota Popis
href object objekt ke sdílení
layout box_count, button_count, button, link, icon_link, icon vzhled
<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) #}
<!-- 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).

Atributy facebook-like
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
width number šířka
<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) #}
<!-- 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.

Atributy facebook-like
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
<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) #}
<!-- 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.

Atributy facebook-page
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
<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 #}
<!-- 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.

Atributy facebook-comments
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í
<i:facebook-comments href="zbozi" /> {# minimální zápis #}
<i:facebook-comments href="zbozi" class="comments_facebook" /> {# vlastní třída (jakákoliv) #}
<!-- 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.

Atributy facebook-message-us
Atribut Hodnota Popis
color blue/white vzhled tlačítka
size standard/large/xlarge velikost tlačítka
<i:facebook-message-us /> {# minimální zápis #}
<i:facebook-message-us class="message_facebook" /> {# vlastní třída (jakákoliv) #}
<!-- 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.

Atributy facebook-message-us
Atribut Hodnota Popis
button-img url adresa obrázku tlačítka
button-text string text tlačítka
return-url url cílová url po přihlášení
return-class string třída přihlašovacího formuláře
<i:facebook-login /> {# minimální zápis #}
<i:facebook-login button-img="/images/facebook-button.png" class="facebook_login" /> {# vlastní třída (jakákoliv) #}
<!-- 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.

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

Atributy twitter-share
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
<i:twitter-share href="zbozi" /> {# minimální zápis #}
<i:twitter-share href="zbozi" class="button_twitter" /> {# vlastní třída (jakákoliv) #}
<!-- 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.

Atributy twitter-follow
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
<i:twitter-follow href="simplia" /> {# minimální zápis #}
<i:twitter-follow href="simplia" class="button_twitter" /> {# vlastní třída (jakákoliv) #}
<!-- 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.

Atributy pinterest-share
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.

<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) #}
<!-- 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.

Atributy pinterest-follow
Atribut Hodnota Popis
href string název účtu
<i:pinterest-follow href="simplia" /> {# minimální zápis #}
<i:pinterest-follow href="simplia" class="button_pinterest" /> {# vlastní třída (jakákoliv) #}
<!-- 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.

Atributy pinterest-follow
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
<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 #}
<!-- 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.

Atributy instagram-follow
Atribut Hodnota Popis
href string název účtu
<i:instagram-follow href="simplia" /> {# minimální zápis #}
<i:instagram-follow href="simplia" class="button_instagram" /> {# vlastní třída (jakákoliv) #}
<!-- 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>