---
{
	"title": "Share widget",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Facilitates sharing Web content on social media platforms.",
	"altLangPrefix": "share",
	"dateModified": "2024-11-25"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Having a share widget on your site enables users to quickly share content with their networks, hence increasing the reach of your website. This increase in reach comes at very minimal cost as all it requires is the inclusion of a share widget somewhere on your page.</p>
</section>

<section>
	<h2>Use when</h2>
	<p>Use on specific content that you want users to share or that users would find useful to share with others via their social media outlets. Use the filtered version if you want to target certain platforms, for example, if your research indicates that your target audience tends to use one or a few platforms over others.</p>
	<p>Rather than automatically including the share button on every page of your site, think about users and when and where they may want to take a call to action to digg, share, tweet or follow. A well designed site will facilitate a 'frictionless' experience for the user where they would otherwise have to copy and paste.</p>
</section>

<section>
	<h2>Do not use when</h2>
	<ul>
		<li>The page does not contain useful content (e.g., splash pages)</li>
		<li>The page does not have a unique URL. Sharing the page would send people to a different page if users clicked on the shared link.</li>
		<li>Automatically on every page.</li>
	</ul>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/share/share-en.html">English working examples</a></li>
		<li><a href="../../../demos/share/share-fr.html">French working examples</a></li>
	</ul>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>Add <code>&lt;div class="wb-share"&gt;&lt;/div&gt;</code> to the Web page.</li>
		<li>Add a unique id for the share panel.
			<pre><code>&lt;div class="wb-share" data-wb-share='{"pnlId": "pnl1"}'&gt;&lt;/div&gt;</code></pre>
		</li>
		<li><strong>Optional:</strong> Override the default settings using the <a href="#config">configuration options</a>.</li>
		<li><strong>Optional:</strong> Add additional links using the <code>link-only</code> class.
			<pre><code>&lt;div class="wb-share link-only" data-wb-share='{"pnlId": "pnl1"}'&gt;&lt;/div&gt;</code></pre>
		</li>
	</ol>
</section>

<section>
	<h2 id="config">Configuration options</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
				<th>Values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>pnlId</code></td>
				<td>Unique identifier for the panel. Only required if providing a second link for the same panel (needs to be specified on all <code>wb-share</code> calls for that panel).</td>
				<td>Add <code>"pnlId": "uniqueId"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code> where <code>uniqueId</code> is a valid unique id.</td>
				<td>
					<dl>
						<dt><code>uniqueId</code>:</dt>
						<dd>Valid unique id (e.g., <code>pnl1</code>)</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>hdLvl</code></td>
				<td>Heading level for the share panel.</td>
				<td>Add <code>"hdLvl": "headingLevel"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code> where <code>headingLevel</code> is the heading level. Use the following JavaScript code instead to configure all instances of the plugin: <code>window[ "wb-share" ] = {"hdLvl": "headingLevel"};</code>.</td>
				<td>
					<dl>
						<dt><code>h2</code> (default):</dt>
						<dd>Heading level 2</dd>
						<dt><code>h3</code>:</dt>
						<dd>Heading level 3</dd>
						<dt><code>h4</code>:</dt>
						<dd>Heading level 4</dd>
						<dt><code>h5</code>:</dt>
						<dd>Heading level 5</dd>
						<dt><code>h6</code>:</dt>
						<dd>Heading level 6</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>lnkClass</code></td>
				<td>Classes to be applied to the class attribute of the generated link.</td>
				<td>Add <code>"lnkClass": "class1 class2"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code> where <code>class1 class2</code> are the classes to be added separated by spaces. Use the following JavaScript code instead to configure all instances of the plugin: <code>window[ "wb-share" ] = {"hdLvl": "lnkClass": "class1 class2"};</code>.</td>
				<td>
					<ul>
						<li>None (default)</li>
					</ul>
				</td>
			</tr>
			<tr>
				<td><code>type</code></td>
				<td>Type of content to share.</td>
				<td>Add <code>"type": "value"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>.</td>
				<td>
					<dl>
						<dt><code>page</code> (default):</dt>
						<dd>Shares the current page</dd>
						<dt><code>video</code>:</dt>
						<dd>Shares the specified video</dd>
						<dt><code>audio</code>:</dt>
						<dd>Shares the specified audio file</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>custType</code></td>
				<td>Text to use after "Share" on the share button and the panel header (overrides the text associated to the type option).</td>
				<td>Add <code>"custType": "string"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>.</td>
				<td>
					<dl>
						<dt><code> this page</code> or <code> this video</code> (default):</dt>
						<dd>Default text used for the page and video share types.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>title</code></td>
				<td>Text to use instead of the page title or the main h1 text. Recommended for the video type if the page title is not the title of the video.</td>
				<td>Add <code>"title": "Page title"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>.</td>
				<td>
					<dl>
						<dt>Page title or the main h1 text (default):</dt>
						<dd>The title of the current page is shared by default.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>url</code></td>
				<td>URL to use instead of the URL of the current page.</td>
				<td>Add <code>"url": "newURL"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>.</td>
				<td>
					<dl>
						<dt>Page URL (default):</dt>
						<dd>The URL of the current page is shared by default.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>desc</code></td>
				<td>Optional description of the item to share. <strong>Note:</strong> A separate description is not supported by all social media sites.</td>
				<td>Add <code>"desc": "description"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>.</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>A separate description is not shared by default.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>img</code></td>
				<td>Optional image for the item to share (mainly for Pinterest). <strong>Note:</strong> Very few social media sites support specifying a separate image through a URL request.</td>
				<td>Add <code>"img": "imageURL"</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>.</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>A separate image is not shared by default.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>filter</code></td>
				<td>Optional filter for the sites to display in the panel. Only the sites listed in the array will be displayed. If no sites are listed, then all sites will be displayed.</td>
				<td>
					<p>Add <code>"filter": ["site-1", "site-2", ... "site-n"]</code> to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>. Use the following JavaScript code instead to configure all instances of the plugin: <code>window[ "wb-share" ] = {"filter": ["site-1", "site-2", ... "site-n"]};</code>.</p>
					<p>The following filtering options are available by default:</p>
					<ul>
						<li>blogger</li>
						<li>bluesky</li>
						<li>diigo</li>
						<li>email (v4.0.15+)</li>
						<li>facebook</li>
						<li>gmail</li>
						<li>linkedin</li>
						<li>myspace</li>
						<li>pinterest</li>
						<li>reddit</li>
						<li>tinyurl</li>
						<li>tumblr</li>
						<li>twitter</li>
						<li>whatsapp</li>
						<li>yahoomail</li>
					</ul>
				</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>Sites are not filtered by default.</dd>
					</dl>
				</td>
			</tr>
			<tr>
				<td><code>sites</code></td>
				<td>Add one or more sites to the panel.</td>
				<td>
					<ol>
						<li>
							<p>Add the following to the <code>data-wb-share</code> attribute or <code>window[ "wb-share" ]</code>:</p>
							<pre><code>"sites": {
	"siteId1": {
		"name": "siteName1",
		"url": "siteUrl1"
	},
	"siteId2": {
		"name": "siteName2",
		"url": "siteUrl2"
	}
}</code></pre>
							<p>For example "siteId1" could be "yahoomail", "name1" could be "Yahoo! Mail" and "url1" could be
								"<code>https://compose.mail.yahoo.com/?to=&amp;subject={t}&amp;body={u}%0A{d}</code>" where "{u}" is
								the page URL, "{t}" is the page title, {i} is the image URL, and '{d}' is the description.</p>
							<p>
							<p>Use the following JavaScript code instead to configure all instances of the plugin:</p>
							<pre><code>window[ "wb-share" ] = {
	"sites": {
		"siteId1": {
			"name": "siteName1",
			"url": "siteUrl1"
		},
		"siteId2": {
			"name": "siteName2",
			"url": "siteUrl2"
		}
	}
};</code></pre>
						</li>
						<li>Create a 32 pixel by 32 pixel image for each site.</li>
						<li>Add the following CSS:
							<pre><code>.wb-share .siteId1:before {
	background: url("../assets/site1.png") no-repeat;
}
.wb-share .siteId2:before {
	background: url("../assets/site2.png") no-repeat;
}</code></pre>
						</li>
					</ol>
				</td>
				<td>
					<dl>
						<dt>None (default):</dt>
						<dd>Sites are not added this way by default.</dd>
					</dl>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-share</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-share" ).trigger( "wb-init.wb-share" );</code>).</td>
				<td>Used to manually initialize the share widget. <strong>Note:</strong> The share widget will be initialized automatically unless it is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-share</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Share plugin initializes.</td>
				<td>Used to identify where the Share plugin was initialized (target of the event).
					<pre><code>$( document ).on( "wb-ready.wb-share", ".wb-share", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-share" ).on( "wb-ready.wb-share", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/share">Share widget source code on GitHub</a></p>
</section>
