Was this article helpful?

socialize.showFeedUI

Last modified 14:22, 12 May 2014

Description

Displays an "Activity Feed" plugin. The plugin allows users to see the latest actions on your site for different groups. 

Note: If you plan on integrating the Activity Feed plugin, we highly recommend reading the Activity Feed Plugin page, which is a step-by-step guide for integrating the Activity Feed plugin and also provides a reference and guide for the various customization options.

 

The plugin presents:

  • A tab per each group. The groups are: Everyone, Friends, Me. You can customize the order of the tabs and the initial active tab, using the tabOrder and initialTab parameters.
  • Each tab presents a title and list of latest actions for that group. 

Plugin's Default Design:

StreamUI.gif

The plugin's design is customizable through the use of the parameters listed below. For advanced customization options and plugin style (CSS) adjustments, please contact us by filling in a support form on our site. You can also access the support page by clicking "Support" on the upper menu of Gigya's site.

 

Syntax

gigya.socialize.showFeedUI(params)

 

Method Parameters

The following table lists the params object members:

   

Required Name Type Description
Required containerID string An ID of a <DIV> element on the page in which you want to display the plugin.
Optional width integer Determines the width in pixels you desire for the plugin.
  height integer Determines the height in pixels you desire for the plugin.
  siteName string Your site name. This string will be planted into various headers of the plugin (for more information read the Activity Feed Plugin documentation).
  tabOrder string A comma delimited list of tabs names that defines which tabs to show and the tabs order. The optional tabs names are: 'everyone', 'friends', 'me'. The default value of this parameter is:  "everyone,friends,me".
  initialTab string Defines which tab would be initially active. The optional values for this parameter are: 'everyone', 'friends', 'me'. The default is: 'everyone'.
  feedID string The purpose of this parameter is to support multiple Feed Streams with different feeds on the same domain. You may give a different feedID to different Activity Feed Plugins in your site. The Activity Feed Plugin will show only User Actions that were published with the same feedID (please refer to the same parameter in the showShareUI and the publishUserAction methods).
If this parameter is not set, the Activity Feed Plugin will show User Actions that were published without feedID (default).
  dateFormat string The format of the date. The days, months, and years can be represented as follows: 
  • %d - a one-digit representation of the day of the month, 1-31
  • %dd -  a two-digit representation of the day of the month, 01-31
  • %M - a one-digit representation of the month, 1-12
  • %MM - a two-digit representation of the month, 01-12
  • %MMM -  the abbreviated name of the month, e.g. Jun, Jul
  • %MMMM - the full name of the month, e.g. July, August
  • %yy - a two-digit representation of the year, 01-99
  • %yyyy - a four-digit representation of the year, 2013

For example: dateFormat: "%d/%M/%yy" - > 29/5/12, or dateFormat: "%MMMM %d, %yyyy" - > May 29, 2012.

  context object A reference to a developer created object that will be passed back unchanged to the event handlers as one of the fields of the eventObj (see extended explanation in the "Plugin Events" section below).
  borderColor string
(color)
The color of the plugin's border, can be specified by:
  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000" 
  separatorColor string
(color) 
The color of the separator line between feed items, can be specified by:
  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000" 
Inner Plugins' Configuration    
  enabledProviders string A comma delimited list of providers that should be displayed on this plugin. Valid provider names include: 'facebook', 'twitter', 'yahoo', 'messenger', 'linkedin', 'myspace', 'orkut', 'foursquare', 'renren', 'vkontakte'.
For example, if you would like this plugin to show only the icons of Facebook and Twitter, define: enabledProviders="facebook,twitter".
Note: the value of this parameter overrides the value of the identical parameter in the global configuration object.
  disabledProviders string A comma delimited list of providers that should not be displayed on this plugin. Valid provider names include: 'facebook', 'twitter', 'yahoo', 'messenger''linkedin', 'myspace', 'orkut', 'foursquare', 'renren', 'vkontakte'.
For example, if you would like this Plugin to show all providers icons but LinkedIn and Twitter, define: disabledProviders="linkedin,twitter".
Note: the value of this parameter overrides the value of the identical parameter in the global configuration object.
  loginUI   When the user selects the 'Friends' or 'Me' tab while being logged-out, the tab will provide interface for the user to login. Using this parameter, you may determine which login UI will be presented in such case. We provide two options: 
  • default - Gigya's Login Plugin.
  • 'custom' - A Plugin showing 'Sigh In' and 'Register' buttons. Each button creates an event that you can catch. Read more in the Customizing the Login UI documentation.
  loginUIConfig string (XML) An XML string describing changes to the default design of the Login Plugin. Read more in the  Adjusting Gigya's Login Plugin documentation
  signinCustomLoginUIButtonImageURL &
registerCustomLoginUIButtonImageURL
URL Using these pair of parameters, you may substitute the default images which are presented on the 'Login' & 'Register' buttons on the 'Custom' Login Plugin. These pair of parameters are relevant only in conjunction with setting the loginUI parameter to 'custom'. Read more in the Changing the buttons' images documentation.
  invitationText string When the user selects the 'Friends' tab while being logged in and there are no friends actions, the tab will present the Friend Selector Plugin on the tab so the user can invite friends. Using this parameter you may define the invitation message text. The text may include '$invitationURL', which will be replaced with the site URL or the value of the invitationURL parameter (see below). The invitation message default text is: 'Hi - I just visited this site and thought you would find it interesting: $invitationURL'
  invitationURL URL A link back URL that will be inserted into invitation sent to friends. 
  invitationSubject string The subject of the invitation sent to friends (see invitationText parameter above).
  sessionExpiration integer This parameter defines the time in seconds that Gigya should keep the login session valid for the user. To end the session when the browser closes, please assign the value '0'. If this parameter is not specified, the session will be valid forever.
  cid string A string of maximum 100 characters length. The CID sets categories for transactions that can be used later for filtering reports generated by Gigya in the "Context ID" combo box. The CID allows you to associate the report information with your own internal data. For example, to identify a specific widget or page on your site/application. You should not define more than 100 different context IDs.
Note: the value of this parameter overrides the value of the identical parameter in the global configuration object.
 Events Registration Parameters  
  onLoad function ref A reference to an event handler function that will be called when the plugin has finished drawing itself.
  onError function ref A reference to an event handler function that will be called when an error occurs.
  onRegisterClick function ref A reference to an event handler function that will be called when the custom Register Button has been clicked (read more in the The 'Custom' Login Plugin documentation).
  onSigninClick function ref A reference to an event handler function that will be called when the custom Signin Button has been clicked (read more in the The 'Custom' Login Plugin documentation)

 

Plugin Events

An Event Handler is a JavaScript function with the following signature:

functionName(eventObj)

The single argument, eventObj, contains information about the event and has different fields for different events.

The following tables specify the list of fields available in the eventObj for each event:

 

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.

 

onError 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.
errorCode integer The result code of the operation. Code '0' indicates success, any other number indicates failure. For a complete list of error codes, see the Error Codes table.
errorMessage string A short textual description of an error, associated with the errorCode, for logging purposes.
errorDetails string This field will contain the exception info, if available.

 

onRegisterClick 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.

 

onSigninClick 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.

 

Global Event Triggered

By using this plugin, the following global events may be triggered: onLogin,  onConnectionAdded and onConnectionRemoved.

To register an event handler use the socialize.addEventHandlers API method. Please refer to the Events page in the Developer Guide - to learn more about how to handle events generated by the Gigya service.

 

Code Sample

var params = {
    //General parameters
    containerID: 'ActivityFeedDiv'  // The ID of the <DIV> element on the page in which the plugin should be displayed.
                                                   // (we assume here the definition of a <DIV> element named 'ActivityFeedDiv' )
    ,width:'300'  //width in px
    ,height:'400' //height in px
    ,siteName:'Activity Feed Demo' //site name
    ,tabOrder:'me,friends,everyone' //comma separated list, e.g. "everyone,friends,me"
    ,initialTab:'me' //string which tab would be initially active, "me"
    ,borderColor:'#aaaaaa'    //hex value, e.g. #ff0000
    ,separatorColor:'#000000' //hex value, e.g. #ff0000

     //Inner plugin configuration
    ,enabledProviders:'facebook,twitter,yahoo,linkedin' //comma separated list, e.g. "facebook,myspace,twitter,yahoo,linkedin"
    ,disabledProviders:'myspace' //comma separated list, e.g. "facebook,myspace,twitter,yahoo,linkedin"
    ,loginUI:'default' //login Plugin used 'default' or 'custom'
    ,loginUIConfig:'<config><body><captions background-color="#52A4DA" color="#FFFFFF"></captions><texts color="#353535"><links color="#0000FF"></links></texts><controls><snbuttons color="#000000"></snbuttons><scrollingarrow color="#BBE4FF"></scrollingarrow></controls><background frame-color="Transparent"></background></body></config>' //UI XML
    ,invitationText:"Come chat with me" //invitation text
    ,invitationURL:'http://wikifiles.gigya.com/Socialize/NewsfeedUI_Example2.htm' //link back URL in invitation
    ,cid:'newsfeed demo' //context id to tag data
};

gigya.socialize.showFeedUI(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 Activity Feed Plugin demo you will find a complete working example which uses the socialize.showFeedUI method. You may view the code, run it and view the outcome.

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

Tags

This page has no custom tags set.

Comments

You must to post a comment.

Attachments