Page History

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
SEO Metadata

The Share Bar plugin add-on allows you to easily place in your site a bar with different buttons for sharing content to social destinations. The Share Bar plugin add-on is built out of one or more buttons, arranged horizontally.

...

Introduction

The Share Bar plugin allows add-on allows you to easily place in your site a bar with different buttons for sharing content to social destinations. The Share Bar plugin is add-on is built out of one or more buttons, arranged horizontally. Each button represents a direct bookmark destination, a general share button, or an email button.

Once a user clicks a direct bookmark button, the window of the provider will be opened for direct bookmarking. Once a user clicks the general share button, the Simple Share mode of the Share plugin will add-on will popup, enabling your user to share and bookmark content and site activities to selected social destinations.

The Share Bar buttons may be displayed with or without counters, representing the number of shares. 
For more information regarding the counters, refer to the socialize.getProviderShareCounts API method.

You can use the Share Bar Wizard to customize the visual aspects of the Share Bar plugin design add-on design, view, and grab the customized code.

...

This document is a step-by-step guide for integrating the Share Bar plugin and add-on and also provides a reference and guide for the various customization options. For convenience, we have divided this document into levels of complexity:

 

Quick Start Implementation

Include Page
Template_gigya setup sn app
Template_gigya setup sn app

Implementation Overview

Adding the Share Bar plugin is add-on is simple, and involves only adding a few lines of code:

  • Step 1: Define the action fields for the share item. The newsfeed item that is published to the social networks is constructed from the fields of this object.
    This can be done either by co
    nstructing a UserAction object, or by adding Open graph meta-tags to your HTML, though it is recommended to implement both.
  • Step 2: Define the Share Bar plugin add-on's params object, including a comma-separated list of providers, representing the buttons to display in the share bar.

Code Example

Add the following code snip to the of your page to activate the Share Bar plugin that add-on that is presented in the screenshot above:

 
Code Block
languagejs
linenumberstrue
<DIV id=divButtons></DIV> <!-- Share Bar Pluginadd-on DIV Container -->

<script language="javascript">
    // Step 1: Construct a UserAction object and fill it with data
	var ua = new gigya.socialize.UserAction(); 
	ua.setLinkBack("http://www.youtube.com/watch?v=jqxENMKaeCU"); 
	ua.setTitle("HOME");

    // Step 2: Define the Share Bar pluginadd-on's params object   	
	var params ={ 
		userAction:ua,
		shareButtons:'facebook-like,google-plusone,share,twitter-tweet,email', // list of providers
		containerID: 'divButtons',
        cid:''
	};

    // Step 3: Load the Share Bar pluginadd-on: 
    gigya.socialize.showShareBarUI(params);
</script> 

 

...

 

Panel
borderColor#81C0FC
bgColor#F4F7FC
borderWidth1
borderStylesolid

Note: In addition to 'User object', you must define Open Graph Tags on pages that use the Share pluginShare add-on. Defining the share data using only 'User object' is not recommended, as some social networks use OG-Tags for page scraping.
Set up the tags to get a better structured news feed post on Facebook ('like'), Twitter and Google (+1), and invoke the 'share' dialog by adding facebookDialogType: 'share' to the params object, as the default 'Feed dialog' was deprecated by Facebook. In addition to OG tags, some sites support extended tagging schemas. Read more on how to define OG and extended tags on the 'Content Sharing' page

 

Step 2: Define the Share Bar

...

add-on's parameters

Code Block
languagejs
linenumberstrue
 var params = { 
	userAction:ua,
	shareButtons:'facebook-like,google-plusone,share,twitter-tweet,email', // list of providers
	containerID: 'divButtons',
    cid:''
};

The Share Bar plugin has add-on has three required parameters:

  • containerID - The identifier of the DIV element, where the Share Bar plugin should add-on should be embedded.
  • shareButtons- The list of providers.
  • userAction - The userAction object that we have created in Step 1.
  • facebookDialogType - Options are: 'share' (default) or 'feed'. The 'share' dialog will scrape the post data from the open graph tags defined on the page, while the 'feed' dialog will use data from the 'user action object'. 

...

Code Block
languagejs
linenumberstrue
 var params ={ 
	userAction:ua,
	shareButtons:
	[
		{ // General Share Button
			provider:'share',
			tooltip:'General Share Button',
			userMessage:'default user message'
		},
		{ // Google +1 button
			provider:'google-plusone',
			tooltip:'Recommend this on Google',
			userMessage:'default user message'
		},
		{ // Facebook Like button
			provider:'facebook-like',
			tooltip:'Recommend this on Facebook',
			action:'recommend',
			font:'arial'
		},
		{ // Twitter Tweet button
			provider:'twitter-tweet',
			tooltip:'Share on Twitter',
			defaultText:'Twitter message'
		},
		{ // Email button
			provider:'email',
			tooltip:'Email this',
			iconImgUp:'http://mySite.com/images/myEmailIcon.gif',
            iconImgOver:'http://mySite.com/images/myEmailIconOver.gif'
         }
	],
	containerID: 'divButtons',
    cid:''
};

The plugin has add-on has additional optional parameters you can use. Please refer to the method's parameters table for the entire list of optional parameters.

Step 3: Invoke the Share

...

Bar add-on

Call the socialize.showShareBarUI API method:

...

A Working Example

In the Share Bar plugin demo add-on demo you may find a complete working example of a share bar that is used to publish user actions. You may view the code, run it and view the outcome.

...

When using the general share button in the Share Bar plugin add-on, the default Share dialog that is displayed is the Simple Share dialog. You can change this to the multiple selection share, which is the more elaborate Share Plugin add-on.

Change the simple share to multiple selection share by adding the optional operationMode parameter to the Share Bar parameters, with the value 'multiSelect':

...

The general share button will now trigger the full Share Plugin add-on:

 

 You can now use the Share Bar plugin with add-on with the full Share plugin capabilities add-on capabilities. Please refer to the Share Plugin Guide add-on Guide for further reading. 

 

Share Bar UI in Mobile View

...

In order to display the Facebook Like button, define a ShareButton object or string with 'facebook-like' as the provider. If you wish to display the button in a different language, the language needs to be set in the socialize JS URL before the plugin is add-on is loaded. Learn about this in Localization Support for 3rd Party Plugins add-ons.

Twitter Tweet Button

Special Twitter Button Parameters

...

Code Block
languagejs
linenumberstrue
// Define an image media item:
var image = {
  type: 'image',
  src: 'http://www.infozoom.ru/wp-content/uploads/2009/08/d06_19748631.jpg',
  href: 'http://www.infozoom.ru'
  };

// Define a UserAction onject
var ua = new gigya.socialize.UserAction();
ua.addMediaItem(image);

// Define Share Bar pluginadd-on's Parameters
var shareBarParams = {
  userAction:ua,
  shareButtons: "share,stumbleupon,pinterest,email,twitter-tweet,google-plusone,facebook-like",
  containerID: 'divButtons' // location of the Share Bar pluginadd-on
};

// Load Share Bar pluginadd-on
gigya.socialize.showShareBarUI(shareBarParams);

...

 

Panel
borderColor#81C0FC
bgColor#F4F7FC
borderWidth1
borderStylesolid

Note: If you want to add the Pin It button to mobile apps, please refer to Pinterest's documentation:

 

Share Bar

...

add-on Customization

The Share Bar design can be customized using:

...

You can customize the Share Bar plugin using add-on using the following socialize.showShareBarUI method parameters:

...

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

...

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

...

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

...

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

...

Code Block
languagejs
linenumberstrue
var shareBarParams = { 
        shareButtons:
        [
            { // General Share Button
                provider:'share',
                tooltip:'General Share Button',
            },
            { // Google+ 
                provider:'google',
                tooltip:'Recommend this on Google',
                iconImgUp:'www.exampleImages.com/googleShare.ico'
            },
            { // Facebook
                provider:'facebook',
                tooltip:'Recommend this on Facebook',
                iconImgUp:'www.exampleImages.com/facebookShare.ico'
            },
        ],
        userAction:ua,
        containerID: 'shareBar'
    };
    // Load Share Bar pluginadd-on
    gigya.socialize.showShareBarUI(shareBarParams);

HTML Elements Style (CSS) Classes

Any elements on the plugin that add-on that has an ID can be overridden with supported style attributes. You may use Firebug to identify an HTML element on the plugin and add-on and assign a new style to it. Please make sure to use the plugin add-on's container ID when assigning style, so it will not affect other elements on the page.

...