---
{
	"title": "Share widget",
	"language": "en",
	"category": "Plugins",
	"description": "Facilitates sharing Web content on social media platforms.",
	"tag": "share",
	"parentdir": "share",
	"altLangPrefix": "share",
	"css": ["demo/share"],
	"dateModified": "2023-07-17"
}
---
<section>
	<h2>Share a page</h2>

	<div class="wb-share" data-wb-share='{"pnlId": "pnl1"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"pnlId": "pnl1"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Share a video</h2>

	<div class="wb-share" data-wb-share='{"type": "video", "title": "Video title", "url": "https://video.url", "pnlId": "pnl2"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"type": "video", "title": "Video title", "url": "https://video.url", "pnlId": "pnl2"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Share an audio file</h2>

	<div class="wb-share" data-wb-share='{"type": "audio", "title": "Audio file title", "url": "https://audio.url", "pnlId": "pnl8"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"type": "audio", "title": "Audio file title", "url": "https://audio.url", "pnlId": "pnl8"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Share a custom type</h2>

	<div class="wb-share" data-wb-share='{"custType": " this comment", "title": "Comment title", "url": "https://comment.url", "pnlId": "pnl3"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"custType": " this comment", "title": "Comment title", "url": "https://comment.url", "pnlId": "pnl3"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Add additional links</h2>

	<div class="wb-share" data-wb-share='{"pnlId": "pnl4"}'></div>
	<div class="text-right">
		<strong>Second link:</strong>
		<div class="wb-share link-only text-right" data-wb-share='{"pnlId": "pnl4"}'></div>
	</div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"pnlId": "pnl4"}'&gt;&lt;/div&gt;
&lt;div class="text-right"&gt;
	&lt;strong&gt;Second link:&lt;/strong&gt;
	&lt;div class="wb-share link-only text-right" data-wb-share='{"pnlId": "pnl4"}'&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Filter the displayed sites</h2>

	<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter"], "pnlId": "pnl5"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter"], "pnlId": "pnl5"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Add custom CSS to the share link</h2>

	<div class="wb-share" data-wb-share='{"pnlId": "pnl6", "lnkClass": "btn btn-default"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"pnlId": "pnl6", "lnkClass": "btn btn-default"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Add a site to the share panel</h2>

	<div class="wb-share" data-wb-share='{"pnlId": "pnl7", "sites": {"demosite": {"name": "Demo site", "url": "https://www.example.org/?to=&amp;subject={t}&amp;body={u}%0A{d}"}}}'></div>

	<details>
		<summary>View code</summary>
		<section>
			<h3>HTML</h3>
			<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"pnlId": "pnl7", "sites": "demosite": {"name": "Demo site", "url": "https://www.example.org/?to=&amp;subject={t}&amp;body={u}%0A{d}"}}'&gt;&lt;/div&gt;</code></pre>
		</section>
		<section>
			<h3>SCSS</h3>
			<pre><code>{{#escape}}{{#stripbanner}}{{> share }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</details>
</section>

<section>
	<h2>With X instead of Twitter</h2>

	<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "x"], "pnlId": "pnl5a"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "x"], "pnlId": "pnl5a"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<section>
	<h2>When X and Twitter are defined</h2>
	<p>When X and Twitter are both configured, only X will be displayed.</p>
	<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter", "x"], "pnlId": "pnl5b"}'></div>

	<details>
		<summary>View code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter", "x"], "pnlId": "pnl5b"}'>&lt;/div></code></pre>
	</details>
</section>
