README

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

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

Selecting and Sorting Buttons

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

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>

Button Style

Silver

Color

With text

Simple settings are available in the component settings.

Disable css

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

Paste buttons

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

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

Buttons:

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

CSS:

• 1 - enable
• 0 - disable

Skins:

• silver
• color
• text

Function share

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

share(id, paramsUrl);

Examples

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

share('tg');

// https://example.com/slug

search parameter

Part of the address after ?

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

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

hash parameter

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

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

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

search and hash parameters

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

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