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 Web SDK method, in case you wish to implement your own sharing UI.
When using the bookmarking option, it is required to define Open Graph Tags in your pages that you wish to share, for a better structured news feed post on Facebook ('like') and Google (+1).
Defining the share data using a 'User object' is not recommended, since the 'Feed dialog' was deprecated by Facebook. OG-tags are the main method for page scraping.
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.
- 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 the Web SDK) 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:
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).
Defining a UserAction object
Step 1: Construct a UserAction object:
Step 2: After you have constructed the object, you can use the various UserAction member methods to set the object's fields. For example:
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 add a Media Item to 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:
Open Graph Tags
The Open Graph protocol enables any web page to become a rich object in a social graph.
When implementing Gigya's Share (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:
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.
Facebook deprecated Custom Open Graph objects on October 5th, 2016. On or around October 5th, 2017, sharing of all 'custom' Open Graph objects will cease to function. See https://developers.facebook.com/docs/sharing/opengraph/custom-open-graph-deprecation for more information.
A Working Example
Besides the Open Graph tags used by Facebook, Twitter and Google, a number of providers use an extended set of tags to extract information from the page. For example, Twitter Cards (Twitter), Rich Pins (Pinterest) and Send to Kindle (Amazon) each support extended tag schema. In order to maximize your Share Bar implementation, use extended tags when sharing content to these sites.
Twitter recognizes Open Graph tags, but also includes a number of tags specific to Twitter Cards. For a complete list, refer to Twitter's Card Markup Tag Reference. By utilizing Twitter Cards, in addition to increasing the user experience when viewing the tweeted item, you can also increase the content of your post beyond the 140 character limit of a regular tweet. Twitter Cards do not require a Twitter app and text & image Cards can be implemented immediately by simply adding the proper meta tags to the <head> section of your website.
For an overview of how to implement Twitter Cards on your site, see our Twitter Card documentation.
Pinterest recognizes Open Graph, oEmbed and Schema.org tags. For a complete list including code samples, refer to Pinterest's Rich Pins Overview.
Send to Kindle
Amazon recognizes Open Graph, Schema.org, hNews, Blogger/Blogspot and custom CSS tags. For a complete list, refer to Amazon's Send to Kindle Button for Websites.
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:
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 an Action is more customizable then Sharing a Page method:
The preview image is customizable. The customization in the code:
Note: you may define a preview image when Sharing a Page by using Open Graph Tags.
Supports subtitle. The definition of the subtitle in the code:
- A company icon is presented. The icon is defined as part of Setting Up your External Application in Facebook.
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:
Social Networks Publishing Permissions
Some social networks require the users to specifically opt in before your application or site can publish content to their behalf.
If you wish to publish stories to users profiles from your website, please follow the instructions bellow.
The instructions are for Facebook permissions, but are applicable to any social network that requires special permissions. Scroll down on the 'Permissions' page to see available permissions per social network.
Facebook Publishing Permission
To enable your app (site) to publish to Facebook, check the 'Enable publishing user actions' checkbox under the Facebook Extended info Permissions section in the Site Settings > Permissions page on Gigya's website:
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: