Author: | loltgt |
---|---|
Views Total: | 102 views |
Official Page: | Go to website |
Last Update: | October 3, 2023 |
License: | MIT |
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)