Examples

Basic usage #

HTML:

<div class="simple-share"></div>

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="simple-share.min.js"></script>

Result:

Note: Facebook, X, WhatsApp and Telegram are enabled by default.

---

Configure providers #

HTML:

<div class="simple-share" data-providers="telegram,whatsapp,viber,messenger"></div>

Enable all providers with asterisk *

<div class="simple-share" data-providers="*"></div>

Result:

---

Additional attributes #

Use attributes data-url, data-title and data-image to customize share text:

<div class="simple-share" data-url="http://example.com/" data-title="Example Title" data-image="http://example.com/image.jpg"></div>

By default plugin uses title from meta "og:title" or document.title, url from window.location.href and image from meta "og:image".

Note: data-image is required for Pinterest if meta "og:image" is not set.

HTML:

<div class="simple-share" data-providers="pinterest" data-image="https://tmpfiles.xyz/simple-share/images/simple-share.png"></div>

Result:

---

Manual initialization and plugin options #

<p class="share-custom"></p>

<p class="share-custom" data-providers="viber,telegram,messenger"></p>

Note: data- attributes have higher priority.

JavaScript:

$('.share-custom').simpleShare({
    providers: 'vk,facebook,pinterest',
    styled: false,
    icons: true,
    image: 'https://tmpfiles.xyz/simple-share/images/simple-share.png',
    url: 'https://tmpfiles.xyz/simple-share/',
    title: 'Simple Share'
}).find('a').each(function () {
    $(this).css({color: $(this).attr('data-color')});
});

Note 1: option styled with value false disables built-in CSS.
Note 2: option icons with value false disables built-in icons.

CSS:

.share-custom a {
    display: inline-block;
    margin-right: 5px;
    transition: all .2s;
}
.share-custom a:hover,
.share-custom a:focus {
    opacity: 0.8;
}
.share-custom svg {
    width: 2rem;
    height: 2rem;
}

Result:

---

Manual initialization #

Disable auto initialization with attribute data-skip-auto:

<div class="simple-share" data-skip-auto>Share buttons will be here</div>

JavaScript:

$('#show-share').on('click', function () {
    $('.simple-share').simpleShare();
});

Result:

Show share buttons

---

Simple Share

Download GitHub