Was this article helpful?

Sharing Content

Last modified 08:28, 20 Feb 2014

Overview

Gigya's service includes a wide range of tools to enable your users to share content and site activities to social networks.

We divide the sharing action into two types:

Sharing a Page

Sharing a page is typically an action that is initiated by the user. The user decides that he wishes to distribute the content of a certain page.
The technology that is used in this case is bookmarking, and the Gigya tools that implement this action are:

  • The Share Bar plugin - a bar of buttons for sharing to social networks and bookmark destinations.
  • The Simple Share - a sharing dialog. This is the Share plugin in its bookmarking operation mode, which enables users to share a page to selected social networks and bookmark destinations.
  • socialize.postBookmark - a raw JavaScript API method, in case you wish to implement your own sharing UI.

When using the bookmarking option, it is highly recommended to configure Open Graph Tags.

Sharing an Action

Sharing an action is typically initiated by the site. After a user performs a share-worthy activity in your site (for example, posts a story, submits a comment) a share pop-up dialog is automatically presented, encouraging the user to post his action to social networks. The Gigya tools that implement sharing an action are:

  • The Share plugin - a pop-up dialog that gives the user an option to publish a newsfeed to multiple social networks.
  • socialize.publishUserAction - a REST API method, in case you wish to publish via your server, in an automatic offline access mode. This method is also available in JavaScript (see reference here), in case you wish to implement your own sharing UI.
  • Comments plugin - the plugin displays commenting streams. When submitting a comment, the plugin gives an option to share the action to multiple social networks.
  • Rating & Reviews plugins - when submitting a Rating & Review, the plugin gives an option to share the action to multiple social networks.
  • Reactions plugin - a one click reaction buttons bar. When clicking one of the reaction buttons, a small share dialog appears allowing users to share their reaction to multiple social networks.
  • socialize.facebookGraphOperation - a raw API method (This method is also available in JavaScript API) for making Facebook Graph API calls. This method can be used for Graph operations such as Creating and Using Graph Actions. See also Facebook's Open Graph Actions.

 When using the Sharing an Action option, you are required to grant the user's Publishing Permissions when publishing to Facebook or Google.

 

How to Specify the Data for Sharing

Whether you are using page sharing and/or action sharing, you are required to specify the data for sharing. The data consist of pieces of information that form the newsfeed that will be presented on the various social networks. Here is an example of a newsfeed posted on Facebook, and the pieces of information that form the newsfeed:

UserActionAnatomy2.gif

 

Basically specifying the data for sharing is done by Defining a UserAction object, and passing it to the sharing related methods. In addition to that, it is highly recommended to configure Open Graph Tags, when using page sharing (bookmarking).

 

Note:
If you are using the REST API, then you should define a UserAction XML, which is equivalent to the UserAction object.
If you are using one of our SDKs (Server Side SDKs or Mobile SDKs), please refer to the relevant SDK guide for more information about sharing using the specific SDK.

 

Defining a UserAction object

Step 1: Construct a UserAction object:

var userAction = new gigya.socialize.UserAction();


Step 2: After you have constructed the object, you can use the various UserAction member methods to set the object's fields. For example:

userAction.setTitle("This is my title");
userAction.setDescription("This is the textual content of my post");
...

The newsfeed that is published to the social networks is constructed from the fields of this object. All the fields of this object are optional, and the more fields you define the richer the newsfeed becomes. Learn how to Adding Media Item/s to The UserAction Object in the UserAction object to create rich newsfeed items.


Step 3: Pass the userAction object to the sharing related methods that you are using. Each of Gigya's sharing related methods, which are listed in the overview above, receive a UserAction object as a parameter. If you are integrating several Sharing plugins in a single page, it is sufficient to define a single UserAction object and pass it to several sharing related API methods. For example, if you are integrating a Share Bar plugin and a Reactions plugin in a single page:

// Define Share Bar plugin's Parameters   
var shareBarParams ={
        userAction:userAction, // the userAction object, defined in the previous step
        shareButtons: "share,email,twitter-tweet,google-plusone,facebook-like",
        containerID: 'divButtons' // location of the Share Bar plugin
}
// Load Share Bar plugin
gigya.socialize.showShareBarUI(shareBarParams);
...
    
// Define Reactions plugin's Parameters
var reactions=[ {...}, {...},...];
var reactionsParams ={ 
	userAction:userAction,  // the userAction object, defined in the previous step
        barID: 'myID',
	containerID:'textReactionsDiv',
	reactions:reactions
};	
// Load Reactions Plugin 
gigya.socialize.showReactionsBarUI(reactionsParams);
Note: the code above is partial and will not compile.

 

Open Graph Tags

The Open Graph protocol enables any web page to become a rich object in a social graph.
When implementing Gigya's Sharing a Page (e.g. the Share Bar plugin) it is extremely important to define the Open Graph tags within the page. When sharing the page to Facebook ('like'), Twitter or Google ('+1'), these networks will extract the information from the tags within the page, and use the information to build the newsfeed item. The following screenshot shows how Open Graph tags are manifested in a 'like' story on Facebook News Feed:

OpenGraphTags.png

Open Graph tags can be tested and configured using the Facebook debugger and Google's webmaster tools.

Please note that defining Open Graph tags does not replace the necessity of defining a UserAction object and passing it to the relevant Gigya's sharing API method. The data that is in the UserAction object is used to construct the newsfeed item of all the networks, except for Facebook, Twitter and Google. 

A Working Example

In the Share Bar plugin demo you may find a working example of a Share Bar plugin. The example includes the following Open Graph tags:

<!-- Open Graph Tags -->
<meta property="fb:app_id" content="51244333578">
<meta property="og:url" content="http://vimeo.com/24400434">
<meta property="og:title" content="Changing Education Paradigm by Sir Ken Robinson">
<meta property="og:type" content="article">

Demo Site Example

Please check out our live Demo Site and refer to the Demo Site Implementation Guide.
The demo site uses several of Gigya's sharing tools: Share Bar plugin, Reactions plugin, Comments plugin, Rating & Reviews plugins.
You may find definition of a single UserAction object in each of the site pages (see Main Part of the Page section of the guide). In addition you may find definition of Open Graph tags in the header.php file.

 

 

Sharing an Action vs. Sharing a Page

Take a look at the following sceenshot, taken from a Facebook News Feed stream:

Sharing_Action-vs-Page1.gif
 

In the screenshot you may see two posts that are almost identical, both share the same video. The difference between the posts is the method of sharing. The code that we used to generate these posts is our Share - working code example.
A. For the first post we used the "Advanced Share" button, which launches the Share plugin in it's default 'multiSelect' operation mode. In other words, we used Sharing an Action method.
B. For the second post we used the "Simple Share" button, which launches the Simple Share. In other words, we used Sharing a Page method.
 

Now let us look at the differences between the two posts:

Sharing_Action-vs-Page.gif
 

Sharing an Action is more customizable then Sharing a Page method:

  1. The preview image is customizable. The customization in the code:
        var video = {
               src: 'http://www.youtube.com/v/mZeWUctkblY',
               previewImageURL: 'http://cdn.gigya.com/public/Images/Solutions/Solutions_VideoImage.jpg',
               type: 'flash'
        }
    Note: you may define a preview image when Sharing a Page by using Open Graph Tags.
     
  2. Supports subtitle. The definition of the subtitle in the code:
       act.setSubtitle("An overview video");
  3. A company icon is presented. The icon is defined as part of Setting Up your External Application in Facebook
     
  4. You may define a customizable 'action link'. You may define the link's title and URL. The definition of the Action Link in the code:
        act.addActionLink("Gigya site", "http://www.gigya.com");

 

 

Social Networks Publishing Permissions

Some social networks require the users to specifically opt in before your application or site can publish content to their profiles. Please follow the instructions bellow, if you plan on publishing content to Facebook profiles.

Facebook Wall Updates Permission

Please make sure you have checked the "Enable wall updates" check box under the Facebook Permissions section in the Site Settings > Permissions page on Gigya's website:

fb_permissions.gif
 

During the Social Login process, the user is presented with a dialog in which she can authorize your application to publish posts to her Facebook profile:

Facebook-RequestPermissions-Dialog3.gif

Read more in the Facebook Setting - Permissions guide.

Tags

This page has no custom tags set.

Comments

You must to post a comment.

Attachments