HTML Implementation


Widget Level Options

The basic format for creating an HTML version of our sharing tools is as follows

 <div class="pw-widget" data-{name}="{value}">
     {Button Code Here}

All attributes are set with prefix data- only. The possible values for {name} can be found in the Name column. Possible values for {value} cab be found in the Values column.

If an invalid name or value are used, or if one is not specified the value in the Default Value column will be used.


Name Values Default Value Comment/Description
url http or https URL current page URL Ability to specify a URL to be shared instead of the current page.
image http or https URL to an image none Ability to specify an image to be shared on compatible social channels such as pinterest.
Note: for the pinterest button to track sharing activity an image must be specified.
title custom string value "your custom title here" current page title Ability to set a custom title.
via twitter username po_st Display your own twitter handle at the end of tweets.
horizontal vertical
Parameter defining the button layout.
horizontal - buttons aligned horizontally.
vertical - buttons aligned vertically.
square rounded circle 0 - 99999

Radius Setting (does not affect native buttons)
square - Corners will not be rounded
rounded - Corners will have a 5px rounded edge
circle - Round icons
0-99999 — Use an integer in the range from 0 to 99999 to customize the amount of rounding applied.

size 32
20 32 48 64

Widget buttons size. (does not affect native buttons)

true false vertical horizontal

Setting to enable counters for each button (not all buttons support counters)
true - counters are enabled and layout affects their view
false - counters are disabled
vertical - counters in vertical view
horizontal - counters in horizontal view

true false

Ability to display the channel name next to an icon inside of a button.

true false 0-99
auto full

auto - predefined button size and button spacing.
full - buttons will stretch to fill the size of the container they are in.
(This feature only works for Horizontal layouts) If using the jumbo counter in full view it has fixed width and does not extend.


Ability to set color for icon and button text.
default - Standard social channel colors.
HEX Color - #000000
RGB(A) Color - rgb(193, 66, 66) or rgba(255,0,0,0.3)

default none HEX Color RGB(A) Color

Ability to set color for the button background.
default - Standard social channel colors.
none - Removes background color to leave only the icons and text.
HEX Color - #000000
RGB(A) Color - rgb(193, 66, 66) or rgba(255,0,0,0.3)

true false

Enable button hover effect.
Valid for desktops only (not for mobile devices).

true false

Enable/Disable the Jumbo counter.

first last

Determines the position of the jumbo counter.

first - To the left of horizontal or above vertical buttons
last - To the right of horizontal or below vertical buttons

true false

When this value is set to true sharing will occur in a new browser tab. When set to false shares will occur in a popup window.

Twitter 640x480
Facebook 640x480
Linkedin 600x420
Pinterest 680x500
Google+ 640x480
More 640x480


Button Level Options

The basic format for creating a button within the widget is as follows

     <a class="pw-button-{service}"></a>

Additional options can be applied at the button level similarly to the widget level

     <a class="pw-button-{service}" data-{name}="{value}"></a>

For a list of services go to the social tools tab of your dashboard and update / setup your standard buttons. You'll find a list of available services there.


The following options are available at the button level (descriptions are identical to widget section)

url image title via
radius size counter label
button-color button-background    


Additional option (different from widget section)

Name Values Default Value Comment/Description
true false custom string
widget value / false

For this level you can customize the label for each button individually.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request


Powered by Zendesk