--- url: /social.md --- # Social Components ## Facebook Share button Button for sharing on Facebook (see [documentation](https://developers.facebook.com/docs/plugins/share-button)). 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html ``` ## Facebook Like button Button for like/recommend on Facebook (see [documentation](https://developers.facebook.com/docs/plugins/like-button)). 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"** | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ## Facebook Follow button Button for following on Facebook (see [documentation](https://developers.facebook.com/docs/plugins/follow-button)). 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ## Facebook Page Plugin A box displaying the shop's Facebook page (see [documentation](https://developers.facebook.com/docs/plugins/page-plugin)). 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"** | ```twig {# minimal notation #} {# custom class (any) #} {# URL is populated from the config variable facebookUrl #} ``` ```html

``` ## Facebook Comments Facebook comments (see [documentation](https://developers.facebook.com/docs/plugins/comments)). 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ## Facebook Message Us "Message Us" button (see [documentation](https://developers.facebook.com/docs/messenger-platform/plugin-reference/message-us)). **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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ## 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ::: info 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](https://dev.twitter.com/web/tweet-button)). 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html ``` ## Twitter Follow Button for following a Twitter account (see [documentation](https://dev.twitter.com/web/follow-button)). 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html Follow @simplia Follow @simplia ``` ## Pinterest Share button Button for sharing on Pinterest.com (see [documentation](https://business.pinterest.com/en/widget-builder#do_pin_it_button)). 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. ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ## Pinterest Follow Button for following a Pinterest account (see [documentation](https://business.pinterest.com/en/widget-builder#do_follow_me_button)). 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html Simplia Simplia ``` ## Pinterest Profile Widget for embedding a Pinterest profile (see [documentation](https://business.pinterest.com/en/widget-builder#do_embed_user)). 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 | ```twig {# minimal notation #} {# custom class (any) #} Sledujte nás na Pinterest.com! {# custom fallback message #} ``` ```html Visit Pinterest's profile on Pinterest. ``` ## 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 | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html

``` ## 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) | ```twig {# minimal notation #} {# custom class (any) #} ``` ```html ```