overtrue/share.js

★ 3,763JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((share.js))
    What it does
      Social share buttons
      Auto-generates icons
      QR code for WeChat
    Supported platforms
      Weibo and WeChat
      Twitter and Facebook
      LinkedIn and Douban
    Setup options
      HTML data attributes
      JavaScript config object
      RequireJS module
    Customization
      Choose platforms
      Override URL and title
      Custom anchor elements

mindmap root((share.js)) What it does Social share buttons Auto-generates icons QR code for WeChat Supported platforms Weibo and WeChat Twitter and Facebook LinkedIn and Douban Setup options HTML data attributes JavaScript config object RequireJS module Customization Choose platforms Override URL and title Custom anchor elements

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add social sharing buttons to a blog post or news article in under 5 minutes with one div and two file includes

USE CASE 2

Let visitors share your page to WeChat with a QR code popup without integrating a third-party widget

USE CASE 3

Control exactly which platforms appear on your sharing bar by passing a config list

USE CASE 4

Let users share pages to Chinese social platforms like Weibo, QQ Space, and Douban alongside Western ones

Tech stack

JavaScriptCSSnpmRequireJS

Getting it running

Difficulty · easy Time to first run · 5min

Project has not been actively maintained, for highly custom needs the author recommends implementing share URLs directly.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Share.js is a JavaScript library that adds social sharing buttons to web pages. You drop a single HTML element onto your page, include one CSS file and one JavaScript file, and the library automatically generates clickable icons that let visitors share the current page to platforms like Weibo, WeChat, QQ Space, QQ Friends, Tencent Weibo, Douban, Facebook, Twitter, LinkedIn, and Google+. The setup is minimal. You add a div with the class social-share, link the bundled stylesheet and script, and the buttons appear without any further initialization. If you want to control which platforms show up, you pass a configuration object listing the ones to enable or disable. You can also override the shared URL, title, description, and image rather than letting the library read them from the page automatically. Configuration can be done two ways: through a JavaScript object passed to the socialShare function, or through data attributes on the HTML element itself. For WeChat specifically, the library shows a QR code popup because WeChat does not support a standard share URL scheme, and you can customize the text shown in that popup. The library works with or without jQuery and supports loading via RequireJS for projects that use module bundlers. You can also disable the auto-generated icons entirely and supply your own anchor elements, which the library then wires up with the correct share links. The README includes a note that the project has not been actively maintained for some time, and that sharing fundamentally works by building a URL with content parameters for each platform. For highly custom requirements, the author suggests implementing the links directly. The license is MIT.

Copy-paste prompts

Prompt 1

Show me the minimal HTML and JavaScript needed to add a share.js sharing bar to my blog post page.

Prompt 2

How do I configure share.js to show only Twitter, Facebook, and WeChat buttons and hide all other platforms?

Prompt 3

How does the WeChat QR code popup in share.js work, and how do I customize the text shown in that popup?

Prompt 4

How do I override the URL and title that share.js uses when building the share link for Twitter?

Prompt 5

Can I use share.js without jQuery, and how do I load it as a RequireJS module in my existing project?

Open on GitHub → Explain another repo

← overtrue on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.