webvpf / wn-share-plugin
Share Buttons - plugin for Winter CMS. Displays share buttons.
Installs: 436
Dependents: 0
Suggesters: 0
Security: 0
Stars: 7
Watchers: 1
Forks: 2
Open Issues: 0
Type:winter-plugin
Requires
- composer/installers: ~1.0
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:
- VK
- Odnoklassniki
- Telegram
- Viber
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)
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" css = 1 skin = "text" == <div>Share: {% component 'ShareButtons' %}</div>
Buttons:
fb
- Facebookin
- LinkedInok
- Odnoklassnikitg
- Telegramtw
- Twittervb
- Vibervk
- VKwa
- WhatsApp
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