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:

  • 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 channel.

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:

Powered by ComboStrap