Social Sharing Libraray For Popular Social Networks – Ensemble SocialShare

Preview:

Description:

Ensemble SocialShare is a tiny, configurable, multilingual social sharing library for popular social media networks like Facebook, Twitter, Messenger, Whatsapp, Telegram, and Linkedin.

Users also have options to share your site info with their friends via Email, Copy Link, and Web Share API.

How to use it:

1. Load the required JavaScript and CSS files in the document.

<link rel="stylesheet" href="./dist/css/ensemble-social-share.css" />
<script src="./dist/js/ensemble-social-share.min.js"></script>

2. Load the iconic font for the social icons.

<link rel="stylesheet" href="iconset.tmp.css" />

3. Create a container to hold the social icons.

<div class="social-share" data-social-share></div>

4. Initialize the Ensemble SocialShare and done.

const element = document.querySelector('.social-share');
new ensemble.SocialShare(element);

5. Config the social sharing component with the following options.

new ensemble.SocialShare(element,{
    // namespace
    ns: 'share',
    fx: true,
    // root element
    root: 'body',
    // default classname
    className: 'social-share',
    // link to share
    // defaults to location.href
    link: '',
    // page title to share
    // defaults to window.title
    title: '',
    // description to share
    description: '',
    // actions to display
    displays: null,
    // action intents
    intents: {
      'facebook': 0,
      'twitter': 0,
      'whatsapp': 1,
      'messenger': 1,
      'telegram': 1,
      'linkedin': 0,
      'send-email': 2,
      'copy-link': 3,
      'web-share': 4
    },
    // URI strings
    uriform: {
      'facebook': 'https://facebook.com/sharer.php?u=%url%',
      'twitter': 'https://twitter.com/share?url=%url%&text=%title%',
      'whatsapp': 'https://api.whatsapp.com/send?text=%text%',
      'messenger': 'fb-messenger://share/?link=%url%&app_id=%app_id%',
      'telegram': 'https://telegram.me/share/url?url=%url%&text=%text%',
      'linkedin': 'https://www.linkedin.com/sharing/share-offsite?mini=true&url=%url%&title=%title%&ro=false&summary=%summary%',
      'send-email': 'mailto:?subject=%subject%&body=%text%'
    },
    // selector to find link
    selectorLink: {
      element: 'link[rel="canonical"]',
      attribute: 'href'
    },
    // selector to find title
    selectorTitle: null,
    // selector to find description
    selectorDescription: {
      element: 'meta[name="description"]',
      attribute: 'content'
    },
    // Custom parameters for label
    label: {},
});

6. Localize the social sharing component.

new ensemble.SocialShare(element,{
    locale: {
      label: 'Share',
      share: 'Share on %s',
      send: 'Send to %s',
      subject: 'An interesting thing',
      text: 'Hi! There is something may interesting you: %s',
      email: 'Send via email',
      copy: 'Copy link',
      copied: 'Copied link!',
      'whatsapp': 'WhatsApp',
      'linkedin': 'LinkedIn',
      'web-share': 'Share'
    },
});

7. Event handlers.

new ensemble.SocialShare(element,{
    onInit: function() {},
    onIntent: function() {}
});