• Stars
    star
    116
  • Rank 302,774 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Small (1.5 KB) simple tool for sharing url, title, description and image to VK, Facebook (Feed, Dialog, Button, Messenger), Reddit, Pinterest, Tumblr, Twitter, VK, OK, Mail.ru, LinkedIn, Whatsapp, Viber, Telegram, Line

Vanilla Sharing

vanilla-sharing

Small (1.5 KB) simple tool for sharing url, title, description and image to VK, Facebook (Feed, Dialog, Button, Messenger), Twitter, Reddit, Pinterest, Tumblr, VK, OK, Mail.ru, LinkedIn, Whatsapp, Viber, Telegram, Line.

DEMO

Build Status bundlephobia Coverage Status npm npm

Motivation

Adding sharings to a project is digging in the documentation of the corresponding social networks. With this set of small functions, we have already done everything for you. Just take them and use!

Installation

From NPM

npm install --save vanilla-sharing

From unpkg CDN (you can use other)

<script src="https://unpkg.com/vanilla-sharing"></script>

Usage

From NPM

import { fbButton } from 'vanilla-sharing';

fbButton({
  url: 'https://alexey-avdeev.com/vanilla-sharing/',
});

From CDN

VanillaSharing.fbButton({
  url: 'https://alexey-avdeev.com/vanilla-sharing/',
});

API

fbFeed(options)

Share on facebook.com via the Feed dialog

Documentation: https://developers.facebook.com/docs/sharing/reference/feed-dialog

fbFeed({
  url: string,
  redirectUri: string,
  fbAppId: string,
})

You can use getFbFeedUrl(options) for getting URL.

fbShare(options)

Share on facebook.com via the Share dialog

Documentation: https://developers.facebook.com/docs/sharing/reference/share-dialog

fbShare({
  url: string,
  redirectUri: string,
  hashtag: string,
  fbAppId: string,
  quote: string,
})

You can use getFbShareUrl(options) for getting URL.

fbButton(options)

Share on facebook.com using facebook share button

fbButton({
  url: string,
})

You can use getFbButtonUrl(options) for getting URL.

messenger(options)

Share via Facebook Messenger

Share method from Sharing for Messenger.

messenger({
  url: string,
  fbAppId: string,
})

tw(options)

Share on Twitter

tw({
  url: string,
  title: string,
  hashtags: array,
})

You can use getTwUrl(options) for getting URL.

reddit(options)

Share on Reddit

reddit({
  url: string,
  title: string,
})

pinterest(options)

Share on Pinterest

pinterest({
  url: string,
  description: string,
  media: image url string,
})

tumblr(options)

Share on Tumblr

tumblr({
  url: string,
  title: string,
  caption: string,
  tags: array,
})

vk(options)

Share on vk.com

vk({
  url: string,
  title: string,
  description: string,
  image: string,
  isVkParse: boolean,
})

You can use getVkUrl(options) for getting URL.

ok(options)

Share on ok.ru

Like/Share button

ok({
  url: string,
  title: string,
  image: string,
})

You can use getOkUrl(options) for getting URL.

mail(options)

Share on Mail.ru

mail({
  url: string,
  title: string,
  description: string,
  image: string,
})

email(options)

Share via user's email

email({
  to: string,
  url: string,
  title: string,
  description: string,
  subject: string,
})

You can use getEmailUrl(options) for getting URL.

linkedin(options)

Share on LinkedIn

Share method from Share on LinkedIn.

linkedin({
  url: string,
  title: string,
  description: string,
})

whatsapp(options)

Share via Whatsapp

WhatsApp FAQ - Using Click to Chat.

whatsapp({
  url: string,
  title: string,
  phone: string,
})

You can use getWhatsappUrl(options) for getting URL.

viber(options)

Share via Viber

Viber Share Button docs.

viber({
  url: string,
  title: string,
})

You can use getViberUrl(options) for getting URL.

telegram(options)

Share via Telegram

telegram({
  url: string,
  title: string,
})

You can use getTelegramUrl(options) for getting URL.

line(options)

Share via Line

line({
  url: string,
  title: string,
})

More Repositories

1

awesome-cfp-ru-list

Список сборов заявок на выступление на IT-конференциях на русском языке
15
star
2

docker-for-front-end-developers

Слайды для доклада Docker для фронтендера на конференцию FrontendConf 2019
HTML
13
star
3

eslint-plugin-no-vue

This is an ESLint plugin to disable Vue.js.
JavaScript
8
star
4

roboto-slab

CSS/SASS codes and woff files for google's Roboto Slab webfont
CSS
6
star
5

usb-tokens-fc2021

Слайды для доклада на конференцию FrontendConf 2021 в Москве. Доклад "Используем USB-токены для аутентификации в браузере"
HTML
4
star
6

how-did-we-develop-a-visual-editor

Как мы делали свой визуальный (WYSIWYG) редактор статей для Life.ru и не только
HTML
4
star
7

level-80-frontend-developer

Качаемся во фронтенд-разработчика 80-го уровня
HTML
3
star
8

what-happens-when

Что происходит, когда я набираю "google.com" в адресной строке браузера и нажимаю "Enter"
HTML
3
star
9

shower-template-fc2023

Слайды для доклада на конференцию FrontendConf 2023 в Москве
HTML
2
star
10

no-code-and-low-code-2022

Слайды для курса по стартапам в ННГУ, урок No-Code и Low-Code
HTML
2
star
11

jsonapi-work-according-to-specification

Расскажу, в чём её суть спецификации JSON API, чем она дополняет RESTful и чем отличается от GraphQL.
HTML
2
star
12

product-development

Модуль 5. Product development. Разработка продукта
HTML
1
star
13

what-is-wrong-with-emoji

Почему мои эмоджи выглядят по-разному в разных браузерах? Что делать, если дизайнеры говорят, что все смайлики должны выглядеть, как на Айфоне? Решаем проблему, попутно разбираясь в спецификациях Emoji и Unicode.
HTML
1
star
14

bifurcational-dynamics

Investigation of the dynamics of vibro-impact mechanism with a crank vibration exciter
JavaScript
1
star
15

sudoku

Generating Sudoku, the heuristic algorithm for solving algorithm and exhaustive search.
JavaScript
1
star
16

oop-patterns-ruby

Examples of OOP patterns in Ruby
Ruby
1
star
17

web3-for-front-end-developers-stachka-2023

Web3 для фронтендера (Стачка 2023)
HTML
1
star
18

soft-skills-and-hard-skills

Слайды для курса по стартапам в ННГУ, урок Soft skills vs Hard skills. Собираем идеальную команду
HTML
1
star