Table of contents
- 1. Description
- 2. Syntax
- 3. Method Parameters
- 4. Code Sample
Description
Displays the Follow Bar plugin, which is comprised of one or more "follow us" buttons arranged in a horizontal or vertical bar.
The plugin enables users on the site to follow news and keep updated through different communications channels, such as a Facebook page, a Twitter account, newsletter, blog, etc. 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 through which the user can also follow.
Note: If you plan on integrating the Follow Bar plugin, we highly recommend reading the Follow Bar plugin in the Developer's Guide, which is a step-by-step guide for integrating the Follow Bar plugin and also provides a reference and guide for the various customization options.
Syntax
gigya.socialize.showFollowBarUI(params)
Method Parameters
The following table lists the params object members:
| Required | Name | Type | Description |
| Required | buttons | array | An array of FollowButton objects. |
| containerID | string | An ID of a <DIV> element on the page in which you want to display the plugin. | |
| Optional | layout | string | Sets the arrangement of buttons in the bar. The values May be:
|
| buttonTemplate | string (HTML) | Defines an HTML template representing the design of a single button. Using this parameter you may override the default design of a single button. The HTML template supports the following placeholders: $iconURL, $iconSize, $provider. | |
| iconSize | integer | The size of the icons displayed in the plugin. The default value is 32. | |
| Events Registration Parameters: | |||
| onFollowClicked | function ref | A reference to an event handler function that will be called when a follow action has taken place. | |
| onLoad | function ref | A reference to an event handler function that will be called when the plugin has finished drawing itself. | |
FollowButton Object
A JSON-encoded object representing a single button in the Follow Bar:
| Required | Field Name | Type | Description | |
| Required | provider | string | The provider name. The supported providers are facebook, facebook-subscribe, twitter, email, rss, linkedin, linkedin-follow, googleplus, pinterest, youtube, spiceworks, foursquare, and custom (for defining a custom button). | |
| Optional | action | string | The action to take when a button is clicked. The optional values for this parameter are:
Note: Pinterest, Youtube, and Spiceworks support only action='window', and facebook-subscribe supports only action='dialog'. | |
| actionURL | string | The URL to open when the button is clicked. The URL can open in a new window (action='window'), or be redirected from the current one (action='redirect'), or open via a provider-specific dialog that opens on the page (action='dialog'). This parameter is required or optional based on the action and the provider choice. If the action is either 'window' or 'redirect', an actionURL is required. The actionURL can be ignored when it is not required, e.g. the provider is twitter and the action is dialog. When the provider is:
| ||
| iconURL | string | The URL of the icon to display on the button. Gigya provides a default icon per provider, except for provider custom, so for provider custom you should provide an iconURL , otherwise the button will be displayed without an icon. | ||
| title | string | The text to be displayed as the title of the dialog that opens on mouse-over when action='dialog'. | ||
| This following field is relevant only if provider='twitter' and action='dialog': | ||||
| followUsers | string | A comma-separated list or an array of strings with a list of Twitter users to follow. | ||
| This following field is relevant only if provider='foursquare' | ||||
| fuid | string | This field is Required.The foursquare user ID, assigned through the actionURL parameter. | ||
| userName | string | The foursquare user name (optional parameter). | ||
| This following field is relevant only if provider='linkedin-follow' | ||||
| showCounts | string | If a counter is supported, this parameter determines if and where to display the counts in relation to the follow button. The options are:
| ||
| This following field is relevant only if provider='email' and action='dialog': | ||||
| confirmationText | string | The text that will appear on the dialog to confirm validation. If the validation is successful and you provide a default confirmation text with this parameter, the user will see this confirmation text on the dialog. | ||
onFollowClicked Event Data
| Field | Type | Description |
| button | FollowButton | The object representing the Follow button that has been clicked. |
| response | string | The response from the social network (where available).
|
onLoad Event Data
| Field | Type | Description |
| eventName | string | The name of the event. |
| source | string | The source plugin that generated this event. The value of this field is the name of the plugin's API method, e.g. 'showLoginUI', 'showCommentsUI', etc. |
| context | object | The context object passed by the application as parameter to the API method, or null if no context object has been passed. |
Code Sample
var params = {
containerID: 'bar1',
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: 'window'
},
{
provider: 'rss',
actionURL: 'http://blog.gigya.com/feed/',
action: 'window'
},
{
provider: 'email',
confirmationText:'Thank you for following us',
action: 'dialog'
}
]
}
gigya.services.socialize.showFollowBarUI(params); Notes:
- This sample is not meant to be fully functional code. For brevity's sake, only the code required for demonstrating the API call itself is presented.
- To run the code on your own domain, add your Gigya API key to the socialize.js URL. A Gigya API key can be obtained on the Site Dashboard page on Gigya's website. Please make sure that the domain from which you are loading the page is the same domain name that you used for generating the API key.
In the Follow Bar Plugin demo you will find a complete working example, which uses the socialize.showFollwBarUI method. You may view the code, run it and view the outcome.
Comments