JS-Share - social and messengers sharing

Easy to use social media share library. This project is intended to help you integrate sharing within your code.

Key features

Small size
Vanilla javascript
No dependency
IE9+, Chrome, Safari, Firefox support
CSS styling is up to you
Supports AMD/CommonJS

Installation

Package Managers

JavaScript Share supports npm under the name js-share.

npm install js-share --save

Direct download

Download the script here and include it (unless you are packaging scripts somehow else):

<script src="/path/to/jsshare.js"></script>

Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.

Module Loaders

JavaScript Share can also be loaded as an AMD or CommonJS module.

Supported sharing platforms

Facebook
Twitter
LinkedIn
VK
OKru
Google+
GoogleBookmarks
Reddit
Tumblr
Pinterest
Weibo
Baidu
Mail.Ru
Line.me
Telegram
WhatsApp
Viber
Skype
Email

Basic Usage

HTML code:

    <div>Share:
        <button class="btn btn-default social_share" data-type="fb">Facebook</button>
        <button class="btn btn-default social_share" data-type="twitter">Twitter</button>
        <button class="btn btn-default social_share" data-type="vk">VK.com</button>
        <button class="btn btn-default social_share" data-type="ok">OK.ru</button>
        <button class="btn btn-default social_share" data-type="mailru">Mail.Ru</button>
        <button class="btn btn-default social_share" data-type="gplus">Google+</button>
        <button class="btn btn-default social_share" data-type="googlebookmarks">Google Bookmarks</button>
        <button class="btn btn-default social_share" data-type="livejournal">LiveJournal</button>
        <button class="btn btn-default social_share" data-type="tumblr">Tumblr</button>
        <button class="btn btn-default social_share" data-type="pinterest">Pinterest</button>
        <button class="btn btn-default social_share" data-type="linkedin">LinkedIn</button>
        <button class="btn btn-default social_share" data-type="reddit">Reddit</button>
        <button class="btn btn-default social_share" data-type="mailru">Mail.ru</button>
        <button class="btn btn-default social_share" data-type="weibo">Weibo</button>
        <button class="btn btn-default social_share" data-type="line">Line.me</button>
        <button class="btn btn-default social_share" data-type="skype">Skype</button>
        <button class="btn btn-default social_share" data-type="telegram">Telegram</button>
        <button class="btn btn-default social_share" data-type="whatsapp">Whatsapp</button>
        <button class="btn btn-default social_share" data-type="viber">Viber</button>
        <button class="btn btn-default social_share" data-type="email">Email</button>
    </div>

Javascript code:

import JSShare from "js-share";
var shareItems = document.querySelectorAll('.social_share');
for (var i = 0; i < shareItems.length; i += 1) {
  shareItems[i].addEventListener('click', function share(e) {
    return JSShare.go(this);
  });
}

import JSShare from "js-share";
var shareItems = document.querySelectorAll('.social_share');
JSShare.options.url = "http://www.example.com/fancy/url";
for (var i = 0; i < shareItems.length; i += 1) {
  shareItems[i].addEventListener('click', function share(e) {
    return JSShare.go(this);
  });
}

See working demo example.html.

Data attributes:

data-type - where to share. Required.
data-url - URL to share. Default value is the current page location (location.href).
data-title - title to share. Default is the current page title (document.title).
data-text - share description. Only for vk, ok, googlebookmarks, lj, tumblr, linkedin, mailru, email.
data-utm_source - utm_source for links. Default is none.
data-utm_medium - utm_medium for links. Default is none.
data-utm_campaign - utm_campaign for links. Default is none.
data-popup_width - popup width. Default is 626 pixels.
data-popup_height - popup height. Default is 436 pixels.

Same options could be used on script initialization.

data-title and data-text are optional and will be ignored by some services. Social networks usually get all required data from Open Graph metadata (og:* tags).

More examples

    <button class="social_share" utm_source="messengers" data-utm_medium="telegram" data-type="telegram">Telegram</button>
    <button class="social_share" utm_source="messengers" data-utm_medium="whatsapp" data-type="whatsapp">Whatsapp</button>
    <button class="social_share" utm_source="messengers" data-utm_medium="viber" data-type="viber">Viber</button>

    <button class="social_share" utm_source="messengers" data-utm_medium="vk" data-url="http://www.example.com/fancy/url" data-type="vk">VK.com</button>
    <button class="social_share" utm_source="messengers" data-utm_medium="fb" data-url="http://www.example.com/fancy/url" data-type="fb">Facebook</button>
    <button class="social_share" utm_source="messengers" data-utm_medium="ok" data-url="http://www.example.com/fancy/url" data-type="ok">OK.ru</button>

License

how to use with vite in laravel 9?

How to Import on this on vite and laravel 9?

on /resources/js/bootstrap.js, I've used as

import "js-share;"

on view file I included the following code in the script.

var shareItems = document.querySelectorAll('.social_share');
for (var i = 0; i < shareItems.length; i += 1) {
    shareItems[i].addEventListener('click', function share(e) {
        return JSShare.go(this);
    });
}

I got errors like this on the console when I click the soical icon - twitter or any

Uncaught ReferenceError: JSShare is not defined
    at HTMLButtonElement.share ((index):956:9)
share @ (index):956

Even I changed on bootstrap.js to this

import * as JSShare from "js-share";
window.JSShare = JSShare;

is not working; same error on console.
So the actual error is JSShare is not defined when click on button.

What is the issue here, can you please figure it out?

Thanks in advance

delfimov / js-share Goto Github PK

js-share's Introduction

JS-Share - social and messengers sharing

Key features

Installation

Package Managers

Direct download

Module Loaders

Supported sharing platforms

Basic Usage

More examples

License

js-share's People

Contributors

Stargazers

Watchers

Forkers

js-share's Issues

How to Import on this on vite and laravel 9?

Recommend Projects

Recommend Topics

Recommend Org