SocialShare is a simple component that display a list of social button to share your content on these systems.
The usage is very simple: You can set a list of shares and than provide a custom text to share or an url. If you do not provide this informations, it takes the current url. You can also show label and counts about your share.
By default, already showing a social share button sends a request to the social media platform. At least, that's the case with FaceBook. Plus, many people are not aware that clicking a social share button informs the social media platform what they are doing. Thus, the social media platform gathers data about what you're doing in the web without giving you the option to opt out.
That, in turn, is illegal in many countries, especially in the EU.
To solve the problem, we've implemented a two-click solution. By default, the social share button is blocked by an overlay, as you can see below. Clicking the button unlocks it functionality. A second click opens the "share" window.
However, please double-check if a request is sent to the server at page load time. Among other things, it's easy to forget to set show-count
to false. Data protection also requires you to set the count attribute to false because the fetching the number of share also amount to sending
an http request to the social media platform.
NB. If you want to use the default blocking functionality, you must activate the blockUI plugin of the Bootsfaces Project,
using the web.xml parameter net.bootsfaces.blockUI(See page: Configuration)
| Attribute | Default value | Description |
|---|---|---|
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| block-message blockMessage (alternative writing) |
Click to enable sharing links | Message of the block overaly. |
| col-lg colLg (alternative writing) |
-1 | Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-md colMd (alternative writing) |
-1 | Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-sm colSm (alternative writing) |
-1 | Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| col-xs colXs (alternative writing) |
-1 | Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| disable-block disableBlock (alternative writing) |
false | Disable the block of buttons. Attention: the block is for respect of new law about social sharing. Disable at your risk. |
| display | block | If you use the "visible" attribute, the value of this attribute is added. Legal values: block, inline, inline-block. Default: block. |
| hidden | (none) | This column is hidden on a certain screen size and below. Legal values: lg, md, sm, xs. |
| large-screen largeScreen (alternative writing) |
-1 | Alternative spelling to col-lg. Integer value to specify how many columns to span on large screens (≥1200 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| medium-screen mediumScreen (alternative writing) |
-1 | Alternative spelling to col-md. Integer value to specify how many columns to span on medium screens (≥992 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| offset | (none) | Integer value to specify how many columns to offset. |
| offset-lg offsetLg (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-md offsetMd (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-sm offsetSm (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| offset-xs offsetXs (alternative writing) |
(none) | Integer value to specify how many columns to offset. |
| share-in shareIn (alternative writing) |
popup | A string specifying the name of sharing strategy. Available strategies are: blank, popup or self. Default popup. |
| shares | (none) | A list of share button to display. Is a list of comma separated values. Accepted values are: email, twitter, facebook, googleplus, linkedin, pinterest, stumbleupon, whatsapp, line. |
| show-count showCount (alternative writing) |
(none) | A true, false or inside to specifying whether and how to show share count. Default false. |
| show-label showLabel (alternative writing) |
false | A boolean specifying whether to show the text on the share button. Default false. |
| small-screen smallScreen (alternative writing) |
-1 | Alternative spelling to col-sm. Integer value to specify how many columns to span on small screens (≥768p pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| span | (none) | Integer value to specify how many columns to span on medium screens (≥992 pixels). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| style | (none) | Inline style of the input element. |
| style-class styleClass (alternative writing) |
(none) | Style class of this element. |
| text | (none) | A string specifying text to share. The content of <meta name='description'> or <title> (if first is missing) is used by default. |
| theme | flat | A string specifying the theme. Available themes are flat or minimal. Default flat. |
| tiny-screen tinyScreen (alternative writing) |
-1 | Alternative spelling to col-xs. Integer value to specify how many columns to span on tiny screens (≤ 767 pixels wide). The number may optionally be followed by "column" or "columns". Alternative legal values: half, one-third, two-thirds, one-fourth, three-fourths. |
| url | (none) | A string specifying url to share. Value of window.location.href is used by default. |
| visible | (none) | This column is shown on a certain screen size and above. Legal values: lg, md, sm, xs. |