Was this article helpful?

Activity Feed

Last modified 12:32, 6 Oct 2014

The Activity Feed plugin allows users to see the latest actions on a site, according to who performed the actions.

The plugin presents:

  • A tab per each group. The groups are: 'Everyone', 'Friends', and '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 the latest actions for that group.
  • The activity feed refreshes its content anytime the page is loaded.
  • The feed is cached for 24 hours, except for the 'Friends' feed, which is cached for 5 minutes.

 

StreamUI.gif

 

Note: This plugin may be integrated in JavaScript environment only.

 

Basic Implementation

To integrate the Activity Feed plugin in your web page, simply activate the socialize.showFeedUI API method. Use the default settings to "get up and running" or customize it to match your requirements by adjusting the plugin parameters.

See the following example for a basic integration of the Activity Feed plugin in a simple web page:

Basic Running Example

 

The Example Code

<html>
<head>
	<SCRIPT type="text/javascript" lang="javascript" 
	  src="http://cdn.gigya.com/JS/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
	</SCRIPT>
    <title>Gigya Socialize Demo  - Activity Feed Plugin</title>

    <script type="text/javascript">

 		// Publish an Activity Feed internally (only to site scope)
		// This method is associated with the "btnPublishAction" click
		function publishFeed() {

		    // Constructing a UserAction Object
		    var act = new gigya.socialize.UserAction();	    
			act.setLinkBack("http://gigya.com"); // Adding a Link Back		
			act.setTitle("This is my title"); // Setting the Title			
			act.setDescription("This is my Description"); // Setting the Description
			act.addMediaItem( { // Adding a Media (image)
	            src: 'http://www.cherrybam.com/graphics/graphics-cute/cute004.gif',
	            href: 'http://www.cherrybam.com/',
	            type: 'image'
			 });
		    
		    // Parameters for the publishUserAction method, 
			var params = 
			{
			    userAction:act, // including the UserAction object
			    scope: 'internal', // the Activity Feed will be published internally (site scope) only (not to social networks).
				privacy: 'public',
				callback:publishAction_callback
			};
			
            // Publish the User Action
			gigya.socialize.publishUserAction(params);

		}
		
		// Display a status message according to the response from publishUserAction.
		function publishAction_callback(response)
		{
			switch (response.errorCode )
			{
				case 0:
					document.getElementById('status').style.color = "green";
					document.getElementById('status').innerHTML = 
							"Activity Feed item published, and will be presented shortly on the Activity Feed Plugin.";
					break;
				default:
					document.getElementById('status').style.color = "red";
					document.getElementById('status').innerHTML = 
							"Unable to send Feed item. status=" 
					        + response.errorCode + "; " + response.errorMessage + ";<br />" 
							+ "Please make sure you are logged in to Gigya. You may log in using the Login Plugin inside the 'Me' tab above" ;
			}
		}


 
        // Logout from Gigya platform. This method is activated when "Logout" button is clicked 
        function logoutFromGS() {
                gigya.socialize.logout(); // logout from Gigya platform      
        }
    </script>

</head>
<body>
    <h3>Activity Feed Plugin Demo</h3>
    <div id="ActivityFeed"></div>

    <script type="text/javascript">

    // show the Activity Feed Plugin inside the 'ActivityFeed' <div>:
	gigya.socialize.showFeedUI({containerID: 'ActivityFeed'}); 

    </script>
    <br />
    <br />
	Click the button below to publish an Activity Feed item:<br />
	(Please make sure you are logged in to Gigya, you may log in using the Login Plugin on the "Me" tab above)<br />
    <input type=button id="btnPublishAction" onclick="publishFeed()" value="Publish" />
    <div id="status"></div>

    <br />
    <br />
	Click the button below to logout from Gigya platform:<br />
    <input id="btnLogout" type="button" value="Logout" onclick="logoutFromGS()"/>

</body>
</html>
 

 

Code Explanation

Activate the showFeedUI API Method

// show the Activity Feed Plugin inside the 'ActivityFeed' <div>:
gigya.socialize.showFeedUI({containerID: 'ActivityFeed'});

The socialize.showFeedUI API method has a single required parameter - the containerID. Set the containerID parameter with the identifier of the DIV? in which you wish to embed the plugin.

 

Feed Item's Scope

When publishing feed items, by default the feed items are published to social networks only and will not appear on the Activity Feed plugin.

To change this behavior, you must change the publish scope. Publish scope options are:

  • Internal: the feed item will be published inside the site scope only and will appear on the Activity Feed plugin.
  • External (default): the feed item will be published externally to social networks and will appear on social networks' feed streams (but not on the site's Activity Feed plugin).
  • Both: the feed item will be published internally to the site and externally to social networks. The feed item will appear both on social networks' feed streams and on the site's Activity Feed plugin.

 

Set the scope parameter of the socialize.publishUserAction method with one of the following values: 'internal' or 'both'.

For example:

// Constructing a UserAction Object
var act = new gigya.socialize.UserAction();
act.setTitle("This is the title");   // Setting the Title
...
			
var params = 
{
    userAction:act,  // including the UserAction object
    scope: 'both'    // the user action will be published both to social networks and to the site's newsfeed.
};

// Publishing the User Action			
gigya.socialize.publishUserAction(params);

 

To learn more about publishing newsfeeds please read the Share Content chapter of the Developer's Guide.

 

Customizations

The Activity Feed plugin is highly customizable. In this section we elaborate on several of the customization options. For advanced customization options and plugin style (CSS) adjustments, please consult Gigya's support team. You can 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. 

 

Activity Feed Action Name

You can add the User's name and an Action Name that will appear on the activity feeds, before the title & description:

NewsfeedUI-action.gif

 Add this action name by setting the setActionName for the specific UserAction object that you construct:

 For example:

// Constructing a UserAction Object
var act = new gigya.socialize.UserAction();
act.setActionName("This is the action name");   // Setting the Action Name
...
			
var params = 
{
    userAction:act  // including the UserAction object
};

// Publishing the User Action			
gigya.socialize.publishUserAction(params);

Note: If you do not set an action name, the user name and action name will not appear on the activity feed.

 

Feed Item's Privacy Levels

When publishing feed items, you may define the publish privacy level. The privacy level determines how the feed item is presented in each of the Activity Feed plugin tabs.

The privacy levels are:

  • Public - Public items appear in all tabs with the publisher's identity (user name and image).
  • Friends - Friends items appear in the 'Friends' and 'Me' tabs with identity, and anonymously in the 'Everyone' tab.
  • Private (default) - Private actions appear in the 'Me' tab, and anonymously in the 'Friends' and 'Everyone' tabs. An exception to this rule is if the item has been shared to social networks, then it will be presented as "identified" (with user name and image) in the 'Friends' tab.
     

NewsfeedUI-privacy.gif

 

To set the privacy level of a feed item, set the privacy parameter of the socialize.showShareUI / socialize.publishUserAction method with one of the following values: 'public','friends','private'.

 

For example:

// Constructing a UserAction Object
var act = new gigya.socialize.UserAction();
act.setTitle("This is the title");   // Setting the Title
...
			
var params = 
{
    userAction:act,  // including the UserAction object
    privacy: 'friends'  // the user action will appear in the 'Friends' and 'Me' tabs with identity, 
                                // and anonymously in the 'Everyone' tab of the site's Activity Feed Plugin.
};

// Publishing the User Action			
gigya.socialize.publishUserAction(params);

 

To learn more about publishing newsfeeds please read the Share Content chapter of the Developer's Guide.

 

 

Configuring the Inner Components

The Activity Feed plugin embeds the following inner plugins:

  • Login plugin: When selecting the 'Friends' or 'Me' tab, if the user is not connected to any social network, the tab will provide an interface for the user to connect.
    NewsfeedUI-defaultLogin.gif
  • Friend Selector plugin: When the user selects the 'Friends' tab while 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. The supported providers for the Selector plugin are Twitter, LinkedIn, and Yahoo.
    Friend_selector.jpg

 

Both of these plugins are customizable. In this section you will learn how to adjust these plugins to your needs.

 

The enabledProviders and disabledProviders Parameters

Using this pair of parameters you can define which social networks will be included in the inner plugins. By default the following social networks are included: 'facebook', 'twitter', 'yahoo', 'messenger', 'linkedin'.

For example:

  • Assuming we would like to support only Facebook and Myspace, we will define our params object as follows:
    var params = { 
        containerID: 'ActivityFeedDiv',
        enabledProviders: "facebook,myspace"
    };
  • Assuming we would like to support all of the social networks except LinkedIn, we will define our params object as follows:
    var params = { 
        containerID: 'ActivityFeedDiv',
        disabledProviders: "linkedin"
    };

This definition would influence both the Login plugin, which will present icons only of the selected social networks, and the Friend Selector, which will present friends only of the selected social networks.

 

Customizing the Login UI

You can configure the Login interface to be one of the following:

  1. Gigya's Login Plugin - This is the default login interface (see screenshot above). Read below how to customize Gigya's Login plugin.
     
  2. Custom Login plugin - The custom plugin shows a "Sign in" and a "Register" buttons: 
    NewsfeedUI-CustomLogin.gif
    Read below how to set the custom Login plugin, how to register to the buttons' click events and how to customize these buttons.

 

Adjusting Gigya's Login Plugin

You may change the design of Gigya's Login plugin with the help of the Login Plugin Wizard. The wizard lets you modify some settings while previewing the changes as you make them. Based on your modifications, the wizard generates code that you can insert into your own application.

 

Please follow these steps: 

Step 1: Using the Wizard, design the Login plugin matching your needs. The changes take effect immediately so you can see a preview of your design.

Step 2: From the generated code, all you need is the XML string (see screenshot below):

NewsfeedUI-LoginUIConfig.gif
 

Step 3: In your application, add the loginUIConfig parameter to your params object, and set it with the XML string you have copied from the wizard:

var params=	{
    containerID: 'ActivityFeedDiv',  // The ID of the <DIV> element on the page in which the plugin should be displayed.    

    // Changing the default Login Plugin Design
    loginUICongif: ''<config><body><controls><snbuttons buttonsize="35"></snbuttons></controls>
                 <background background-color="#CACACA" frame-color="Transparent"></background></body></config>''    
}

gigya.socialize.showFeedUI(params)

 

The 'Custom' Login Plugin

By default the Activity Feed plugin will show Gigya's Login plugin (option 1). To present the custom login interface, please assign the loginUI parameter with the value 'custom':

var params=	{
    containerID: 'ActivityFeedDiv',  // The ID of the <DIV> element on the page in which the Plugin should be displayed.                  
    loginUI:'custom'   // Changing the default Login UI to the Custom login UI
}

gigya.socialize.showFeedUI(params)

 

Registering to the buttons' click events

To register to the "Sign in" and a "Register" buttons click events, please use the onRegisterClick and onSigninClick parameters, as shown in the following example: 

var params=	{
    containerID: 'ActivityFeedDiv',  // The ID of the <DIV> element on the page in which the plugin should be displayed.                  
    
    // register to the "Sign In" button click
    onSigninClick: function(eventObj) {
			alert("Sign in button has been clicked");	
		}

    // register to the "Register" button click
    onRegisterClick: function(eventObj) {
			alert("Register button has been clicked");	
		}

}

gigya.socialize.showFeedUI(params)

 

Changing the buttons' images

You may substitute the default images which are presented on the 'Login' & 'Register' buttons, as shown in the following example:

var params=	{
    containerID: 'ActivityFeedDiv'  // The ID of the <DIV> element on the page in which the Plugin should be displayed.                  
    ,loginUI:'custom'   // Changing the default Login UI to the Custom login UI
    ,signinCustomLoginUIButtonImageURL:    "http://wikifiles.gigya.com/images/loginIcon.gif"  // Changing the default 'Login' button image   
    ,registerCustomLoginUIButtonImageURL:  "http://wikifiles.gigya.com/images/registerIcon.gif"  // Changing the default 'Register' button image
}

gigya.socialize.showFeedUI(params)

A screenshot of the resulting plugin:

NewsfeedUI-CustomLoginImages.gif

 

 

Using the Plugin to Initiate Site Login

Please read the Using Plugins to Initiate Site Login guide to learn how to integrate the Activity Feed plugin with the Social Login process and leverage the plugin to acquire new site users.

  

 

Customizing Friends Invitation

After the user selects friends in the Friend Selector and presses the "OK" button, Gigya will send the selected friends an invitation to visit your site.

The invitation message is by default: "Hi - I just visited this site and thought you would find it interesting: $invitationURL", where $invitationURL is replaced with your site URL.

You may customize the invitation text and the URL, using the invitationText and the invitationURL parameters.

The invitation text may include the '$invitationURL' string, which will be replaced with the value of the invitationURL parameter.

For example:

var params=	{
    containerID: 'ActivityFeedDiv',  // The ID of the <DIV> element on the page in which the Plugin should be displayed.    

    // Changing the default invitation text and URL
    invitationText: "Hi, I'm using $invitationURL, please join me.",  
    invitationURL: "www.mySite.com/welcome"
}

gigya.socialize.showFeedUI(params)

 

Site Restrictions

Gigya offers you the option to manage a custom black list of words and phrases to be filtered in activity feeds, and to block IP addresses. You can read more in the Site Restrictions section, or go directly to the Site Restrictions on Gigya's site.

Tags

This page has no custom tags.
This page has no classifications.

Comments

You must to post a comment.

Attachments