social-network-share

dependencies

social-network-share needs externals resources

if you familiar with node.js, you can retrieve them with npm install htmlelement-extension htmlelement-events-extension object-polyfills --save

otherwise, you can also reference them on jsdelivr

<script src="https://cdn.jsdelivr.net/npm/htmlelement-extension@0.8.13/distrib/htmlElement.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/htmlelement-events-extension@0.9.10/distrib/htmlElement-events.min.js"></script> for IE: <script src="https://cdn.jsdelivr.net/npm/object-polyfills@0.8.0/distrib/object-polyfills.min.js"></script> social-network-share come with many styles,you must reference the one you want or create one to your taste. Predefined styles are localized in ./node_modules/social-network-share/distrib/css

<link rel="stylesheet" type="text/css" href="modules/social-network-share/distrib/css/social-flat.css" /> or on jsdelivr

<link rel="stylesheet" type="text/css" href="#" />

config

You can configure apparence of social-network-share in many ways:

containerIdthe buttons bar need a html container, you specify it by the property containerId

collapsableIndicate if the share buttons shoulb be collapsed

showLabelindicates whether button labels are visible or not

minWidthWithLabelstring (like 65px), indicate the min width for labels

shareInindicate the target of the action, Can be "popup","currentWindow","newWindow"

sharesarray of strings contains the name of shares? You can use cominaisions of "twitter", "facebook", "googleplus", "linkedin", "pinterest", "email", "stumbleupon", "whatsapp", "telegram", "line", "viber", "pocket", "messenger", "browser-messenger", "vkontakte", "rss", "sms", "reddit"

Share

new socials.Share(config);

config jsonObject to configure share buttons

create a new Share instance that display buttons to share web page

<div id="socials-container"></div> <script> var config = { containerId: "socials-container", shares: ["twitter", "facebook", "googleplus"] }; var socialShares = new socials.Share(config); </script>

update

If you want modify the config of social-network-share dynamically, (example: change language of label or tooltip) you can update render in real time without reload the page.

usage