Social Components
Facebook Share button
Button for sharing on Facebook (see documentation). The href attribute contains the object to share on Facebook. You do not enter a URL directly -- instead you provide the object, and the URL is generated automatically.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of facebook-share
| Attribute | Value | Description |
|---|---|---|
| href | object | object to share |
| layout | box_count, button_count, button, link, icon_link, icon | appearance |
<i:facebook-share href="zbozi" layout="button_count" /> {# minimal notation #}
<i:facebook-share href="zbozi" layout="button_count" class="button_facebook" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<div class="fb-share-button" data-href="https://example.org/category/product-link" data-layout="button_count"></div>
<!-- with custom class -->
<div class="fb-share-button button_facebook" data-href="https://example.org/category/product-link" data-layout="button_count"></div>Facebook Like button
Button for like/recommend on Facebook (see documentation). The href attribute contains the object to share on Facebook. You do not enter a URL directly -- instead you provide the object, and the URL is generated automatically.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
The href attribute can optionally contain a direct Facebook page URL instead of an object (i.e., it must start with https://www.facebook.com/...). However, instead of this option we recommend using the Page Plugin (below).
Attributes of facebook-like
| Attribute | Value | Description |
|---|---|---|
| href | object | object to share |
| layout | standard, button_count, button, box_count | appearance |
| action | like/recommend | button label |
| colorscheme | light/dark | box appearance |
| share | true/false | add a "share" button |
| show-faces | true/false | display profile pictures |
| small-header | true/false | display a smaller header |
| width | number | width |
| lazy | true/false | browser's lazy-loading, default = "true" |
<i:facebook-like href="zbozi" layout="standard" /> {# minimal notation #}
<i:facebook-like href="zbozi" layout="standard" class="button_facebook" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<div class="fb-like" data-href="https://example.org/category/product-link" data-layout="standard"></div>
<!-- with custom class -->
<div class="fb-like button_facebook" data-href="https://example.org/category/product-link" data-layout="standard"></div>Facebook Follow button
Button for following on Facebook (see documentation). The href attribute contains the page/profile URL.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of facebook-follow
| Attribute | Value | Description |
|---|---|---|
| href | object | object to share |
| layout | standard, button_count, box_count | appearance |
| colorscheme | light/dark | box appearance |
| size | large/small | box appearance |
| show-faces | true/false | display profile pictures |
| width | number | width |
<i:facebook-follow href="https://www.facebook.com/simplia.cz" layout="standard" /> {# minimal notation #}
<i:facebook-follow href="https://www.facebook.com/simplia.cz" layout="standard" class="button_facebook" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<div class="fb-follow" data-href="https://www.facebook.com/simplia.cz" data-layout="standard"></div>
<!-- with custom class -->
<div class="fb-follow button_facebook" data-href="https://www.facebook.com/simplia.cz" data-layout="standard"></div>Facebook Page Plugin
A box displaying the shop's Facebook page (see documentation). The href attribute contains the Facebook page URL -- only the base URL without additional parameters.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of facebook-page
| Attribute | Value | Description |
|---|---|---|
| href | string | Facebook page URL |
| href-config | string | slave config variable name for href |
| width | number | width (180-500) |
| height | number | height (130+) |
| hide-cover | true/false | hide cover |
| show-facepile | true/false | display profile pictures |
| show-posts | true/false | display page posts |
| lazy | true/false | browser's lazy-loading, default = "true" |
<i:facebook-page href="https://www.facebook.com/simplia" /> {# minimal notation #}
<i:facebook-page href="https://www.facebook.com/simplia" class="button_facebook" /> {# custom class (any) #}
<i:facebook-page href-config="facebookUrl" /> {# URL is populated from the config variable facebookUrl #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<div class="fb-page" data-href="https://www.facebook.com/simplia"></div>
<!-- with custom class -->
<div class="fb-page button_facebook" data-href="https://www.facebook.com/simplia"></div>Facebook Comments
Facebook comments (see documentation). The href attribute contains the object to share on Facebook. You do not enter a URL directly -- instead you provide the object, and the URL is generated automatically.
Attributes of facebook-comments
| Attribute | Value | Description |
|---|---|---|
| href | object | object to share |
| width | number, 100% | width |
| colorscheme | light/dark | box appearance |
| order-by | social, reverse_time, time | sort order |
| num-posts | number | number of posts |
| mobile | true/false | simplified display |
<i:facebook-comments href="zbozi" /> {# minimal notation #}
<i:facebook-comments href="zbozi" class="comments_facebook" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<div class="fb-comments" data-href="https://example.org/category/product-link" ></div>
<!-- with custom class -->
<div class="fb-comments comments_facebook" data-href="https://example.org/category/product-link" ></div>Facebook Message Us
"Message Us" button (see documentation). The App Id and Page Id must be configured in the shop settings for the button to display.
Attributes of facebook-message-us
| Attribute | Value | Description |
|---|---|---|
| color | blue/white | button appearance |
| size | standard/large/xlarge | button size |
<i:facebook-message-us /> {# minimal notation #}
<i:facebook-message-us class="message_facebook" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<div class="fb-messengermessageus" messenger_app_id="APP_ID" page_id="PAGE_ID"> </div>Facebook Login button
Button for logging in via Facebook. The configured GDPR text is automatically appended below the button.
Attributes of facebook-login
| Attribute | Value | Description |
|---|---|---|
| button-img | url | button image URL |
| button-text | string | button text |
| button-class | string | login form CSS class |
<i:facebook-login /> {# minimal notation #}
<i:facebook-login button-img="/images/facebook-button.png" class="facebook_login" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<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>Note on the Twitter to X rebrand
The i:twitter-share and i:twitter-follow components retain their original names from before the rebrand to X. Use the existing i:twitter-* names in templates.
Twitter Share
Button for sending a tweet (see documentation). The href attribute contains the object to share on Twitter. You do not enter a URL directly -- instead you provide the object, and the URL is generated automatically.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of twitter-share
| Attribute | Value | Description |
|---|---|---|
| href | object | object to share |
| size | medium, large | button size |
| count | none, horizontal, vertical | display share count |
| via | string | account |
| text | string | tweet text |
| related | string | related accounts |
<i:twitter-share href="zbozi" /> {# minimal notation #}
<i:twitter-share href="zbozi" class="button_twitter" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<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>
<!-- with custom class -->
<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
Button for following a Twitter account (see documentation). The href attribute contains the account name.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of twitter-follow
| Attribute | Value | Description |
|---|---|---|
| href | string | account name |
| size | medium, large | button size |
| show-count | true, false | display share count |
| show-screen-name | true, false | display account name |
| align | left, right | alignment |
| width | number | width in percent or px |
<i:twitter-follow href="simplia" /> {# minimal notation #}
<i:twitter-follow href="simplia" class="button_twitter" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<a class="twitter-follow-button" href="https://twitter.com/simplia" data-lang="cs">Follow @simplia</a>
<!-- with custom class -->
<a class="twitter-follow-button button_twitter" href="https://twitter.com/simplia" data-lang="cs">Follow @simplia</a>Pinterest Share button
Button for sharing on Pinterest.com (see documentation). The href attribute contains the object to share on Pinterest. You do not enter a URL directly -- instead you provide the object, and the URL is generated automatically.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of pinterest-share
| Attribute | Value | Description |
|---|---|---|
| href | object | object to share |
| type | rect, round | button type |
| size | large, small | button size |
| color | red, gray, white | button color |
| count | none, above, beside | share count |
| icon | true/false | display icon |
When using the circular button type, the share count cannot be displayed and the color cannot be changed.
<i:pinterest-share href="zbozi" type="rectangular" /> {# minimal notation #}
<i:pinterest-share href="zbozi" type="rectangular" class="button_pinterest" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<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>
<!-- with custom class -->
<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
Button for following a Pinterest account (see documentation). The href attribute contains the account name.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of pinterest-follow
| Attribute | Value | Description |
|---|---|---|
| href | string | account name |
<i:pinterest-follow href="simplia" /> {# minimal notation #}
<i:pinterest-follow href="simplia" class="button_pinterest" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<a href="https://www.pinterest.com/simplia/" data-pin-do="buttonFollow" >Simplia</a>
<!-- with custom class -->
<a class="button_pinterest" href="https://www.pinterest.com/simplia/" data-pin-do="buttonFollow" >Simplia</a>Pinterest Profile
Widget for embedding a Pinterest profile (see documentation). The href attribute contains the account name.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of pinterest-profile
| Attribute | Value | Description |
|---|---|---|
| href | string | account name |
| image-width | int | image width |
| board-width | int | widget width |
| board-height | int | widget height |
<i:pinterest-profile href="simplia" /> {# minimal notation #}
<i:pinterest-profile href="simplia" class="button_pinterest" /> {# custom class (any) #}
<i:pinterest-profile href="simplia">Sledujte nás na Pinterest.com!</i:pinterest-profile> {# custom fallback message #}<!-- generated output - subject to change! -->
<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
Button for following an Instagram account. The href attribute contains the account name.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the button is displayed.
Attributes of instagram-follow
| Attribute | Value | Description |
|---|---|---|
| href | string | account name |
<i:instagram-follow href="simplia" /> {# minimal notation #}
<i:instagram-follow href="simplia" class="button_instagram" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<!-- minimal notation -->
<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>
<!-- with custom class -->
<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
Display the Trustpilot score.
No additional code needs to be added to the template -- the JavaScript is injected automatically on all pages where the widget is displayed.
Attributes of trustpilot
| Attribute | Value | Description |
|---|---|---|
| theme | string | widget appearance |
| width | string | width (including units or percent) |
| height | string | height (including units or percent) |
<i:trustpilot /> {# minimal notation #}
<i:trustpilot height="25px" width="100%" theme="light" class="button_instagram" /> {# custom class (any) #}<!-- generated output - subject to change! -->
<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>