Was this article helpful?

Share Plugin

Last modified 09:37, 10 Nov 2014

See it in Action

Check Out the Code

<html>
<head>
    <style>
	 body {font-family:Arial;font-size: 12px; background-color:#fff; line-height:20px}
	</style>
	<SCRIPT type="text/javascript" lang="javascript" 
	   src="http://cdn.gigya.com/JS/socialize.js?apikey=2_Y82PzwJ_chSFImHXaIDJClnLyJzmk-VFOavSsaNTzl6m901s_NNxRAS0xJ3bd3_N">
	</SCRIPT>
    <script type="text/javascript">

        // Create and Publish User's Action
        // This method is associated with the "btnPublishAction" click
        function showShareUI(operationMode) {
		    // Constructing a UserAction Object
		    var act = new gigya.socialize.UserAction();

		    // Setting the title and description 
		    // (will be presented in the preview on the Share UI)
		    act.setTitle("Gigya - Make your site social.");
		    act.setSubtitle("An overview video");
		    act.setDescription("Gigya's technology makes websites social, integrating online businesses with"
		        + " the top social networks using Facebook Connect, Twitter for Websites, " 
		        + "LinkedIn, Foursquare and more.");

            // Setting a link back to the publishing source
		    act.setLinkBack("http://info.gigya.com/GigyaVideoOverviewForm.html");

		    // Adding Action Link
		    act.addActionLink("Gigya site", "http://www.gigya.com");
	    
			
			// Adding an image (will be presented in the preview on the Share UI)
	        var image = {
	            src: 'http://info.gigya.com/rs/gigya/images/gigyaN-logo.gif',
	            href: 'http://info.gigya.com/GigyaVideoOverviewForm.html',
	            type: 'image'
	        };
			
			act.addMediaItem(image);

			// Parameters for the showShareUI method, including the UserAction object
			var params = 
			{
			    userAction: act  // The UserAction object enfolding the newsfeed data.	
				,operationMode: operationMode// Opens the Share Plugin either in Simple or Multiselect mode according to the user connection status. 
			    ,snapToElementID: "btnShare" // Snaps the Simple Share Plugin to the share button
				,onError: onError  // onError method will be summoned if an error occurs. 
			    ,onSendDone: onSendDone // onError method will be summoned after 
			                        // Gigya finishes the publishing process.
				,context: operationMode			
				,showMoreButton: true // Enable the "More" button and screen
				,showEmailButton: true // Enable the "Email" button and screen
			};

			// Show the "Share" dialog
			gigya.socialize.showShareUI(params);

		}
		
		// onError event handler
		function onError(event) {
		    alert('An error has occured' + ': ' + event.errorCode + '; ' + event.errorMessage);
		}

		// onSendDone event handler. 
		// Displays in the status field, the list of providers to which the newsfeed has been 
		// successfully published.
		function onSendDone(event)
		{
		    document.getElementById('status').style.color = "green";
			switch(event.context)
			{
				case 'multiSelect':
					document.getElementById('status').innerHTML = 'The newsfeed has been posted to: '  + event.providers;
					break;
				case 'simpleShare':
					document.getElementById('status').innerHTML = 'Clicked '  + event.providers;
					break;
				default:
					document.getElementById('status').innerHTML = 'Share onSendDone' ;
			}
		}
    </script>

</head>
<body>
    <h4>Please click on one of the buttons below to open the "Share" dialog:</h4>
    <input type=button id="btnShare" onclick="javascript:showShareUI('multiSelect')" value="Advanced Share" />&nbsp;&nbsp;
	<input type=button id="btnShare" onclick="javascript:showShareUI('simpleShare')" value="Simple Share" />
    <div id="status"></div>
</body>
</html>

Note:
In order to make this code work in your environment, please:
  • Click the "view source" icon (link located above code on the right hand side) - This will open a popup window with a text version of the code, which you may copy.
  • The API key in the sample will only work on http://localhost/...
  • To load the page from your domain, modify the value of the "APIKey" field in the code to your own Gigya API Key. 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.

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

Tags

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

Comments

You must to post a comment.

Attachments