Share Buttons - plugin for Winter CMS. Plugin component displays share buttons.

Инструкция на русском языке: https://github.com/WebVPF/wn-share-plugin/wiki

Installation Сomposer:

composer require webvpf/wn-share-plugin

Social Networks and Messengers:

• Facebook
• Twitter
• VK
• Odnoklassniki
• LinkedIn
• Telegram
• Viber
• WhatsApp

Features:

• easy setup
• opens in a popup window or smartphone app
• not blocked by adblockers
• SVG icons are used for buttons, so there are no dependencies on icon fonts
• no external links
• there is no interaction with database
• optimized javascript file less than 1 Kb
• without jQuery

Specify the id of the buttons that you want to display, separated by commas (fb, tw, vk, ok, in, tg, vb, wa)

In this case, you can specify the order in which the buttons will be displayed.

You can do a similar layout:

<div>Share: {% component 'ShareButtons' %}</div>

or

<div class="container">
    <h3>Share</h3>
    <div>{% component 'ShareButtons' %}</div>
</div>

Silver

Color

With text

Simple settings are available in the component settings.

You can completely disable predefined css in component settings. Styles can be placed in css themes or wherever convenient for you.

If you work with code, you can insert buttons as follows:

[ShareButtons]
btns = "fb, tw, vk, ok, in, tg, vb, wa"
css = 1
skin = "text"
==
<div>Share: {% component 'ShareButtons' %}</div>

• fb - Facebook
• in - LinkedIn
• ok - Odnoklassniki
• tg - Telegram
• tw - Twitter
• vb - Viber
• vk - VK
• wa - WhatsApp

• 1 - enable
• 0 - disable

• silver
• color
• text

You can call the share() function from within your scripts.

share(id, paramsUrl);

The following example will send a page link to the Telegram messenger.

share('tg');

// https://example.com/slug

Part of the address after ?

share('wa', {search: 'a=2&b=3'});

// https://example.com/slug?a=2&b=3

The part of the URL that comes after the pound sign '#'

share('wa', {hash: 'anchor'});

// https://example.com/slug#anchor

share('wa', {search: 'a=2&b=3', hash: 'anchor'});

// https://example.com/slug?a=2&b=3#anchor