---json
{
    "description": "With the share component, you can add easily share buttons. This article shows you how.",
    "name": "Share Buttons",
    "page_id": "f7ezynnq31zbp6ea2c50i"
}
---
====== Social - Share Button ======


===== About =====
''Share button'' or ''social button'' are buttons aimed to facilitate the <icon name="fa-solid:share" width="16"/> sharing of the page.

When a user clicks on them, the chosen social application opens with a message that the user can send.

The channels supported are:
  * [[social|social network]]
  * and messaging application (such as email, whatsapp, telegram, ...)

<note>
  * A social button is just a link styled by default as a button
  * The URL shared is the [[docs:page:url|page url]] and can make it permanent. For more information, see the [[docs:page:url|dedicated page]]
  * We support also [[docs:social:follow|follow buttons]] and [[docs:menubar:brand|brand buttons]].
</note>

===== Example =====
<webcode name="Default" frameborder="0">
<code dw>
<share twitter />
<share twitter widget="link" />
<share twitter widget="link" icon="solid-circle" />
<share twitter widget="link" icon="outline" width="60"/>
</code>

</webcode>

===== Map =====
Below, you can see a map of the share component with the parameters:
  * ''widget'': button (default) or link
  * ''icon'': Solid, Solid Circle, Outline, Outline Circle
for all supported channels.

<brand-list type="share"/>

===== Syntax =====

<code dw>
<share
    channel
    widget="button|link"
    name="name"
    url="urlType",
    icon="solid|solid-circle|outline|outline-circle|none"
    width="integer"
/>
<share channel ...>Label</share>
</code>

where:
  * ''channel'' is one of the [[#map|supported social channel name]]
  * ''widget'' permits to choose the type of output:
      * ''button'' (default): a button
      * ''link'': a link
  * ''url'' is: (default to the first permanent link)
      * ''page'' for the [[docs:page:url|page url]]
      * ''permalink'' for the [[docs:router:permalink|identifier permalink]]
  * ''icon'' is the type of icon or no icon with ''none''
  * ''width'' is the width of the [[docs:content:icon|icon]].

<note>
If no url option is given, the [[docs:page:url|page url]] is chosen if permanent, otherwise the [[docs:router:permalink|identifier permalink]] takes over
</note>


===== How to customize the Share button ? =====

==== How to add a label ? ====


<webcode name="Default" frameborder="0">
To add your own label, you need to use the element container form.

Example:
  * To add the label ''Twitter'', you would use this syntax:
<code dw>
<share name="twitter"> Twitter</share>
</code>
  * The output is:
</webcode>

==== How to use your own icon ? ====

The ''icon'' option permits to disable the icon with the value ''none'', you can then choose your own [[docs:content:icon|icon]]
<webcode name="Default" frameborder="0">
  * For instance with the [[https://developer.wordpress.org/resource/dashicons/#twitter-alt|dashicons:twitter-alt]]
<code dw>
<share name="twitter" icon="none"><icon name="dashicons:twitter-alt" color="white"/> Share on Twitter</share>
</code>
  * The output would be:
</webcode>