Class s7sdk.share.FacebookShare

Extends s7sdk.common.Button.

The FacebookShare component allows user to share content to Facebook. It represents a button that, when clicked, will open a standard Facebook sharing window in a separate browser window. Component provides API to specify content URL.

This component does not currently read any modifiers.

Defining the Appearance using CSS

The CSS class for styling the FacebookShare is .s7facebookshare. This button has the following four states: up, over, down and disabled. You can style these states by adding the state attribute selector to the CSS class. It is recommended that you define common CSS under the main class and only define the necessary distinctions when you use attribute selectors.

CSS Class	Attribute Selector	Description
`.s7facebookshare`	`state=[up\|over\|down\|disabled]`	Define the appearance of `FacebookShare` button for each state.
`.s7tooltip`	(None)	A global class selector that defines appearance for the tooltips. To disable tooltips set the `display` style to `none`.

Localized Symbols

FacebookShare also has text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`FacebookShare.TOOLTIP`	Tooltip for `FacebookShare` button.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.share.FacebookShare(containerId, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `FacebookShare` component.
	setContentUrl(url) Set the url to share on Facebook.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component

Methods borrowed from class s7sdk.common.Button:: activate, blur, deactivate, dispose, focus, getHeight, getWidth, resize, setLabel

Class Detail

s7sdk.share.FacebookShare(containerId, settings, compId)

Example Code
This example demonstrates how to use sharing components in a simple viewer. In this example a ZoomView object,
a SocialShare object, an EmailShare object, a EmbedShare object, a LinkShare object, a TwitterShare
object and a FacebookShare object are created. When a user clicks the SocialShare button, a panel with all sharing components appears.
When a user clicks on individual share component (EmailShare, EmbedShare, LinkShare, TwitterShare or FacebookShare)
corresponding social sharing dialogs popups up. EmailShare, EmbedShare and LinkShare components have their own modal dialogs. 
TwitterShare and FacebookShare trigger sharing dialog from corresponding social service.

The code below does the following:

The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the SDK components.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
user interactions, changes in a component's state, etc.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!DOCTYPE html>
<!--
*
* ADOBE SYSTEMS INCORPORATED
*  Copyright 2013 Adobe Systems Incorporated
*  All Rights Reserved.
*
* NOTICE:  Adobe permits you to use, modify, and distribute this file in 
* accordance with the terms of the Adobe license agreement accompanying it. 
* If you have received this file from a source other than Adobe, then your 
* use, modification, or distribution of it requires the prior written 
* permission of Adobe.
-->
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		
		<meta name="viewport" content="width=device-width" />
		<title>SocialShare Component</title>
		<script language="javascript" type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script>
		<script language="javascript" type="text/javascript">
			s7sdk.Util.lib.include('s7sdk.common.Button');
			s7sdk.Util.lib.include('s7sdk.image.ZoomView');
			s7sdk.Util.lib.include('s7sdk.share.Share');
		</script>
		<style type="text/css">
			.s7zoomview {
				width:400px;
				height:400px;
			}

			.s7zoominbutton, .s7zoomoutbutton, .s7zoomresetbutton, .s7socialshare {
				position:absolute;
				top:410px;
			}

			.s7zoomoutbutton {
				left:30px;
			}

			.s7zoomresetbutton {
				left:60px;
			}

			.s7socialshare {
				left:350px;
			}
		</style>
	</head>
	<body>	
	
		<div id="s7container" style="position:relative;width:500px;height:500px;"></div>
		
		<script language="JavaScript" type="text/javascript">
		
			s7sdk.Util.init();
			
			var myParams = new s7sdk.ParameterManager();	//Parameter Manager	
				
			var zoomComp, zoomResetButton, zoomInButton, zoomOutButton, socialShare, emailShare, linkShare, embedShare, facebookShare, twitterShare;
			function initViewer(){	
				
				myParams.push("serverurl", "https://s7d1.scene7.com/is/image");
				myParams.push("asset", "sample/0");
				zoomComp = new s7sdk.ZoomView("s7container", myParams);	
				zoomResetButton = new s7sdk.ZoomResetButton("s7container", myParams);
				zoomInButton  = new s7sdk.ZoomInButton("s7container", myParams);
				zoomOutButton = new s7sdk.ZoomOutButton("s7container", myParams);
				
				zoomResetButton.addEventListener("click",function(){zoomComp.zoomReset();});
				zoomInButton.addEventListener("click",function(){zoomComp.zoomIn();});
				zoomOutButton.addEventListener("click",function(){zoomComp.zoomOut();});

				socialShare = new s7sdk.share.SocialShare("s7container", myParams, "socialShare");

				emailShare = new s7sdk.share.EmailShare("socialShare", myParams);
				emailShare.setContentTitle("Content title");
				emailShare.setContentUrl("https://www.adobe.com");
				emailShare.setDescription("Content description");
				emailShare.setOriginUrl("https://www.adobe.com/");
				emailShare.setThumbnail("sample/0");

				linkShare = new s7sdk.share.LinkShare("socialShare", myParams);
				linkShare.setContentUrl("https://www.adobe.com");

				embedShare = new s7sdk.share.EmbedShare("socialShare", myParams);
				embedShare.setEmbedCode(
					"<script language=\"javascript\" type=\"text/javascript\"  src=\"https://s7d1.scene7.com/s7viewers/html5/js/BasicZoomViewer.js\"></sc" + "ript>\n" +
					"<div id='basiczoom'></div>\n" +
					"<script type=\"text/javascript\">\n" +
					"var basicZoomViewer = new s7viewers.BasicZoomViewer();\n" +
					"basicZoomViewer.setContainerId(\"basiczoom\");\n" +
					"basicZoomViewer.setAsset(\"sample/0\");\n" +
					"basicZoomViewer.setParam(\"stagesize\",\"$EMBED_WIDTH$,$EMBED_HEIGHT$\");\n" +
					"basicZoomViewer.setParam(\"serverurl\",\"https://s7d1.scene7.com/is/image/\");\n" +
					"basicZoomViewer.init();\n" +
					"</s" + "cript>"
				);

				facebookShare = new s7sdk.share.FacebookShare("socialShare", myParams);

				twitterShare = new s7sdk.share.TwitterShare("socialShare", myParams);
			}			

			myParams.addEventListener(s7sdk.Event.SDK_READY,initViewer,false);
			myParams.init();	//Initialize Parameter Manager	
		</script>
	</body>
</html>

Default styles for FacebookShare:

.s7facebookshare {
	width:28px;
	height:28px;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }
.s7facebookshare[state='up'] {
	background-image:url(images/sdk/facebookbtn_up.png);
 }
.s7facebookshare[state='over'] {
	background-image:url(images/sdk/facebookbtn_over.png);
 }
.s7facebookshare[state='down'] {
	background-image:url(images/sdk/facebookbtn_over.png);
 }
.s7facebookshare[state='disabled'] {
	background-image:url(images/sdk/facebookbtn_up.png);
 }
.s7tooltip {
	position:absolute;
	padding:5px;
	line-height:100%;
	text-align:center;
	background-color:rgb(224, 224, 224);
	color:rgb(26,26,26);
	font-family:Helvetica, sans-serif;
	font-size:11px;
	z-index:10000;
	border:1px solid rgb(191,191,191);
 }

Parameters:
{String} containerId: The ID of the parent DOM element to which the component is added as a child; if an ID of the SocialShare component is used, this component will be added to SocialShare panel.
{s7sdk.ParameterManager} settings: A parameter manager instance that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the component DOM element.

See:: s7sdk.share.SocialShare

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the FacebookShare component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.SocialEvent.

The events supported by the component are:

SocialEvent.NOTF_SOCIAL_ACTIVATED - Dispatched when sharing components are activated by the user. s7sdk.event.SocialEvent

Parameters:
{String} type: Event name, for example SocialEvent.NOTF_SOCIAL_ACTIVATED.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

See:: s7sdk.event.SocialEvent

setContentUrl(url)

Set the url to share on Facebook.

Parameters:
{String} url: Url to share on Facebook. The default url is the current page url.

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7emailshare
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

Namespaces

Classes in s7sdk.share

Class s7sdk.share.FacebookShare