Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

👍 Simple, powerful, customizable and super lightweight social buttons for your site

License

NotificationsYou must be signed in to change notification settings

wcoder/share-buttons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple, powerful, customizable and super lightweight (1 Kb Gzip) social buttons for your site.

Browser support

  • Google Chrome
  • Mozilla Firefox 3.5+
  • Opera 10+
  • Safari 3.2+
  • IE 8+
  • Android
  • iOS

Copy to clipboard is not supported on IE, seebrowser compatibility for more information

WebShare API is only partially supported, seebrowser compatibility for more information

Install

Available in NPM

npm i share-buttons

includeshare-buttons.js in the end of page:

<scriptsrc="<path>/dist/share-buttons.js"></script>

Getting the library from CDN

<scriptsrc="//cdn.jsdelivr.net/npm/share-buttons/dist/share-buttons.js"></script>

Paste this HTML on the page:

<divclass="share-btn"><adata-id="vk">VK</a><adata-id="fb">Facebook</a><adata-id="tw">Twitter</a><adata-id="tg">Telegram</a><adata-id="mail">EMail</a></div>

Added styles:

.share-btn>a {border:1px solid#ccc;padding:5px;font-size:12px;font-family: Verdana, Arial;}.share-btn>a:hover {cursor: pointer;}

Profit!!

Share via

Networkdata-id
Facebookfb
VKvk
Twittertw
Telegramtg
Pocketpk
Redditre
Evernoteev
LinkedInin
Pinterestpi
Skypesk
WhatsAppwa
Odnoklassnikiok
Tumblrtu
Hacker Newshn
Xingxi
EMailmail
Printprint
Copycopy
WebShare APIshare

Customizing

Custom 'url', 'title', 'description':

<divclass="share-btn"data-url="https://..."data-title="..."data-desc="..."><adata-id="vk">VK</a><adata-id="fb">Facebook</a><adata-id="tw">Twitter</a><adata-id="tg">Telegram</a><adata-id="mail">EMail</a></div>

Styles - full customization.

Examples

If you are usingFont-Awesome:

<divclass="share-btn"data-url="https://..."data-title="..."data-desc="..."><adata-id="vk"><iclass="fab fa-vk"></i> VK</a><adata-id="fb"><iclass="fab fa-facebook-square"></i> Facebook</a><adata-id="tw"><iclass="fab fa-twitter"></i> Twitter</a><adata-id="tg"><iclass="fab fa-telegram"></i> Telegram</a><adata-id="mail"><iclass="fas fa-at"></i> EMail</a></div>

You can also usesimple-icons.

© 2015+ Yauheni Pakala andcontributors | MIT

About

👍 Simple, powerful, customizable and super lightweight social buttons for your site

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors8

[8]ページ先頭
©2009-2025 Movatter.jp