HTML Implementation

Follow

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}
</div>

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.
@YourTwitter
layout
horizontal vertical
horizontal
Parameter defining the button layout.
horizontal - buttons aligned horizontally.
vertical - buttons aligned vertically.
radius
square rounded circle 0 - 99999
square

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)

counter
true false vertical horizontal
false

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

label
true false
false

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

padding
true false 0-99
 
false
view
auto full
auto

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.

button-color
default

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)

button-background
default none HEX Color RGB(A) Color
default

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)

hover
true false
false

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

jumbo
true false
false

Enable/Disable the Jumbo counter.

jumbo-position
first last
first

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

share-new-window
true false
true

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.

Name
Size
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

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

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

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

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
label
true false custom string
widget value / false

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

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

Comments

Powered by Zendesk