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

small-header

true/false

zobrazit menší hlavičku

width

number

šířka

lazy

true/false

browser’s lazy-loading

default = „true“

 
<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

lazy

true/false

browser’s lazy-loading

default = „true“

 
<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

button-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>

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.

Atributy instagram-follow

Atribut

Hodnota

Popis

theme

string

vzhled widgetu

width

string

šířka (včetně jednotek nebo procent)

height

string

výška (včetně jednotek nebo procent)

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

<!-- 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>