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, …)

A social button is just a link styled by default as a button
The URL shared is the page url and can make it permanent. For more information, see the dedicated page
We support also follow buttons and brand buttons.

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.

Brand Name	Button Solid	Button Solid-circle	Button Outline	Button Outline-circle	Link Solid	Link Solid-circle	Link Outline	Link Outline-circle
Email
Facebook
Hackernews
Linkedin
Pinterest
Pocket
Reddit
Telegram
Tumblr
Twitter
Vk
Whatsapp
Xing

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.

If no url option is given, the page url is chosen if permanent, otherwise the identifier permalink takes over

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: