Share Bar

Special Twitter Button Parameters

You can configure the Twitter Tweet button so that:

• After tweeting, you can suggest to the user to follow related accounts, by using the 'related' parameter.
• You can assign the screen name of the user to whom to attribute the Tweet, by using the 'via' parameter.

Define a ShareButton object with 'provider', 'related', and 'via' fields:

shareButtons: 
[    
    { // Twitter Tweet button
        provider:'twitter-tweet',
        related: 'betabeat,youtube',
        via:'etayg'
    } 
]

The following Twitter window includes the screen name of the user to whom to attribute the Tweet, i.e. @etayg, and two recommended related accounts:

The Twitter Tweet button has additional optional parameters you can use. Please refer to the ShareButton object reference socialize.showShareBarUI for the entire list of optional parameters.

Vertical Layout

To arrange the buttons in a vertical bar instead of a horizontal bar, add the layout parameter to the Share Bar plugin's parameters, with the value 'vertical':

var params ={ 
	userAction:ua,
	shareButtons:'share,facebook,twitter,email', // list of providers
	containerID: 'divButtons',
    layout:'vertical',
};

Counters on Top

To display the counters above the corresponding buttons instead of on their right, add the showCounts parameter to the Share Bar plugin's parameters, with the value 'top':

var params ={ 
	userAction:ua,
	shareButtons:'share,facebook,twitter,email', // list of providers
	containerID: 'divButtons',
    showCounts:'top',
};

In the same manner you can display the Share Bar without counters, by adding the showCounts parameter to the Share Bar plugin's parameters, with the value 'none'.

No Button Borders

To arrange the buttons without button borders, add the noButtonBorders parameter to the Share Bar plugin's parameters, with the value 'true':

var params ={ 
	userAction:ua,
	shareButtons:'share,facebook,twitter,email', // list of providers
	containerID: 'divButtons',
    noButtonBorders:true,
};

Applying a New Button Design

If you wish to apply your own design to the share bar buttons, override the default design by using buttonImages parameter of the socialize.showShareBarUI method. The buttonImages parameter expects a JSON object with a set of fields (all optional). Each field defines a button image part. Following are the basic fields:

• buttonLeftImgUp - An image for the left part of the button
• buttonCenterBGImgUp - An image for the center part of the button
• buttonRightImgUp - An image for the right part of the button

To replace the default button images with your alternative images, set these fields with URLs to the corresponding images.

Add the buttonImages parameter to the Share Bar parameters with your own button images:

var params ={ 
	userAction:ua,
	shareButtons:'share,facebook,twitter,email', // list of providers
	containerID: 'divButtons',
    buttonImages:{buttonLeftImgUp:'Button_Left.png',buttonCenterBGImgUp:'Button_Middle.png',buttonRightImgUp:'Button_Right.png'}
    };

You may also define images to the 'Disabled' 'Mouse over' and 'Down' states of the button, using the corresponding fields of the buttonImages parameter:

• buttonLeftImgDisabled, buttonCenterBGImgDisabled, buttonRightImgDisabled -  Images for Disabled button (left, center and right).
• buttonLeftImgOver, buttonCenterBGImgOver, buttonRightImgOver - Images for Mouse Over state (left, center and right).
• buttonLeftImgDown, buttonCenterBGImgDown, buttonRightImgDown - Images for Down state (left, center and right).

For example:

buttonImages:{buttonLeftImgUp:'Button_Left.png',buttonCenterBGImgUp:'Button_Middle.png',buttonRightImgUp:'Button_Right.png', 
      buttonLeftImgDown:'Button_Left_Down.png',buttonCenterBGImgDown:'Button_Middle_Down.png',
      buttonRightImgDown:'Button_Right_Down.png',buttonLeftImgDisabled:'Button_Left_Disabled.png',
      buttonCenterBGImgDisabled:'Button_Middle_Disabled.png',buttonRightImgDisabled:'Button_Right_Disabled.png',
      buttonLeftImgOver:'Button_Left_Over.png',buttonCenterBGImgOver:'Button_Middle_Over.png',
      buttonRightImgOver:'Button_Right_Over.png'
}

Button and Counter

To design a button and counter with a yellow background, add the following to the <head> section of your page:

<style> #divButtons .gig-share-button-container {background-color:yellow;} </style>

Button

To design a button with a green background, add the following to the <head> section of your page:

<style> #divButtons .gig-share-button {background-color:green;}</style>

In this example, the button is without borders to allow the green background to be more visible.

Button Label

To design a button label with a red background, add the following to the <head> section of your page:

<style>#divButtons .gig-share-button-text {background-color:red;} </style>

Counter

To design a button counter with a purple background, add the following to the <head> section of your page:

<style> #divButtons .gig-share-counter {background-color:purple;} </style>

Counter Value

To design a counter value with a blue background, add the following to the <head> section of your page:

<style> #divButtons .gig-share-counter-text {background-color:blue;} </style>

Additional Classes

In addition, you can further customize your share bar buttons using the following classes:

• gig-button-up
• gig-button-down
• gig-button-over
• gig-button-disabled

For example, add the following to the <head> section of your page to change the button text to yellow when the button is disabled:

<style>#divButtons .gig-button-disabled .gig-share-button-text {color:yellow} </style>