Get started with social-share.js CDN

MIT licensed

Social-share.js is a lightweight library for adding social sharing buttons to websites.

Tags:
  • sns
  • share
  • weibo
  • qq
  • douban
  • qzone
  • linkedin
  • facebook
  • google

Stable version

Copied!

How to start using social-share.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with social-share.js CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/social-share.js/1.0.16/js/social-share.min.js"></script>
  <style>
    .social-share-button {
      display: inline-block;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <button id="facebook-share" class="social-share-button">Share on Facebook</button>
  <button id="twitter-share" class="social-share-button">Share on Twitter</button>

  <script>
    const facebookShareButton = document.getElementById('facebook-share');
    const twitterShareButton = document.getElementById('twitter-share');

    const fbParams = {
      appId: 'YOUR_APP_ID',
      xfbml: false,
      version: 'v11.0'
    };

    const twitterParams = {
      text: 'Check out this awesome website!',
      via: 'YOUR_TWITTER_HANDLE'
    };

    window.fbAsyncInit = function() {
      FB.init(fbParams);
      FB.XFBML.parse();
    };

    facebookShareButton.addEventListener('click', () => {
      FB.ui({
        method: 'share',
        href: window.location.href
      }, function(response) {
        if (response && response.post_id) {
          console.log('Successfully shared on Facebook: ' + response.post_id);
        } else {
          console.log('Failed to share on Facebook');
        }
      });
    });

    twitterShareButton.addEventListener('click', () => {
      TweetButton.create(
        'Share on Twitter',
        twitterParams,
        function(error, tweet) {
          if (error) {
            console.log('Error sharing on Twitter: ' + error);
          } else {
            console.log('Successfully shared on Twitter: ' + tweet.text);
          }
        }
      );
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions