Was this article helpful?

socialize.showFollowBarUI

Last modified 11:38, 15 Sep 2014

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.

 

 follow_bar_tw.gif

 

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:
  • 'horizontal' (default)
  • 'vertical'
  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:
  • 'window' (default) - When the button is clicked, the actionURL opens in a new window.
  • 'redirect' - When the button is clicked the current page is redirected to the actionURL.
  • 'dialog' - When the mouse hovers over the button, a provider-specific dialog opens. When the mouse moves away the dialog closes. The providers that are supported for this action are facebook, facebook-subscribe, twitter and email.

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:
  • 'right' (default)
  • 'top'
  • 'none'
  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).
  • For provider 'email' - the response is the email
  • For provider 'twitter' - the response is Twitter's Intent Event Object
  • For provider 'facebook' - the response is Facebook's Response Object
  • For popup/new tab buttons - the response is an empty object

 

onLoad Event Data

Field Type Description
eventName string The name of the event.
sourcestringThe 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.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.

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

Tags

This page has no custom tags.

Comments

You must to post a comment.

Attachments