Author: | loltgt |
---|---|
Views Total: | 1,962 views |
Official Page: | Go to website |
Last Update: | June 25, 2021 |
License: | MIT |
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() {} });