Floating Share Widget
This guide covers the configuration details for a floating share widget
Read the complete documentation for setting up a share widget here.
Outline
Basic
The basic tab consists of all the required configuration parameters.
Field | Description | Default | Accepted Values |
---|---|---|---|
Widget Name | This must be a unique name to identify your widget. | widget-<EPOCH> | string |
Select Social Sharing Providers | This field contains the list of social providers whose share button is to be displayed. Click on the Add Button button below to add a provider to the list or cross icon in the right to remove the field. | Facebook, Twitter, Email | Select from the list of supported providers. |
Design
You can customize your widget's look and feel in this tab.
Buttons
Field | Description | Default | Accepted Values |
---|---|---|---|
Size | Size of the widget. | medium(32*32) | large(48*48) , medium(32*32) , small(16*16) |
Button Color | The background color for share buttons. Provider default color is used when this field is blank. | HTML color values | |
Icon Color | The provider icon color for share buttons. Provider default color is used when this field is blank. | HTML color values | |
Rounded Corners | Add round shape to the share buttons. Dragging the seek bar to the right adds rounded corner and to the left adds a rectangular corner. | 0 | 0-20 |
Animations
Field | Description | Default | Accepted Values |
---|---|---|---|
Entrance | Customize how your widget should enter the page. | none | none , fade-in , slide-in , zoom-in |
Hover | Customize your widget behavior when being hovered.background - change the button background color.grow - slightly expand your button background. | none | none , background , grow |
Counters
Counter
Display the share counts on your widget button.
Field | Description | Default | Accepted Values |
---|---|---|---|
Type | The type of share count to display.None - Do not display the share count.Individual - Show share count on each button.Total - Display only the total share count for the widget.Individual & Total - Show individual share count on the buttons as well as the total share count for the widget. | None | None , Individual , Total , Individual & Total |
Minimum Share Count | Display the share count only when the individual or total share count is greater than or equal to this value. | 0 | > 0 |
Layout
Desktop
Field | Description | Default | Accepted Values |
---|---|---|---|
Hide On Desktop | Hide the widget when being rendered in a desktop screen. | false | true , false |
Position | The position where your widget should render. | left | left ,right |
Top Offset | It is the top padding in percentage w.r.t the current viewport height while positioning the widget in the site. | 0 | > 0 |
Mobile
Field | Description | Default | Accepted Values |
---|---|---|---|
Hide On Mobile | Hide the widget when being rendered in a mobile screen. | false | true , false |
Position | The position where your widget should render. | bottom | top , bottom |
Rules
Show Only On These URLs
This field allows you to configure conditional widget render based on the current page URL.
By default no rules are added i.e. your widget can be rendered in any site as long as it is active and social9 is integrated.
Click on the Add Rule
button to add a rule. Once added, you can delete the rule by clicking on the Dustbin
icon to the right of the Path
input field.
Field | Description | Default | Accepted Values |
---|---|---|---|
When URL | Select the URL match condition.Contains - When the current URL contains the entered Path value.Equals - When the current URL exactly matches the entered Path value.Ends with - When the current URL has the entered Path value as suffix.Regex - When the current URL matches with the regex entered in the Path value.Starts with - When the current URL matches has the entered Path value as prefix. | Contains | Contains , Equals , Ends with , Regex , Starts with |
Path | The path value to match with the current URL based on the condition selected for When URL option. | string |
Custom Share URL
This field is useful if you want to control which URL is shared on the social media via the widget. By default, the current page URL is shared.
For example,
- You have a blog site say
https://myblog.com
which has an article with path/posts/my-awesome-article
. - By default, when a user clicks on any share button, this url will be shared
https://myblog.com/posts/my-awesome-article
. - However this article was also published in one of the old blog site of yours which is immensly popular say
https://my-oldblog.com
. And you want to include that URL in your new site. - Now if you add
https://my-oldblog.com/posts/my-original-awesome-article
to the Custom Share URL field, any share via the widget is going to include this URL instead of the current page URL.
Please Note
When this field is not empty, the widget will always share the input value instead of the current URL path.
Save Your Settings
That's it! Now click on the Add Widget
or Update Widget
button available at the bottom of your Widget Configuration Tabs pane to save your settings.
On successful save, you should be redirected to
- installation page, while adding a widget
- configuration page, while updating a widget