Create Social Share Popup Box with Pure JavaScript – needShareButton

Preview:

Description:

A pure Javascript / Html5 social widget for your website that displays a social share popup to share your web content on 21 popular social networks and mailto links.

How to use it:

Load the required needsharebutton.min.css in the document’s head section.

<link rel="stylesheet" href="dist/needsharebutton.min.css">

Add a default social share button on your web page.

<div id="demo" class="need-share-button-default"></div>

You can customize the social share widget using html5 data-OptionName attributes on button element.

<div id="demo" 
     class="need-share-button-default" 
     data-share-icon-style="box" 
     data-share-networks="Mailto,Twitter,Pinterest,Facebook">
</div>

Initialization.

new needShareDropdown(document.getElementById('demo'));

You can also customize the social share widget using option object during initialization.

new needShareDropdown(document.getElementById('demo'), {
  // child selector of custom share button
  shareButtonClass: false, 
  // default or box
  iconStyle: 'default', 
  // horizontal or vertical
  boxForm: 'horizontal', 
  // top / middle / bottom + Left / Center / Right
  position: 'bottomCenter', 
  // text for trigger button
  buttonText: 'Share',
  // http or https
  protocol: ['http', 'https'].indexOf(window.location.href.split(':')[0]) === -1 ? 'https://' : '//',
  // url to share
  url: window.location.href,
  // title to share
  title: root.getTitle(),
  // image to share
  image: root.getImage(),
  // description to share
  description: root.getDescription(),
  // social networks
  networks: 'Mailto,Twitter,Pinterest,Facebook,GooglePlus,Reddit,Delicious,Tapiture,StumbleUpon,Linkedin,Slashdot,Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,Pingfm,Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru'
  
});

Changelog:

07/30/2018

• actualize facebook share link