Social - Share Button

About

Share button or social button are buttons aimed to facilitate the 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 network
• and messaging application (such as email, whatsapp, telegram, …)

Example

<share twitter />
<share twitter widget="link" />
<share twitter widget="link" icon="solid-circle" />
<share twitter widget="link" icon="outline" width="60"/>

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.

Syntax

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

where:

• channel is one of the 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 page url
  • permalink for the identifier permalink
• icon is the type of icon or no icon with none
• width is the width of the icon.

How to customize the Share button ?

How to add a label ?

To add your own label, you need to use the element container form.

Example:

• To add the label Twitter, you would use this syntax:

<share name="twitter"> Twitter</share>

• The output is:

How to use your own icon ?

The icon option permits to disable the icon with the value none, you can then choose your own icon

• For instance with the dashicons:twitter-alt

<share name="twitter" icon="none"><icon name="dashicons:twitter-alt" color="white"/> Share on Twitter</share>

• The output would be: