https://github.com/delfimov/js-share

Social media share. This project is intended to help you integrate sharing within your code. Supports Facebook, Reddit, Twittier, Telegram, Whatsapp, VK, OK.ru and many others.
https://github.com/delfimov/js-share

commonjs javascript javascript-library js-share messenger share sharing social social-networks vanilla-javascript

Last synced: 4 days ago
JSON representation

Social media share. This project is intended to help you integrate sharing within your code. Supports Facebook, Reddit, Twittier, Telegram, Whatsapp, VK, OK.ru and many others.

• Host: GitHub
• URL: https://github.com/delfimov/js-share
• Owner: delfimov
• License: mit
• Created: 2017-07-28T15:55:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-05-21T16:26:29.000Z (over 4 years ago)
• Last Synced: 2024-08-09T22:10:47.982Z (3 months ago)
• Topics: commonjs, javascript, javascript-library, js-share, messenger, share, sharing, social, social-networks, vanilla-javascript
• Language: JavaScript
• Homepage:
• Size: 28.3 KB
• Stars: 46
• Watchers: 3
• Forks: 14
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://www.npmjs.com/package/js-share) under the name `js-share`.

```bash

npm install js-share --save

```

### Direct download

Download the script [here](https://github.com/delfimov/JS-Share/blob/master/src/jsshare.js) and include it (unless you are packaging scripts somehow else):

```html

```

**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:

```html

    
Share:

        Facebook

        Twitter

        VK.com

        OK.ru

        Mail.Ru

        Google+

        Google Bookmarks

        LiveJournal

        Tumblr

        Pinterest

        LinkedIn

        Reddit

        Mail.ru

        Weibo

        Line.me

        Skype

        Telegram

        Whatsapp

        Viber

        Email

    

```


Javascript code:

```javascript

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);

  });

}

```

or 

```javascript

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](http://ogp.me/) metadata (`og:*` tags).

## More examples

```html

    Telegram

    Whatsapp

    Viber

```

or

```html

    VK.com

    Facebook

    OK.ru

```

## License

MIT © Dmitry Elfimov.