Was this article helpful?

Advanced Sharing

Last modified 11:38, 7 Jul 2014

This page dives deeper into the wealth of configuration options available for publishing feed items.

 

The Anatomy of the User Action

The user action that you publish is comprised of several elements. All elements are optional:

  • User Message - This is text entered by the user.
  • Title - The title of the posted content.
  • Subtitle - Currently supported only by Facebook.
  • Link Back - A link, which typically points to the content source.
  • Description - The entire story.
  • Media Item/s - This can be an image, a Flash file (including Video player) or an Mp3 file.
  • Action Link - You may add a link, which will appear in the links area at the bottom of the post.
  • Action Name - A text field with the action name you provide. It is used when publishing to the Activity Feed plugin.

 

 

A Full User Action Published on Facebook

Please take a look at the following user action as it appears when published on Facebook:

UserActionAnatomy1.gif

  • This post appears on the user's wall and newsfeed as well as in the newsfeed streams of the user's friends.
  • The post can be up to 500 pixels wide.
  • The title is also a "Link Back" - clicking the title will link the user to the content source.
  • The post can contain one action link with a max of 25 characters.

 

The Example Code

The following code snip creates and publishes the user action that is presented in the screenshot above:

// Constructing a UserAction Object 
var act = new gigya.socialize.UserAction();

// Setting the Title & Subtitle
act.setTitle("This is my title");
act.setSubtitle("This is my subtitle");

// Setting the Link Back
act.setLinkBack("http://www.gigya.com");

// Setting the Description
act.setDescription("This is my Description");

// Adding a Media Item (video)
var video = {
		        src: 'http://www.youtube.com/v/fzzjgBAaWZw&hl=en&fs=1',
		        previewImageURL: 'http://graphics8.nytimes.com/images/2006/01/02/science/03cute.large2.jpg',
		        type: 'flash'
		    }
act.addMediaItem(video);

// Adding an Action Link
act.addActionLink("Read More", "http://www.gigya.com");


// Publishing the User Action
gigya.socialize.showShareUI({  userAction:act });
Note: A detailed explanation of the code, including adding various media types, appears further ahead in this document.

  

The User Action Published on other Social Networks

Twitter, and LinkedIn feed items are not as rich as Facebook's newsfeed. Thus, some of the data that we set in the user action in the code above is not presented on the feed streams of these social networks. This section describes, for each social network, which data is published, how and where.

 

Twitter

The following items of the user action will appear in a Twitter tweet:

  • User Message
  • Title
  • Link Back

These items will be translated into a tweet in the following manner:

tweet = User-Message + ". " + title + ": " + Link Back URL

This is illustrated in the following screenshot, which presents the published tweet when running the code example above:

 

UserActionBasic-Twitter.gif

Note: If the total number of tweet characters is more than 140, it will be trimmed.

 

LinkedIn

When a user action is published on LinkedIn, it appears on the user's "Activities" section of the user's profile as well as in the "Updates" streams of the user's contacts. The following items of the user action will appear in a LinkedIn update:

  • User Message
  • Title
  • Description
  • Media Item (image)
  • Link Back

The following screenshot presents the update published on LinkedIn when running the code example above:

 UserAction-Adv-LinkedIn.gif

Adding a Media Item to the UserAction Object

You can include multiple media items to provide rich visual content for your post.

Use the addMediaItem(media) method on your UserAction object. The media parameter is a JSON-encoded object which contains the media's type and data.

The media object contains a type attribute, which can be one of following: 'image', 'flash' or 'mp3'; these media types render photos, Flash objects and music, respectively.

Notes:
  • For video files, use the 'flash' media type (see example below).
  • Facebook supports only one media type per post. If you add more than one media type to the UserAction object, Facebook will choose only one of these types, in the following order:

    1. image - a single image.
    2. flash -  a single Flash object.
    3. mp3 - a single mp3 file.

Each media type has a different set of attributes. In other words, the structure of the media object depends on its type. The following subsections elaborate the structure of each media type:

 

The 'image' Media Type

A media object with the type attribute set to 'image' includes the following additional attributes:

  • src - the photo URL.
  • href - the URL to which the user will be taken if she clicks the photo.

In the following example, we add an image to the UserAction object:

var image = {
		        type: 'image',
		        src: 'http://www.infozoom.ru/wp-content/uploads/2009/08/d06_19748631.jpg',
		        href: 'http://www.infozoom.ru'
		      }

act.addMediaItem(image);

Output in Facebook:

userAction_image.gif

 

The 'Flash' Media Type

A media object with the type attribute set to 'flash' includes the following additional attributes:

  • src - the URL of the Flash object to be rendered.
  • width - the width of the Flash object to be rendered.
  • height - the height of the Flash object to be rendered.
  • previewImageURL - the URL of a photo that will be displayed in place of the Flash object, until the user clicks it prompting the Flash object to play.
  • previewImageWidth - the width of the preview image.
  • previewImageHeight - the height of the preview image.

In the following example we added a Flash media item to the UserAction object:

var swf = {
		        type: 'flash',
		        src: 'http://widgets.funny4myspace.com/widgets/pickup/randompick.swf',
		        width: '800',
		        height: '400',
		        previewImageURL: 'http://funny4myspace.com/widgets/pickup/thumbnail.gif',
		        previewImageWidth: '200',
		        previewImageHeight: '90'
		 }

act.addMediaItem(swf);

Output in Facebook:

UserAction-FlashPrev.gifUserAction-Flash.gif

By default, the photo and the Flash object are rendered in a space 30 pixels high and 100 pixels wide. The optional fields, width, height, previewImageWidthand previewImageHeight can be used to override the default choices.

The previewImageHeight must be an integer between 30 and 100, inclusive, and the previewImageWidthmust be one of three numbers: 100, 110, or 130. If the height provided is not in the [30, 100] range, it will be scaled so as to fit into the range. If the width specified is other than 100, 110, or 130 it will be replaced with the closest of the three permitted values.

The maximum dimensions of the Flash object to be rendered are 320px wide and 260px high and the minimum dimensions are 30px wide and 30px high.

 

The 'mp3' Media Type

A media object with the type attribute set to 'mp3' includes the following additional attributes:

  • src - The URL of the MP3 file to be played.
  • title, artist and album - Strings that describe the MP3 file.

In the following example, we added an MP3 media item to the UserAction object:

var mp3 = {
		        type: 'mp3',
		        src: 'http://www.looptvandfilm.com/blog/Radiohead%20-%20In%20Rainbows/01%20-%20Radiohead%20-%2015%20Step.MP3',
		        title: '15 Step',
		        artist: 'Radiohead',
		        album: 'In Rainbows'
		    }

act.addMediaItem(mp3);

Output in Facebook:

UserAction-Mp3Prev.gifMP3 preview.

UserAction-Mp3.gifWhen the preview is clicked, Facebook opens its MP3 player.

 

For Video Files - use the 'Flash' Media Type

In the following example, we added a video media item to the UserAction object:

var video = {
		        type: 'flash',
		        src: 'http://www.youtube.com/v/fzzjgBAaWZw&hl=en&fs=1',
		        previewImageURL: 'http://graphics8.nytimes.com/images/2006/01/02/science/03cute.large2.jpg'
		    }
act.addMediaItem(video);

Output in Facebook:

UserAction-VideoPrev.gif

UserAction-Video.gif

 

Output in Messenger:

Messenger presents the preview image of the video. When clicking it, the video opens in a different window (similar to the behavior of Flash objects).

Publishing the User Action

The following Gigya API methods accept a UserAction object as a parameter and publish it to social networks:

  • The Share Bar plugin (socialize.showShareBarUI method) - displays a bar with different buttons for sharing content to various destinations.
  • The Share plugin (socialize.showShareUI method) - displays a Share dialog, which gives the user an option to publish the Action to various social networks.
  • The socialize.publishUserAction method publishes a User Action to the Newsfeeds of all the connected providers that support this feature. Use this method if you would like to design your own user interface and publish user action without using our Share plugin. Instead of publishing to all the connected social networks, you may customize this behavior, and define the social networks to which you wish to publish. Learn more below.
  • The Reactions Bar plugin (socialize.showReactionsBarUI method) - displays a 1-click reaction buttons bar, allowing users to easily react to posts or content on your site and share their reaction to the social networks. Please refer to the Reactions Plugin guide, which is a step-by-step guide for integrating the Reactions plugin and also provides a reference and guide for the various customization options.
  • The Comments plugin (comments.showCommentsUI method) - the plugin displays commenting streams (or Rating & Reviews stream). When submitting a comment/review, the plugin gives an option to share the action to multiple social networks.

 

Customizing the List of Destinations

You may customize the list of publishing destinations, using the enabledProviders and disabledProviders parameters of the API method. The parameters receive a comma-separated list of providers to include/exclude.
For example:

  • Assuming we would like to support publishing only to Facebook and Twitter, we will define our params object as follows:
    var params = { 
        userAction: act,
        enabledProviders: "facebook,twitter"
    };
  • Assuming we would like to support publishing to all of the social networks except LinkedIn, we will define our params object as follows:
    var params = { 
        userAction: act,
        disabledProviders: "linkedin"
    };

Valid provider names: 'facebook', 'twitter', 'linkedin''orkut', 'qq', 'renren', 'sina', 'vkontakte'.
 

Working Examples

  • In the Share Bar plugin demo you may find a complete working example of a share bar that is used to publishes user actions. You may view the code, run it and view the outcome.
  • In Publish Newsfeed Stories you will find a complete working example of a web-page/widget that publishes user actions using the socialize.publishUserAction method.
  • In the Share Plugin demo you will find a complete working example of a web-page/widget that publishes user actions using the Share plugin.
Was this article helpful?
Pages that link here
Page statistics
14275 view(s) and 10 edit(s)
Social share
Share this page?

Tags

This page has no custom tags set.

Comments

You must to post a comment.

Attachments