Was this article helpful?

Follow Bar

Last modified 12:19, 20 Jul 2014

Introduction

The Follow Bar plugin allows you to easily place in your site a bar with different buttons for following news and keeping updated through different communications channels, such as a Facebook page, a Twitter account, a newsletter, a blog, etc. The Follow Bar plugin is built out of one or more buttons, arranged horizontally or vertically in a bar. Each button represents one of the supported providers:

follow_bar_normal.gif

Once a user clicks one of the buttons, a "follow" action takes place; taking the user to a new window, or redirecting the user, or opening a provider-specific dialog.

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

  

What's in this Guide?

This document is a step-by-step guide for integrating the Follow Bar plugin and also provides a reference and guide for the various customization options. For convenience, we have divided this document into sections:

Quick Start Implementation

Implementation Overview

Adding the Follow Bar plugin is simple, and involves only adding a few lines of code:

 

Code Example

Add the following code snip to the <body> of your page to activate the Follow Bar plugin that is presented in the screenshot above:

 
<DIV id=divButtons></DIV> <!-- Follow Bar plugin DIV container -->
<script>

  // Step 1: Define the Follow Bar plugin's params object   	
	var params ={ 
		containerID: 'divButtons',
                buttons:[
			{
				provider: 'facebook',
				actionURL: 'https://www.facebook.com/gigya',				action: 'dialog'
			},{
				provider: 'twitter',
				followUsers: 'gigya, gigyaDev', 
				action: 'dialog'
			},{
				provider: 'googleplus',
				actionURL:'https://plus.google.com/107788669599113247501/posts',
				action: 'window'
			},{
				provider: 'linkedin',
				actionURL: 'http://www.linkedin.com/company/gigya',
				action: 'redirect'
			},{
				provider: 'rss',
				actionURL: 'http://blog.gigya.com/',
				action: 'window'
			},{
				provider: 'email',
				confirmationText:'Thank you for following us',
				action: 'dialog'
			}
		]
	};
	
    // Step 2 Load the Follow Bar plugin: 
    gigya.socialize.showFollowBarUI(params);
</script>

 

Code Explanation 

Step 1: Define the Follow Bar plugin's parameters

var params ={ 
	containerID: 'divButtons',
        buttons:[
		{
			provider: 'facebook',
			actionURL: 'https://www.facebook.com/gigya',
			action: 'dialog'
		},
		{
			provider: 'twitter',
			followUsers: 'gigya, gigyaDev', 
			action: 'dialog'
		},
                {
			provider: 'googleplus',
			actionURL:'https://plus.google.com/107788669599113247501/posts',
			action: 'window'
		}, 
		{
			provider: 'linkedin',
			actionURL: 'http://www.linkedin.com/company/gigya',
			action: 'redirect'
		},
		{	provider: 'rss',
			actionURL: 'http://blog.gigya.com/',
			action: 'window'
		},
		{
			provider: 'email',
			confirmationText:'Thank you for following us',
			action: 'dialog'
		}
	]
};

The Follow Bar plugin has two required parameters:

  • containerID - The identifier of the DIV element, where the Follow Bar plugin should be embedded
  • buttons- The array of FollowButton objects, representing the buttons to display in the Follow bar.

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

 

Step 2: Invoke the Follow Bar plugin

Call the socialize.showFollowBarUI API method:

gigya.socialize.showFollowBarUI(params);

Like every Gigya API method, the socialize.showFollowBarUI method receives one parameter - parameters object, which is the object we have defined in Step 1. (Learn more about Gigya's Basics here). 

 

Best Practice

The code above includes an array of FollowButton objects, representing the buttons to display in the Follow bar. Each Follow Button has a required provider field and a few optional fields, including an action field. The action field indicates what action takes place when the button is clicked or on mouse-over. The three optional actions are:

  1. 'window' - A predefined URL opens in a new window. This URL can be a Facebook page, a blog, a newsletter, etc. This is the default action.
  2. 'redirect' - The current page is redirected to a predefined URL. This URL can be a Facebook page, a blog, a newsletter, etc.
  3. 'dialog' - A provider-specific dialog opens on the same page. The dialog opens on mouse-over, and closes when the mouse moves away. This action is supported by facebook, twitter, and email.

The best practice is that for providers that support it, the provider-specific dialog should open, i.e. for facebook, twitter, and email the action should be set to 'dialog'.

The following image displays the provider-specific dialogs that open on mouse over when the button's action is dialog:

 follow_bar_dialog.gif

 For the remaining providers, we recommend setting the predefined actionURLs to newsletters, blogs, site documentation, etc.

 

A Working Example

In the Follow Bar plugin demo you will find a complete working example of a Follow Bar. You may view the code, run it and view the outcome.

 

Plugin Customization

The Follow Bar design can be customized using:

 

Method Parameters

You can customize the Follow Bar plugin using the following socialize.showFollowBarUI method parameters:

  • layout - using this parameter you can arrange the buttons in a vertical bar instead of a horizontal bar
  • iconSize - using this parameter you can change the icons' size

Vertical Layout

follow_bar_vertical.gif

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

var params ={ 
	containerID: 'divButtons',
        layout: 'vertical',
        buttons:[
		{
			provider: 'facebook',
            actionURL: 'https://www.facebook.com/gigya',
			action: 'dialog'
		},
		{
			provider: 'twitter',
			followUsers: 'gigya, gigyaDev', 
			action: 'dialog'
		},	
	]
};

 

Larger Icons

follow_bar_large.gif

To increase the icon size, add the iconSize parameter to the Follow Bar plugin's parameters, with a value larger than the default 32:

var params ={ 
	containerID: 'divButtons',
        iconSize: 42,
        buttons:[
		{
			provider: 'facebook',
            actionURL: 'https://www.facebook.com/gigya',
			action: 'dialog'
		},
		{
			provider: 'twitter',
			followUsers: 'gigya, gigyaDev', 
			action: 'dialog'
		}, 
	]
};

 
Follow Button Parameters

You can further customize the Follow Bar plugin by using the following FollowButton objects parameters:

  • title - using this parameter you can add/change the text that is displayed as the title of the dialog that opens on mouse-over when action='dialog'.
  • iconURL- using this parameter you can display a different icon on the button. The default value is the provider's icon.
  • action - using this parameter you can change the action that takes place when the button is clicked
  • actionURL - using this parameter you can customize the URL to open when the button is clicked

 

New Dialog Title

follow_bar_title.gif

To change the default text that is displayed as the title of the Twitter dialog, add the title parameter to the Twitter button's parameters, with the value 'Follow Gigya':

var params ={ 
	containerID: 'divButtons',
        buttons:[
		{
			provider: 'facebook',
            actionURL: 'https://www.facebook.com/gigya',
			action: 'dialog'
		},
		{
			provider: 'twitter',
            title:'Follow Gigya',
			followUsers: 'gigya, gigyaDev', 
			action: 'dialog'
		}, 
	]
};

 

Templates

The 'buttonTemplate' parameter of the socialize.showFollowBarUI method is an HTML template representing the design of a single button, supporting the following placeholders: 

  • $iconURL

  • $iconSize
  • $provider

You may override the default design by placing new values in these placeholders.

Was this article helpful?
Pages that link here
Page statistics
7326 view(s) and 7 edit(s)
Social share
Share this page?

Tags

This page has no custom tags.

Comments

You must to post a comment.

Attachments