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, X (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%',
      'ex': 'https://x.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() {}
});

Changelog:

v0.0.3 (10/03/2023)

• added ‘ex’ X (Twitter)