Table of Contents

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.

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)
  • 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 

<share name="twitter" icon="none"><icon name="dashicons:twitter-alt" color="white"/> Share on Twitter</share>
  • The output would be: