---
{
	"title": "Gadget de partage",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Permet à l'utilisateur de partager un contenu Web sur les plateformes de médias sociaux.",
	"tag": "share",
	"parentdir": "share",
	"altLangPrefix": "share",
	"css": ["demo/share"],
	"dateModified": "2023-07-17"
}
---
<section>
	<h2>Partager une page</h2>

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

	<details>
		<summary>Visualiser le 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>Partager une vidéo</h2>

	<div class="wb-share" data-wb-share='{"type": "video", "title": "Titre de la vidéo", "url": "https://video.url", "pnlId": "pnl2"}'></div>

	<details>
		<summary>Visualiser le code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"type": "video", "title": "Titre de la vidéo", "url": "https://video.url", "pnlId": "pnl2"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Partager un fichier audio</h2>

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

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

<hr />

<section>
	<h2>Partager un type personnalisé</h2>

	<div class="wb-share" data-wb-share='{"custType": " ce commentaire", "title": "Titre du commentaire", "url": "https://commentaire.url", "pnlId": "pnl3"}'></div>

	<details>
		<summary>Visualiser le code</summary>
		<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"custType": " ce commentaire", "title": "Titre du commentaire", "url": "https://commentaire.url", "pnlId": "pnl3"}'&gt;&lt;/div&gt;</code></pre>
	</details>
</section>

<hr />

<section>
	<h2>Ajouter des liens additionnels</h2>

	<div class="wb-share" data-wb-share='{"pnlId": "pnl4"}'></div>
	<div class="text-right">
		<strong>Deuxième lien&#160;:</strong>
		<div class="wb-share link-only text-right" data-wb-share='{"pnlId": "pnl4"}'></div>
	</div>

	<details>
		<summary>Visualiser le 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;Deuxième lien&#160;:/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>Filtrer les sites affichés</h2>

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

	<details>
		<summary>Visualiser le 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>Ajouter du CSS personnalisé au lien de partage</h2>

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

	<details>
		<summary>Visualiser le 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>Ajouter un site au panneau de partage</h2>

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

	<details>
		<summary>Visualiser le code</summary>
		<section>
			<h3>HTML</h3>
			<pre class="wb-prettify"><code>&lt;div class="wb-share" data-wb-share='{"pnlId": "pnl7", "sites": {"Site démo": {"name": "Site démo", "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>Avec X au lieu de Twitter</h2>

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

	<details>
		<summary>Visualiser le 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>Lorsque X et Twitter sont définis</h2>
	<p>Lorsque X et Twitter sont tous deux configurés, seul X sera affiché.</p>
	<div class="wb-share" data-wb-share='{"filter": ["email", "facebook", "linkedin", "twitter", "x"], "pnlId": "pnl5b"}'></div>

	<details>
		<summary>Visualiser le 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>
